ok

2024-10-01 09:49:22 +00:00
parent 088b63a4a2
commit a86aaef4f6
20 changed files with 902 additions and 207 deletions
--- a/src/App.js
+++ b/src/App.js
@@ -58,7 +58,6 @@ function App() {
  const [shopItems, setShopItems] = useState([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalContent, setModalContent] = useState(null);
-  const [nextModalContent, setNextModalContent] = useState(null);

  useEffect(() => {
    const calculateTotalsFromLocalStorage = () => {
@@ -213,6 +212,8 @@ function App() {
      console.log("transaction notification");
      setModal("new_transaction", data);

+      let permission = Notification.permission;
+      if (permission != "granted") return;
      navigator.serviceWorker.ready.then((registration) => {
        registration.showNotification("New Transaction", {
          body: `A new transaction was created: ${data.transactionDetails}`, // Customize as needed
@@ -289,10 +290,6 @@ function App() {

  // Function to open the modal
  const setModal = (content, params = {}) => {
-    if (modalContent) {
-      setNextModalContent(content);
-      return;
-    } // Prepare query parameters
    const queryParams = new URLSearchParams(location.search);

    // Update the modal and any additional params
@@ -329,9 +326,6 @@ function App() {

      // Update the URL without the 'modal' parameter
      navigate({ search: queryParams.toString() }, { replace: true });
-
-      if (nextModalContent) setModal(nextModalContent);
-      setNextModalContent("");
    }
  };

@@ -373,8 +367,11 @@ function App() {
      }
    };
    const handleLoad = async () => {
-      if (user != null && (user.roleId < 3 || user.roleId > 2)) {
+      const ses = sessionStorage.getItem("notifAsk");
+
+      if (!ses && user != null && (user.roleId < 3 || user.roleId > 2)) {
        await askNotificationPermission();
+        sessionStorage.setItem("notifAsk", true);
      }
    };
    handleLoad();
--- a/src/components/ButtonWithReplica.css
+++ b/src/components/ButtonWithReplica.css
@@ -29,7 +29,7 @@
  width: 140px;
  border-radius: 30px;
  position: absolute;
-  background-color: rgb(146, 146, 146); /* Semi-transparent blue */
+  background-color: rgba(146, 146, 146, 0); /* Semi-transparent blue */
  border: none;
  transition: all 0.5s ease-in-out;
  top: 50%;
--- a/src/components/ButtonWithReplica.js
+++ b/src/components/ButtonWithReplica.js
@@ -134,6 +134,7 @@ const ButtonWithReplica = ({
      >
        {children}
      </button>
+      <>
        <div className={`replica ${isActive ? "active" : ""}`}></div>
        <QRCodeSVG
          className={`bussinessQR ${isActive ? "active" : ""}`}
@@ -148,6 +149,7 @@ const ButtonWithReplica = ({
        <div className={`price ${isActive ? "active" : ""}`}>
          <h1>{price}</h1>
        </div>
+      </>
    </div>
  );
 };
--- a/src/components/ItemType.js
+++ b/src/components/ItemType.js
@@ -55,7 +55,9 @@ export default function ItemType({
      <div
        onClick={onClick}
        className={styles["item-type-rect"]}
-        style={{ top: selected ? "-10px" : "initial" }}
+        style={{
+          top: selected ? "-10px" : "initial",
+        }}
      >
        <img
          src={previewUrl}
@@ -89,7 +91,10 @@ export default function ItemType({
        value={name}
        onChange={handleNameChange}
        disabled={!blank}
-        style={{ top: selected ? "-5px" : "initial" }}
+        style={{
+          top: selected ? "-5px" : "initial",
+          borderBottom: selected ? "1px solid #000" : "none",
+        }}
      />
      {blank && (
        <button className={styles["item-type-create"]} onClick={handleCreate}>
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -14,7 +14,7 @@ import MaterialList from "../pages/MaterialList.js";
 import MaterialMutationsPage from "../pages/MaterialMutationsPage.js";
 import Reports from "../pages/Reports.js";
 import NotificationBlocked from "../pages/NotificationBlocked.js";
-
+import WelcomePageEditor from "../pages/WelcomePageEditor.js";
 const Modal = ({ shop, isOpen, onClose, modalContent }) => {
  if (!isOpen) return null;

@@ -63,6 +63,7 @@ const Modal = ({ shop, isOpen, onClose, modalContent }) => {
        {modalContent === "update_stock" && (
          <MaterialMutationsPage cafeId={shop.cafeId} />
        )}
+        {modalContent === "welcome_config" && <WelcomePageEditor />}
        {modalContent === "reports" && <Reports cafeId={shop.cafeId} />}
      </div>
    </div>
--- a/src/components/Modal.module.css
+++ b/src/components/Modal.module.css
@@ -13,7 +13,7 @@

 .modalContent {
  width: 90%;
-  height: 80%;
+  /* height: 80%; */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: visible; /* Add this line to enable scrolling */
--- a/src/components/PaymentOptions.js
+++ b/src/components/PaymentOptions.js
@@ -1,25 +1,25 @@
 import React, { useState, useRef, useEffect } from "react";
-import jsQR from "jsqr"; // Import jsQR library
+import jsQR from "jsqr";
 import { getImageUrl } from "../helpers/itemHelper";
 import {
  getCafe,
  saveCafeDetails,
  setConfirmationStatus,
-} from "../helpers/cafeHelpers"; // Import the helper function
+} from "../helpers/cafeHelpers";
 import Switch from "react-switch";

+// Main Component
 const SetPaymentQr = ({ shopId }) => {
  const [qrPosition, setQrPosition] = useState([50, 50]);
  const [qrSize, setQrSize] = useState(50);
  const [qrPayment, setQrPayment] = useState();
  const [qrCodeDetected, setQrCodeDetected] = useState(false);
  const qrPaymentInputRef = useRef(null);
-  const overlayTextRef = useRef(null);
  const qrCodeContainerRef = useRef(null);
  const [isNeedConfirmation, setIsNeedConfirmation] = useState(false);
-  const [cafe, setCafe] = useState([]);
+  const [cafe, setCafe] = useState({});

-  // Use useEffect to detect QR code after qrPayment updates
+  // Fetch cafe details on mount or shopId change
  useEffect(() => {
    const fetchCafe = async () => {
      try {
@@ -29,119 +29,100 @@ const SetPaymentQr = ({ shopId }) => {
        setIsNeedConfirmation(response.needsConfirmation);
        setQrPosition([response.xposition, response.yposition]);
        setQrSize(response.scale);
-        console.log(response);
      } catch (error) {
        console.error("Error fetching cafe:", error);
      }
    };
-
    fetchCafe();
  }, [shopId]);

+  // Detect QR code when qrPayment updates
  useEffect(() => {
    if (qrPayment) {
      detectQRCodeFromContainer();
    }
  }, [qrPayment]);

+  // Handle file input change
  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
-      const newqrPayment = URL.createObjectURL(file); // Create a temporary URL for display
+      const newqrPayment = URL.createObjectURL(file);
      setQrPayment(newqrPayment);
    }
  };

+  // Detect QR code from the container
  const detectQRCodeFromContainer = () => {
    const container = qrCodeContainerRef.current;
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
-
-    // Create an image element to load the background image
    const img = new Image();
-    img.crossOrigin = "Anonymous"; // Handle CORS if needed
+    img.crossOrigin = "Anonymous";
    img.onload = () => {
-      // Set canvas size
      canvas.width = container.offsetWidth;
      canvas.height = container.offsetHeight;
-
-      // Draw image on canvas
      context.drawImage(img, 0, 0, canvas.width, canvas.height);
-
      const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
      const qrCode = jsQR(imageData.data, canvas.width, canvas.height);
-
+      setQrCodeDetected(!!qrCode);
      if (qrCode) {
-        setQrCodeDetected(true);
        console.log("QR Code detected:", qrCode.data);
-      } else {
-        setQrCodeDetected(false);
-        console.log("No QR Code detected");
      }
    };
-    img.src = qrPayment; // Load the image URL
+    img.src = qrPayment;
  };

-  const handleSave = () => {
-    const qrPaymentFile = qrPaymentInputRef.current.files[0]; // Get the selected file for qrPayment
-
-    // Prepare the details object
+  // Save cafe details
+  const handleSave = async () => {
+    const qrPaymentFile = qrPaymentInputRef.current.files[0];
    const details = {
      qrPosition,
      qrSize,
-      qrPaymentFile, // Include qrPayment file
+      qrPaymentFile,
    };

-    // Call saveCafeDetails function with the updated details object
-    saveCafeDetails(cafe.cafeId, details)
-      .then((response) => {
-        console.log("Cafe details saved:", response);
-        // handleQrSave(qrPosition, qrSize, qrPayment);
-      })
-      .catch((error) => {
-        console.error("Error saving cafe details:", error);
-      });
-  };
-
-  const handleChange = async () => {
-    console.log(isNeedConfirmation);
-    setIsNeedConfirmation(!isNeedConfirmation);
-    console.log(!isNeedConfirmation);
    try {
-      // Wait for the updateItemAvailability response
+      const response = await saveCafeDetails(cafe.cafeId, details);
+      console.log("Cafe details saved:", response);
+    } catch (error) {
+      console.error("Error saving cafe details:", error);
+    }
+  };
+
+  // Toggle confirmation status
+  const handleChange = async () => {
+    try {
      const response = await setConfirmationStatus(
        cafe.cafeId,
        !isNeedConfirmation
      );
-
      setIsNeedConfirmation(response.needsConfirmation);
    } catch (error) {
-      console.log(error);
+      console.error(error);
      setIsNeedConfirmation(cafe.needsConfirmation);
    }
  };

  return (
-    <div>
+    <div style={styles.container}>
+      <h2 style={styles.title}>Payment QRIS</h2>
      <div
        id="qr-code-container"
        ref={qrCodeContainerRef}
        style={{
-          position: "relative",
-          width: "300px",
-          height: "300px",
-          background: `center center / contain no-repeat url(${qrPayment})`,
+          ...styles.qrCodeContainer,
+          backgroundImage: `url(${qrPayment})`,
+          backgroundPosition: "center",
+          backgroundRepeat: "no-repeat",
          backgroundSize: "contain",
-          overflow: "hidden",
-          border: "1px solid #ddd",
        }}
      >
        <div
-          ref={overlayTextRef}
          style={styles.overlayText}
          onClick={() => qrPaymentInputRef.current.click()}
        >
-          Click To Change Image
+          Click To Change
        </div>
        <input
          type="file"
@@ -151,12 +132,72 @@ const SetPaymentQr = ({ shopId }) => {
          onChange={handleFileChange}
        />
      </div>
-      <div style={{ marginTop: "20px" }}>
+      <div style={styles.resultMessage}>
        {qrCodeDetected ? <p>QR Code Detected</p> : <p>No QR Code Detected</p>}
-        <div style={{ marginTop: "20px" }}>
-          <button
-            onClick={handleSave}
-            style={{
+      </div>
+      <div style={styles.buttonContainer}>
+        <button onClick={handleSave} style={styles.saveButton}>
+          Save
+        </button>
+      </div>
+      <div style={styles.switchContainer}>
+        <h1>Double Check tem Availability</h1>
+        <p style={styles.description}>
+          Turn on the switch for the clerk to double check before customer pay.
+        </p>
+        <Switch onChange={handleChange} checked={isNeedConfirmation} />
+      </div>
+    </div>
+  );
+};
+
+// Styles
+const styles = {
+  container: {
+    backgroundColor: "white",
+    padding: "20px",
+    borderRadius: "8px",
+    boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
+    textAlign: "center", // Center text and children
+  },
+  title: {
+    marginBottom: "20px",
+    fontSize: "24px",
+    fontWeight: "bold",
+  },
+  qrCodeContainer: {
+    position: "relative",
+    width: "300px",
+    height: "300px",
+    backgroundSize: "contain",
+    border: "1px solid #ddd",
+    overflow: "hidden",
+    margin: "0 auto", // Center the QR code container
+  },
+  overlayText: {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    fontSize: "550%",
+    textAlign: "left",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    color: "rgba(256, 256, 256, 0.5)",
+    padding: "10px",
+    borderRadius: "5px",
+    cursor: "pointer",
+  },
+  resultMessage: {
+    marginTop: "20px",
+    textAlign: "center",
+  },
+  buttonContainer: {
+    marginTop: "20px",
+    textAlign: "center",
+  },
+  saveButton: {
    padding: "10px 20px",
    fontSize: "16px",
    backgroundColor: "#28a745",
@@ -165,37 +206,16 @@ const SetPaymentQr = ({ shopId }) => {
    borderRadius: "4px",
    cursor: "pointer",
    transition: "background-color 0.3s",
-            }}
-            onMouseOver={(e) =>
-              (e.currentTarget.style.backgroundColor = "#218838")
-            }
-            onMouseOut={(e) =>
-              (e.currentTarget.style.backgroundColor = "#28a745")
-            }
-          >
-            Save
-          </button>
-        </div>
-      </div>
-
-      <Switch onChange={() => handleChange()} checked={isNeedConfirmation} />
-    </div>
-  );
-};
-
-const styles = {
-  overlayText: {
-    position: "absolute",
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-    color: "#fff",
-    padding: "10px",
-    borderRadius: "5px",
-    cursor: "pointer",
  },
-  // Other styles omitted for brevity
+  switchContainer: {
+    marginTop: "20px",
+    textAlign: "center",
+  },
+  description: {
+    margin: "10px 0",
+    fontSize: "14px",
+    color: "#666",
+  },
 };

 export default SetPaymentQr;
--- a/src/config.js
+++ b/src/config.js
@@ -1,5 +1,5 @@
 // src/config.js

-const API_BASE_URL = "https://2jtmkn-5000.csb.app"; // Replace with your actual backend URL
+const API_BASE_URL = "https://fmcf2m-5000.csb.app"; // Replace with your actual backend URL

 export default API_BASE_URL;
--- a/src/helpers/cafeHelpers.js
+++ b/src/helpers/cafeHelpers.js
@@ -23,6 +23,40 @@ export async function getCafe(cafeId) {
    console.error("Error:", error);
  }
 }
+// api.js
+export const saveWelcomePageConfig = async (details) => {
+  const formData = new FormData();
+
+  // Append image file if it exists
+  if (details.image) {
+    const blob = await fetch(details.image).then((res) => res.blob());
+    formData.append("image", blob, "welcome-image.png"); // Specify filename if needed
+  }
+
+  // Append other form fields
+  formData.append("welcomingText", details.welcomingText);
+  formData.append("backgroundColor", details.backgroundColor);
+  formData.append("textColor", details.textColor);
+
+  try {
+    const response = await fetch(`${API_BASE_URL}/welcome-config`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${getAuthToken()}`, // Assuming you have an auth token
+      },
+      body: formData,
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to save welcome page configuration");
+    }
+
+    return await response.json();
+  } catch (error) {
+    console.error("Error saving welcome page config:", error);
+    return null;
+  }
+};

 export async function getOwnedCafes(userId) {
  try {
--- a/src/helpers/transactionHelpers.js
+++ b/src/helpers/transactionHelpers.js
@@ -149,6 +149,30 @@ export async function getTransaction(transactionId) {
  }
 }

+export async function getMyTransactions(shopId, demand) {
+  try {
+    const token = getLocalStorage("auth");
+    const response = await fetch(
+      `${API_BASE_URL}/transaction/get-my-transactions`,
+      {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    );
+
+    if (!response.ok) {
+      return false;
+    }
+
+    const transactions = await response.json();
+    return transactions;
+  } catch (error) {
+    console.error("Error:", error);
+  }
+}
 export async function getTransactions(shopId, demand) {
  try {
    const token = getLocalStorage("auth");
--- a/src/pages/CafePage.js
+++ b/src/pages/CafePage.js
@@ -24,6 +24,7 @@ import {
  updateLocalStorage,
 } from "../helpers/localStorageHelpers";
 import { unsubscribeUser } from "../helpers/subscribeHelpers.js";
+import WelcomePage from "./WelcomePage.js";

 function CafePage({
  table,
@@ -55,7 +56,29 @@ function CafePage({

  const [isEditMode, setIsEditMode] = useState(false);
  const [filterId, setFilterId] = useState(0);
+  const [isStarted, setIsStarted] = useState(false);

+  useEffect(() => {
+    // Check sessionStorage for 'getStartedClicked' on mount
+    const clicked = sessionStorage.getItem("getStartedClicked");
+    if (clicked) setIsStarted(true);
+    else document.body.style.overflow = "hidden";
+
+    // Define a custom event
+    const handleStorageChange = (event) => {
+      if (event.detail === "getStartedClicked") {
+        setIsStarted(true);
+      }
+    };
+
+    // Listen for custom events
+    window.addEventListener("storageChange", handleStorageChange);
+
+    // Cleanup the event listener
+    return () => {
+      window.removeEventListener("storageChange", handleStorageChange);
+    };
+  }, []);
  useEffect(() => {
    if (user.cafeId != null && user.cafeId !== shopId) {
      // Preserve existing query parameters
@@ -108,6 +131,8 @@ function CafePage({
    );
  else
    return (
+      <>
+        {!isStarted && <WelcomePage></WelcomePage>}
        <div className="App">
          <body className="App-header">
            <Header
@@ -181,6 +206,7 @@ function CafePage({
            />
          )}
        </div>
+      </>
    );
 }

--- a/src/pages/MaterialList.js
+++ b/src/pages/MaterialList.js
@@ -382,7 +382,9 @@ const MaterialList = ({ cafeId }) => {
          {sortedMutations.length > 0 ? (
            sortedMutations.map((mutation) => (
              <div key={mutation.id} style={styles.mutationCard}>
-                <h4 style={styles.mutationTitle}>{formatDate(mutation.createdAt)}</h4>
+                <h4 style={styles.mutationTitle}>
+                  {formatDate(mutation.createdAt)}
+                </h4>
                <p>Details: {mutation.reason}</p>
                <p>stok {mutation.newStock}</p>
              </div>
@@ -404,6 +406,7 @@ const styles = {
    margin: "0 auto",
    height: "100%", // Adjust height based on your needs
    overflowY: "auto", // Enables vertical scrolling
+    backgroundColor: "white",
  },
  heading: {
    textAlign: "center",
--- a/src/pages/Transaction.js
+++ b/src/pages/Transaction.js
@@ -192,7 +192,7 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
                )}
              </button>
            </div>
-            {transaction.confirmed < 2 && (
+            {transaction.confirmed >= 0 && transaction.confirmed < 2 && (
              <h5
                className={styles.DeclineButton}
                onClick={() => handleDecline(transaction.transactionId)}
--- a/src/pages/Transaction_confirmed.js
+++ b/src/pages/Transaction_confirmed.js
@@ -123,14 +123,8 @@ export default function Transactions({
            onClick={() =>
              setSelectedTable(transaction.Table || { tableId: 0 })
            }
-            style={{ overflow: isPaymentOpen ? "hidden" : "" }}
+            style={{ overflow: "hidden" }}
          >
-            {transaction.paymentClaimed && transaction.confirmed < 2 && (
-              <div className={styles.RibbonBanner}>
-                <img src={"https://i.imgur.com/yt6osgL.png"}></img>
-                <h1>payment claimed</h1>
-              </div>
-            )}
            <h2 className={styles["Transactions-detail"]}>
              Transaction ID: {transaction.transactionId}
            </h2>
@@ -138,13 +132,17 @@ export default function Transactions({
              Payment Type: {transaction.payment_type}
            </h2>
            <ul>
-              {transaction.DetailedTransactions.map((detail) => (
+              {(isPaymentOpen
+                ? transaction.DetailedTransactions.slice(0, 2)
+                : transaction.DetailedTransactions
+              ).map((detail) => (
                <li key={detail.detailedTransactionId}>
                  <span>{detail.Item.name}</span> - {detail.qty} x Rp{" "}
                  {detail.Item.price}
                </li>
              ))}
            </ul>
+
            <h2 className={styles["Transactions-detail"]}>
              {transaction.serving_type === "pickup"
                ? "Self pickup"
--- a/src/pages/Transactions.js
+++ b/src/pages/Transactions.js
@@ -3,6 +3,7 @@ import styles from "./Transactions.module.css";
 import { useParams } from "react-router-dom";
 import { ColorRing } from "react-loader-spinner";
 import {
+  getMyTransactions,
  getTransactions,
  confirmTransaction,
  declineTransaction,
@@ -22,7 +23,11 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
  useEffect(() => {
    const fetchTransactions = async () => {
      try {
-        const response = await getTransactions(shopId || propsShopId, 5);
+        let response;
+        if (deviceType == "clerk")
+          response = await getTransactions(shopId || propsShopId, 5);
+        else if (deviceType == "guestDevice")
+          response = await getMyTransactions(shopId || propsShopId, 5);
        setTransactions(response);
      } catch (error) {
        console.error("Error fetching transactions:", error);
@@ -147,25 +152,53 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
                  className={styles.PayButton}
                  onClick={() => handleConfirm(transaction.transactionId)}
                  disabled={
-                    transaction.confirmed === -1 ||
-                    transaction.confirmed === 3 ||
-                    isPaymentLoading
-                  } // Disable button if confirmed (1) or declined (-1) or loading
+                    isPaymentLoading || // Disable if loading
+                    (deviceType === "clerk" &&
+                      transaction.confirmed !== 1 &&
+                      transaction.confirmed !== 2 &&
+                      transaction.confirmed !== 0) || // Disable for clerk when not Confirm has paid, Confirm item is ready, or Confirm availability
+                    (deviceType !== "clerk" &&
+                      transaction.confirmed !== 1 &&
+                      transaction.paymentClaimed) || // Disable for buyer when not Claim has paid
+                    transaction.confirmed === 3 || // Disable if Transaction success
+                    transaction.confirmed === -1 || // Disable if Declined
+                    transaction.confirmed === -2 || // Disable if Canceled
+                    transaction.confirmed === 2 || // Disable if In process
+                    (transaction.confirmed === 1 && transaction.paymentClaimed) // Disable if verifying payment
+                  }
                >
-                  {isPaymentLoading ? (
+                  {deviceType === "clerk" ? (
+                    isPaymentLoading ? (
                      <ColorRing height="50" width="50" color="white" />
                    ) : transaction.confirmed === 1 ? (
-                    "Confirm has paid" // Display "Confirm has paid" if the transaction is confirmed (1)
+                      "Confirm has paid"
                    ) : transaction.confirmed === -1 ? (
-                    "Declined" // Display "Declined" if the transaction is declined (-1)
+                      "Declined"
                    ) : transaction.confirmed === -2 ? (
-                    "Canceled" // Display "Declined" if the transaction is declined (-1)
+                      "Canceled"
                    ) : transaction.confirmed === 2 ? (
-                    "Confirm item has ready" // Display "Item ready" if the transaction is ready (2)
+                      "Confirm item is ready"
                    ) : transaction.confirmed === 3 ? (
-                    "Transaction success" // Display "Item ready" if the transaction is ready (2)
+                      "Transaction success"
                    ) : (
-                    "Confirm availability" // Display "Confirm availability" if the transaction is not confirmed (0)
+                      "Confirm availability"
+                    )
+                  ) : isPaymentLoading ? (
+                    <ColorRing height="50" width="50" color="white" />
+                  ) : transaction.confirmed === 1 &&
+                    !transaction.paymentClaimed ? (
+                    "Claim has paid"
+                  ) : transaction.confirmed === 1 &&
+                    transaction.paymentClaimed ? (
+                    "Verifying your payment"
+                  ) : transaction.confirmed === -1 ? (
+                    "Declined"
+                  ) : transaction.confirmed === -2 ? (
+                    "Canceled"
+                  ) : transaction.confirmed === 2 ? (
+                    "In process"
+                  ) : (
+                    "Transaction success"
                  )}
                </button>
              </div>
--- a/src/pages/WelcomePage.css
+++ b/src/pages/WelcomePage.css
@@ -0,0 +1,56 @@
+/* WelcomePage.css */
+.welcome-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+
+.image-container {
+  width: 150px; /* Adjust as needed */
+  height: 150px; /* Adjust as needed */
+  overflow: hidden;
+  border-radius: 50%;
+  margin-bottom: 20px;
+}
+
+.circular-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.welcoming-text {
+  font-size: 24px;
+  margin-bottom: 20px;
+  font-family: poppins;
+}
+
+.get-started-button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 25px;
+  background-color: #007bff; /* Bootstrap primary color */
+  color: white;
+  cursor: pointer;
+  font-size: 16px;
+  transition: background-color 0.3s;
+  font-family: poppins;
+}
+
+.get-started-button:hover {
+  background-color: #0056b3; /* Darker shade on hover */
+}
+
+/* Fullscreen styles */
+.fullscreen {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100vw;
+  height: 100vh;
+  transform: translate(-50%, -50%);
+}
--- a/src/pages/WelcomePage.js
+++ b/src/pages/WelcomePage.js
@@ -0,0 +1,168 @@
+// WelcomePageEditor.js
+import React, { useState } from "react";
+import WelcomePage from "./WelcomePage";
+import { saveWelcomePageConfig } from "../helpers/cafeHelpers"; // Import the API function
+import Switch from "react-switch"; // Import react-switch
+import "./WelcomePageEditor.css";
+
+const WelcomePageEditor = () => {
+  const [image, setImage] = useState("");
+  const [welcomingText, setWelcomingText] = useState("Enjoy your coffee!");
+  const [backgroundColor, setBackgroundColor] = useState("#ffffff");
+  const [textColor, setTextColor] = useState("#000000");
+  const [loading, setLoading] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [isWelcomingPageEnabled, setIsWelcomingPageEnabled] = useState(true); // State for toggle switch
+
+  const handleImageChange = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setImage(reader.result);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleTextChange = (e) => {
+    setWelcomingText(e.target.value);
+  };
+
+  const handleColorChange = (e) => {
+    setBackgroundColor(e.target.value);
+  };
+
+  const handleTextColorChange = (e) => {
+    setTextColor(e.target.value);
+  };
+
+  const handleSave = async () => {
+    setLoading(true);
+
+    const details = {
+      image,
+      welcomingText,
+      backgroundColor,
+      textColor,
+      isWelcomingPageEnabled, // Include the toggle state
+    };
+
+    try {
+      const result = await saveWelcomePageConfig(details);
+      console.log("Configuration saved:", result);
+    } catch (error) {
+      console.error("Error saving configuration:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (isFullscreen)
+    return (
+      <WelcomePage
+        image={image}
+        welcomingText={welcomingText}
+        backgroundColor={backgroundColor}
+        textColor={textColor}
+        isFullscreen={true}
+        onGetStarted={() => setIsFullscreen(false)}
+      />
+    );
+
+  return (
+    <div
+      className="welcome-page-editor"
+      style={{ width: "80vw", height: "80vh" }}
+    >
+      <h2>Edit Welcome Page</h2>
+      <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+        <input type="file" accept="image/*" onChange={handleImageChange} />
+        <textarea
+          value={welcomingText}
+          onChange={handleTextChange}
+          placeholder="Enter welcoming text..."
+          style={{ height: "40px", resize: "none" }}
+        />
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}
+        >
+          <label>
+            Background Color:
+            <input
+              type="color"
+              value={backgroundColor}
+              onChange={handleColorChange}
+            />
+          </label>
+          <label>
+            Text Color:
+            <input
+              type="color"
+              value={textColor}
+              onChange={handleTextColorChange}
+            />
+          </label>
+          <div style={{ display: "flex", alignItems: "center" }}>
+            <span>Enable Welcoming Page:</span>
+            <Switch
+              onChange={() =>
+                setIsWelcomingPageEnabled(!isWelcomingPageEnabled)
+              }
+              checked={isWelcomingPageEnabled}
+              offColor="#888"
+              onColor="#0a74da"
+              uncheckedIcon={false}
+              checkedIcon={false}
+              height={20}
+              width={48}
+            />
+          </div>
+        </div>
+        <button onClick={handleSave} disabled={loading}>
+          {loading ? "Saving..." : "Save Configuration"}
+        </button>
+      </div>
+      <div
+        style={{ width: "100%", height: "100%", position: "relative", flex: 1 }}
+      >
+        {isWelcomingPageEnabled && (
+          <WelcomePage
+            image={image}
+            welcomingText={welcomingText}
+            backgroundColor={backgroundColor}
+            textColor={textColor}
+          />
+        )}
+        <div style={{ position: "absolute", bottom: 0, right: 0 }}>
+          <svg
+            width="100"
+            height="100"
+            style={{ position: "absolute", bottom: 0, right: 0 }}
+            onClick={() => setIsFullscreen(true)}
+          >
+            <g transform="rotate(45 50 50)">
+              <circle cx="50" cy="50" r="40" fill="rgba(0, 0, 0, 0.5)" />
+              <text
+                x="50"
+                y="50"
+                textAnchor="middle"
+                dominantBaseline="middle"
+                fontSize="24"
+                fill="white"
+              >
+                &lt;&gt;
+              </text>
+            </g>
+          </svg>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WelcomePageEditor;
--- a/src/pages/WelcomePageEditor.css
+++ b/src/pages/WelcomePageEditor.css
@@ -0,0 +1,56 @@
+/* WelcomePageEditor.css */
+.welcome-page-editor {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  background-color: #f9f9f9;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+h2 {
+  margin-bottom: 20px;
+  font-size: 24px;
+  color: #333;
+}
+
+input[type="file"] {
+  margin-bottom: 20px;
+}
+
+textarea {
+  width: 100%;
+  height: 100px; /* Adjust as needed */
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  resize: none;
+  margin-bottom: 20px;
+  font-size: 16px;
+}
+
+textarea:focus {
+  border-color: #007bff; /* Highlight border color on focus */
+  outline: none;
+}
+
+label {
+  margin-bottom: 20px;
+  font-size: 16px;
+}
+
+.welcome-preview {
+  width: 100%;
+  height: 100%;
+  border: 1px dashed #ccc; /* Preview border style */
+  border-radius: 8px;
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #ffffff; /* Background for preview area */
+}
--- a/src/pages/WelcomePageEditor.js
+++ b/src/pages/WelcomePageEditor.js
@@ -0,0 +1,142 @@
+// WelcomePageEditor.js
+import React, { useState } from "react";
+import WelcomePage from "./WelcomePage";
+import { saveWelcomePageConfig } from "../helpers/cafeHelpers"; // Import the API function
+import "./WelcomePageEditor.css";
+
+const WelcomePageEditor = () => {
+  const [image, setImage] = useState("");
+  const [welcomingText, setWelcomingText] = useState("Enjoy your coffee!");
+  const [backgroundColor, setBackgroundColor] = useState("#ffffff");
+  const [textColor, setTextColor] = useState("#000000");
+  const [loading, setLoading] = useState(false); // Loading state
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  const handleImageChange = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setImage(reader.result); // Store the base64 image
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleTextChange = (e) => {
+    setWelcomingText(e.target.value);
+  };
+
+  const handleColorChange = (e) => {
+    setBackgroundColor(e.target.value);
+  };
+
+  const handleTextColorChange = (e) => {
+    setTextColor(e.target.value);
+  };
+
+  const handleSave = async () => {
+    setLoading(true);
+
+    const details = {
+      image,
+      welcomingText,
+      backgroundColor,
+      textColor,
+    };
+
+    try {
+      const result = await saveWelcomePageConfig(details);
+      console.log("Configuration saved:", result);
+    } catch (error) {
+      console.error("Error saving configuration:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (isFullscreen)
+    return (
+      <WelcomePage
+        image={image}
+        welcomingText={welcomingText}
+        backgroundColor={backgroundColor}
+        textColor={textColor}
+        isFullscreen={true}
+        onGetStarted={() => setIsFullscreen(false)}
+      />
+    );
+
+  return (
+    <div
+      className="welcome-page-editor"
+      style={{ width: "80vw", height: "80vh" }}
+    >
+      <h2>Edit Welcome Page</h2>
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        <input type="file" accept="image/*" onChange={handleImageChange} />
+        <textarea
+          value={welcomingText}
+          onChange={handleTextChange}
+          placeholder="Enter welcoming text..."
+          style={{ height: "20px", resize: "none" }} // Reduced height
+        />
+        <div style={{ display: "flex", justifyContent: "space-between" }}>
+          <label>
+            Background Color:
+            <input
+              type="color"
+              value={backgroundColor}
+              onChange={handleColorChange}
+            />
+          </label>
+          <label>
+            Text Color:
+            <input
+              type="color"
+              value={textColor}
+              onChange={handleTextColorChange}
+            />
+          </label>
+        </div>
+        <button onClick={handleSave} disabled={loading}>
+          {loading ? "Saving..." : "Save Configuration"}
+        </button>
+      </div>
+      <div
+        style={{ width: "100%", height: "100%", position: "relative", flex: 1 }}
+      >
+        <WelcomePage
+          image={image}
+          welcomingText={welcomingText}
+          backgroundColor={backgroundColor}
+          textColor={textColor}
+        />
+        <div style={{ position: "absolute", bottom: 0, right: 0 }}>
+          <svg
+            width="100" // Adjust size as needed
+            height="100" // Adjust size as needed
+            style={{ position: "absolute", bottom: 0, right: 0 }}
+            onClick={() => setIsFullscreen(true)}
+          >
+            <g transform="rotate(45 50 50)">
+              <circle cx="50" cy="50" r="40" fill="rgba(0, 0, 0, 0.5)" />
+              <text
+                x="50"
+                y="50"
+                textAnchor="middle"
+                dominantBaseline="middle"
+                fontSize="24"
+                fill="white" // Adjust text color as needed
+              >
+                &lt;&gt;
+              </text>
+            </g>
+          </svg>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WelcomePageEditor;
--- a/src/pages/WelcomePageEditorr.js
+++ b/src/pages/WelcomePageEditorr.js
@@ -0,0 +1,130 @@
+import React, { useRef, useEffect, useState } from "react";
+import styles from "./Cart.module.css";
+import ItemLister from "../components/ItemLister";
+import { ThreeDots, ColorRing } from "react-loader-spinner";
+import { useParams } from "react-router-dom";
+import { useNavigationHelpers } from "../helpers/navigationHelpers";
+import { getTable } from "../helpers/tableHelper.js";
+import { getCartDetails } from "../helpers/itemHelper.js";
+import { getItemsByCafeId } from "../helpers/cartHelpers"; // Import getItemsByCafeId
+import Modal from "../components/Modal"; // Import the reusable Modal component
+
+export default function Cart({}) {
+  const [cartItems, setCartItems] = useState([]);
+  const [totalPrice, setTotalPrice] = useState(0);
+  const [orderType, setOrderType] = useState("serve");
+  const [loading, setLoading] = useState(true);
+  const [isCheckoutLoading, setIsCheckoutLoading] = useState(false); // State for checkout button loading animation
+  const [email, setEmail] = useState("");
+
+  const textareaRef = useRef(null);
+
+  useEffect(() => {
+    const fetchCartItems = async () => {
+      try {
+        setLoading(true);
+        const items = await getCartDetails("8");
+        setLoading(false);
+        console.log(items);
+        if (items) setCartItems(items);
+
+        const initialTotalPrice = items.reduce((total, itemType) => {
+          return (
+            total +
+            itemType.itemList.reduce((subtotal, item) => {
+              return subtotal + item.qty * item.price;
+            }, 0)
+          );
+        }, 0);
+        setTotalPrice(initialTotalPrice);
+      } catch (error) {
+        console.error("Error fetching cart items:", error);
+      }
+    };
+
+    fetchCartItems();
+
+    const textarea = textareaRef.current;
+    if (textarea) {
+      const handleResize = () => {
+        textarea.style.height = "auto";
+        textarea.style.height = `${textarea.scrollHeight}px`;
+      };
+      textarea.addEventListener("input", handleResize);
+      handleResize();
+      return () => textarea.removeEventListener("input", handleResize);
+    }
+  }, []);
+
+  const refreshTotal = async () => {
+    try {
+      const items = await getItemsByCafeId("8");
+      const updatedTotalPrice = items.reduce((total, localItem) => {
+        const cartItem = cartItems.find((itemType) =>
+          itemType.itemList.some((item) => item.itemId === localItem.itemId)
+        );
+
+        if (cartItem) {
+          const itemDetails = cartItem.itemList.find(
+            (item) => item.itemId === localItem.itemId
+          );
+          return total + localItem.qty * itemDetails.price;
+        }
+        return total;
+      }, 0);
+
+      setTotalPrice(updatedTotalPrice);
+    } catch (error) {
+      console.error("Error refreshing total price:", error);
+    }
+  };
+  return (
+    <div className={styles.Cart}>
+      <div style={{ marginTop: "30px" }}></div>
+      <h2 className={styles["Cart-title"]}></h2>
+      <div style={{ marginTop: "-45px" }}></div>
+      {cartItems.map((itemType) => (
+        <ItemLister
+          key={itemType.itemTypeId}
+          refreshTotal={refreshTotal}
+          forCart={true}
+          typeName={itemType.typeName}
+          itemList={itemType.itemList}
+        />
+      ))}
+      <div className={styles.OrderTypeContainer}>
+        {orderType === "serve" && (
+          <input
+            type="text"
+            placeholder="Table Number"
+            className={styles.TableNumberInput}
+          />
+        )}
+      </div>
+
+      <div className={styles.NoteContainer}>
+        <span>Note</span>
+        <span></span>
+      </div>
+
+      <textarea
+        ref={textareaRef}
+        className={styles.NoteInput}
+        placeholder="Add a note..."
+      />
+
+      <div className={styles.TotalContainer}>
+        <span>Total:</span>
+        <span>Rp {totalPrice}</span>
+      </div>
+      <button className={styles.CheckoutButton}>
+        {isCheckoutLoading ? (
+          <ColorRing height="50" width="50" color="white" />
+        ) : (
+          "Checkout"
+        )}
+      </button>
+      <div className={styles.BackToMenu}>Back to menu</div>
+    </div>
+  );
+}