ok

2025-03-15 18:59:44 +07:00
parent 43ad59a1f8
commit a64b999a05
30 changed files with 1818 additions and 391 deletions
--- a/src/components/ButtonWithReplica.css
+++ b/src/components/ButtonWithReplica.css
@@ -108,7 +108,7 @@
  padding-top: 10px;
  background-color: transparent;
  color: transparent;
-  width: 21.7%;
+  width: 178.89px;
 }

 .downloadQR.active{
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -5,6 +5,7 @@ import { useNavigationHelpers } from "../helpers/navigationHelpers";
 import Switch from "react-switch";

 const HeaderBar = styled.div`
+  pointer-events: auto;
  margin-top:${(props) => (props.HeaderMargin)};
  display: flex;
  justify-content: space-between;
@@ -306,7 +307,7 @@ const Header = ({
    return `${cafeName}'s menu`;
  };
  return (
-    <HeaderBar HeaderMargin={HeaderMargin}>
+    <HeaderBar HeaderMargin={HeaderMargin} >
      <Title HeaderSize={HeaderSize}>
        {shopName == null
          ? HeaderText == null
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -8,6 +8,7 @@ import CreateTenant from "../pages/CreateTenant"
 import TablesPage from "./TablesPage.js";
 import PaymentOptions from "./PaymentOptions.js";
 import Transaction from "../pages/Transaction";
+import Transaction_item from "../pages/Transaction_item";
 import Transaction_pending from "../pages/Transaction_pending";
 import Transaction_confirmed from "../pages/Transaction_confirmed";
 import Transaction_success from "../pages/Transaction_success";
@@ -18,6 +19,7 @@ import MaterialList from "../pages/MaterialList.js";
 import MaterialMutationsPage from "../pages/MaterialMutationsPage.js";
 import Reports from "../pages/Reports.js";
 import NotificationRequest from "../pages/NotificationRequest.js";
+import Unavailable from "../pages/Unavailable.js";
 import NotificationBlocked from "../pages/NotificationBlocked.js";
 import WelcomePageEditor from "../pages/WelcomePageEditor.js";
 import GuidePage from "../pages/GuidePage";
@@ -32,7 +34,7 @@ import CreateCoupon from "../pages/CreateCoupon";
 import CheckCoupon from "../pages/CheckCoupon";
 import CreateUserWithCoupon from "../pages/CreateUserWithCoupon";

-const Modal = ({ user, shop, isOpen, onClose, modalContent, setModal, handleMoveToTransaction,welcomePageConfig, onModalCloseFunction }) => {
+const Modal = ({ user, shop, isOpen, onClose, modalContent, deviceType, setModal, handleMoveToTransaction,welcomePageConfig, onModalCloseFunction }) => {
  
  const [shopImg, setShopImg] = useState('');
  const [updateKey, setUpdateKey] = useState(0);
@@ -74,6 +76,7 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, setModal, handleMove
      {modalContent === "edit_account" && <AccountUpdatePage user={user} />}
        {modalContent === "reset-password" && <ResetPassword />}
        {modalContent === "req_notification" && <NotificationRequest setModal={setModal} />}
+        {modalContent === "unavailable" && <Unavailable close={handleContentClick} />}
        {modalContent === "blocked_notification" && <NotificationBlocked />}
        {modalContent === "create_clerk" && <CreateClerk shopId={shop.cafeId} />}
        {modalContent === "create_kedai" && <CreateCafe shopId={shop.cafeId} />}
@@ -85,9 +88,10 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, setModal, handleMove
        {modalContent === "transaction_canceled" && (
          <Transaction propsShopId={shop.cafeId} />
        )}
-        {modalContent === "transaction_pending" && <Transaction_pending />}
+        {modalContent === "transaction_pending" && <Transaction_pending deviceType={deviceType}/>}
+        {modalContent === "transaction_item" && <Transaction_item />}
        {modalContent === "transaction_confirmed" && (
-          <Transaction_confirmed paymentUrl={shop.qrPayment} />
+          <Transaction_confirmed  deviceType={deviceType} paymentUrl={shop.qrPayment} />
        )}
        {modalContent === "payment_claimed" && (
          <Payment_claimed paymentUrl={shop.qrPayment} />
--- a/src/components/PaymentOptions.js
+++ b/src/components/PaymentOptions.js
@@ -5,20 +5,24 @@ import {
  getCafe,
  saveCafeDetails,
  setConfirmationStatus,
+  setOpenBillAvailability
 } from "../helpers/cafeHelpers";
 import Switch from "react-switch"; // Import the Switch component

-const SetPaymentQr = ({ shopId, 
+const SetPaymentQr = ({ shopId,
  qrCodeUrl }) => {
  const [qrPosition, setQrPosition] = useState([50, 50]);
  const [qrSize, setQrSize] = useState(50);
  const [qrPayment, setQrPayment] = useState();
  const [qrCodeDetected, setQrCodeDetected] = useState(false);
  const [isNeedConfirmationState, setIsNeedConfirmationState] = useState(0);
+  const [isQRISavailable, setIsQRISavailable] = useState(0);
  const qrPaymentInputRef = useRef(null);
  const qrCodeContainerRef = useRef(null);
  const [cafe, setCafe] = useState({});
-  const [isConfig, setIsConfig] = useState(false);
+
+  const [isConfigQRIS, setIsConfigQRIS] = useState(false);
+  const [isOpenBillAvailable, setIsOpenBillAvailable] = useState(false);

  useEffect(() => {
    const fetchCafe = async () => {
@@ -29,6 +33,8 @@ const SetPaymentQr = ({ shopId,
        console.log(response.needsConfirmation);

        setIsNeedConfirmationState(response.needsConfirmation === true ? 1 : 0); // Set state based on fetched data
+        setIsQRISavailable(response.isQRISavailable === true ? 1 : 0); // Set state based on fetched data
+        setIsOpenBillAvailable(response.isOpenBillAvailable === true ? 1 : 0); // Set state based on fetched data
        setQrPosition([response.xposition, response.yposition]);
        setQrSize(response.scale);
      } catch (error) {
@@ -40,10 +46,10 @@ const SetPaymentQr = ({ shopId,

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

  // Handle file input change
  const handleFileChange = (e) => {
@@ -77,76 +83,139 @@ const SetPaymentQr = ({ shopId,

  // Save cafe details
  const handleSave = async () => {
-    const qrPaymentFile = qrPaymentInputRef.current.files[0];
+    let qrPaymentFile;
+    if(qrPaymentInputRef?.current?.files[0])
+      qrPaymentFile = qrPaymentInputRef.current.files[0];
    const details = {
      qrPosition,
      qrSize,
      qrPaymentFile,
+      isQRISavailable: isQRISavailable === 1,
+      isOpenBillAvailable: isOpenBillAvailable === 1,
+      isNeedConfirmationState: isNeedConfirmationState === 1
    };

    try {
      const response = await saveCafeDetails(cafe.cafeId, details);
+
+      setIsNeedConfirmationState(response.needsConfirmation ? 1 : 0); // Update state after saving
+      setIsQRISavailable(response.isQRISavailable ? 1 : 0); // Update state after saving
+      setIsOpenBillAvailable(response.isOpenBillAvailable ? 1 : 0); // Update state after saving
+
      console.log("Cafe details saved:", response);
    } catch (error) {
      console.error("Error saving cafe details:", error);
    }
-
-    try {
-      const response = await setConfirmationStatus(cafe.cafeId, isNeedConfirmationState === 1);
-      setIsNeedConfirmationState(response.needsConfirmation ? 1 : 0); // Update state after saving
-    } catch (error) {
-      console.error(error);
-      setIsNeedConfirmationState(cafe.needsConfirmation ? 1 : 0); // Fallback to initial value
-    }
-  };
-
-  // Handle Switch toggle
-  const handleChange = (checked) => {
-    setIsNeedConfirmationState(checked ? 1 : 0); // Toggle state based on the switch
-  };
-
-  const handleError = () => {
-    setQrPayment('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSPsNr0TPq8dHT3nBwDQ6OHQQTrqzVFoeBOmuWfgyErrLbJi6f6CnnYhpNHEvkJ_2X-kyI&usqp=CAU'); // Set your fallback image here
  };

  return (
    <div style={styles.container}>
      <h3 style={styles.title}>Konfigurasi pembayaran</h3>
-      <div
-        id="qr-code-container"
-        ref={qrCodeContainerRef}
-        onClick={() => qrPaymentInputRef.current.click()}
-        style={{
-          ...styles.qrCodeContainer,
-          backgroundImage: `url(${qrPayment})`,
-          backgroundPosition: "center",
-          backgroundRepeat: "no-repeat",
-          backgroundSize: "contain",
-        }}
-      >
-        <input
-          type="file"
-          accept="image/*"
-          ref={qrPaymentInputRef}
-          style={{ display: "none" }}
-          onChange={handleFileChange}
-        />
-      </div>
-      <div style={styles.uploadMessage}>
-        <p>Klik untuk ganti background</p>
-      </div>
-      <div style={styles.resultMessage}>
-        {qrCodeDetected && qrPayment !== 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSPsNr0TPq8dHT3nBwDQ6OHQQTrqzVFoeBOmuWfgyErrLbJi6f6CnnYhpNHEvkJ_2X-kyI&usqp=CAU' ? <p>QR terdeteksi</p> : <p>Tidak ada qr terdeteksi</p>}
-        {qrCodeDetected && qrPayment !== 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSPsNr0TPq8dHT3nBwDQ6OHQQTrqzVFoeBOmuWfgyErrLbJi6f6CnnYhpNHEvkJ_2X-kyI&usqp=CAU' ? <div
-          onClick={() => qrPaymentInputRef.current.click()} style={styles.uploadButton}>Ganti</div> : <div
-            onClick={() => qrPaymentInputRef.current.click()} style={styles.uploadButton}>Unggah</div>}
+
+      <div style={styles.switchContainer}>
+        <p style={styles.uploadMessage}>
+          Pembayaran QRIS.
+        </p>
+
+        {isConfigQRIS ?
+          <>
+            <div
+              id="qr-code-container"
+              ref={qrCodeContainerRef}
+              onClick={() => qrPaymentInputRef.current.click()}
+              style={{
+                ...styles.qrCodeContainer,
+                backgroundImage: `url(${qrPayment})`,
+                backgroundPosition: "center",
+                backgroundRepeat: "no-repeat",
+                backgroundSize: "contain",
+              }}
+            >
+              <input
+                type="file"
+                accept="image/*"
+                ref={qrPaymentInputRef}
+                style={{ display: "none" }}
+                onChange={handleFileChange}
+              />
+            </div>
+            <div style={styles.uploadMessage}>
+              <p>Klik untuk ganti background</p>
+            </div>
+            <div style={styles.resultMessage}>
+              {qrCodeDetected && qrPayment !== 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSPsNr0TPq8dHT3nBwDQ6OHQQTrqzVFoeBOmuWfgyErrLbJi6f6CnnYhpNHEvkJ_2X-kyI&usqp=CAU' ? <p>QR terdeteksi</p> : <p>Tidak ada qr terdeteksi</p>}
+              {qrCodeDetected && qrPayment !== 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSPsNr0TPq8dHT3nBwDQ6OHQQTrqzVFoeBOmuWfgyErrLbJi6f6CnnYhpNHEvkJ_2X-kyI&usqp=CAU' ? <div
+                onClick={() => qrPaymentInputRef.current.click()} style={styles.uploadButton}>Ganti</div> : <div
+                  onClick={() => qrPaymentInputRef.current.click()} style={styles.uploadButton}>Unggah</div>}
+            </div>
+
+            <div onClick={() => setIsConfigQRIS(false)}
+
+              style={{
+                ...styles.qrisConfigButton,
+                width: '100%',
+                marginLeft: "0",
+              }}
+            >Terapkan</div>
+          </>
+          :
+          <>
+            <p style={styles.description}>
+              Aktifkan fitur agar pelanggan dapat menggunakan opsi pembayaran QRIS, namun kasir anda perlu memeriksa rekening untuk memastikan pembayaran.
+            </p>
+            <div style={{ display: 'flex' }}>
+              <Switch
+                onChange={(checked) => setIsQRISavailable(checked ? 1 : 0)}
+                checked={isQRISavailable === 1} // Convert to boolean
+                offColor="#888"
+                onColor="#4CAF50"
+                uncheckedIcon={false}
+                checkedIcon={false}
+                height={25}
+                width={50}
+              />
+              <div
+                onClick={() => setIsConfigQRIS(true)}
+                style={{
+                  ...styles.qrisConfigButton,
+                  backgroundColor: isQRISavailable == 1 ? styles.qrisConfigButton.backgroundColor : 'gray',
+                }}
+              >
+                Konfigurasi QRIS
+              </div>
+
+            </div>
+          </>
+        }
      </div>
      <div style={styles.switchContainer}>
+        <p style={styles.uploadMessage}>
+          Open bill
+        </p>
+        <p style={styles.description}>
+          Aktifkan fitur agar pelanggan dapat menambahkan pesanan selama sesi berlangsung tanpa perlu melakukan transaksi baru dan hanya membayar di akhir.
+        </p>
+        <Switch
+          onChange={(checked) => setIsOpenBillAvailable(checked ? 1 : 0)}
+          checked={isOpenBillAvailable === 1} // Convert to boolean
+          offColor="#888"
+          onColor="#4CAF50"
+          uncheckedIcon={false}
+          checkedIcon={false}
+          height={25}
+          width={50}
+        />
+      </div>
+
+      <div style={styles.switchContainer}>
+        <p style={styles.uploadMessage}>
+          Pengecekan ganda
+        </p>
        <p style={styles.description}>
          Nyalakan agar kasir memeriksa kembali ketersediaan produk sebelum pelanggan membayar.
        </p>
        <Switch
-          onChange={handleChange}
+          onChange={(checked) => setIsNeedConfirmationState(checked ? 1 : 0)}
          checked={isNeedConfirmationState === 1} // Convert to boolean
          offColor="#888"
          onColor="#4CAF50"
@@ -169,6 +238,11 @@ const SetPaymentQr = ({ shopId,
 // Styles
 const styles = {
  container: {
+    position: 'relative',
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    maxHeight: '80vh',
+    width: '100%',
    backgroundColor: "white",
    padding: "20px",
    borderRadius: "8px",
@@ -188,14 +262,24 @@ const styles = {
    backgroundSize: "contain",
    overflow: "hidden",
    margin: "0 auto", // Center the QR code container
+    marginTop: '10px'
  },
  uploadMessage: {
    fontWeight: 600,
    textAlign: "left",
  },
+  qrisConfigButton: {
+    borderRadius: '15px',
+    backgroundColor: '#28a745',
+    width: '144px',
+    textAlign: 'center',
+    color: 'white',
+    lineHeight: '24px',
+    marginLeft: '14px',
+  },
  uploadButton: {
    paddingRight: '10px',
-    backgroundColor: 'green',
+    backgroundColor: '#28a745',
    borderRadius: '30px',
    color: 'white',
    fontWeight: 700,
--- a/src/components/TablesPage.js
+++ b/src/components/TablesPage.js
@@ -87,16 +87,15 @@ const SetPaymentQr = ({ shop }) => {
      fontsize,
      fontcolor,
      fontPosition: initialFontPos,
-      cafeIdentifyName: shop.cafeIdentifyName != cafeIdentifyNameUpdate ? cafeIdentifyNameUpdate : null
+      cafeIdentifyName: shop.cafeIdentifyName != cafeIdentifyNameUpdate ? cafeIdentifyNameUpdate : null,
+      name: shop.name != inputValue ? inputValue : null
    };

    // Call saveCafeDetails function with the updated details object
    saveCafeDetails(shop.cafeId, details)
      .then((response) => {
        console.log("Cafe details saved:", response);
-        if (shop.cafeIdentifyName != cafeIdentifyNameUpdate) {
          window.location.href = `/${cafeIdentifyNameUpdate}?modal=edit_tables`;
-        }
      })
      .catch((error) => {
        console.error("Error saving cafe details:", error);
@@ -748,37 +747,25 @@ const SetPaymentQr = ({ shop }) => {
          </>
        )}

-<div style={{ height: 110, position: 'relative', scale: '80%', transformOrigin: 'left', left: 0, width: '125%', border: '1px solid black', borderRadius: '8px' }}>
-      <div style={{ padding: '16px 12px', height: '84px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-        <div style={{ height: '27.4px', fontSize: '17.6px', fontFamily: 'monospace', fontWeight: '500', color: 'rgba(88, 55, 50, 1)' }}>
-          <input
-            ref={inputRef}
-            style={{
-              fontSize: '17.6px',
-              fontFamily: 'monospace',  // Monospace font ensures each character has the same width
-              fontWeight: '500',
-              minWidth: `${minWidth}px`, // Minimum width for the input
-            }}
-            value={inputValue}
-            onChange={handleInputNameChange}
-          />
-          &nbsp;menu
-        </div>
-        <img style={{ width: '48px', height: '48px' }} src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s' />
-      </div>
-    </div>
-
-      <>
-        <div style={styles.uploadMessage}>
-          <p>Nama kedai</p>
-        </div>
-        <div style={styles.resultMessage}>
-          <p>-----------------</p>
-          <div
-            onClick={() => { setIsConfigCafeIdentityName(true); cafeIdentifyNameRef.current && cafeIdentifyNameRef.current.focus(); }} style={styles.changeButton}>Ganti
+      <div style={{ height: 110, position: 'relative', scale: '80%', transformOrigin: 'left', left: 0, width: '125%', border: '1px solid black', borderRadius: '8px', marginBottom: '10px' }}>
+        <div style={{ padding: '16px 12px', height: '84px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <div style={{ height: '27.4px', fontSize: '17.6px', fontFamily: 'monospace', fontWeight: '500', color: 'rgba(88, 55, 50, 1)' }}>
+            <input
+              ref={inputRef}
+              style={{
+                fontSize: '17.6px',
+                fontFamily: 'monospace',  // Monospace font ensures each character has the same width
+                fontWeight: '500',
+                minWidth: `${minWidth}px`, // Minimum width for the input
+              }}
+              value={inputValue}
+              onChange={handleInputNameChange}
+            />
+            &nbsp;menu
          </div>
+          <img style={{ width: '48px', height: '48px' }} src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s' />
        </div>
-      </>
+      </div>
      <div
        id="qr-code-container"
        style={{
@@ -835,20 +822,20 @@ const SetPaymentQr = ({ shop }) => {
      {!isViewingQR ?
        <>
          <div style={styles.uploadMessage}>
-            <p>QR identifikasi</p>
+            <p>QR sticker kedai dan meja</p>
            <p>Background</p>
          </div>
          <div style={styles.resultMessage}>
-            <p onClick={() => { setIsConfig(!isConfig); setIsConfigQR(!isConfigQR); setIsConfigFont(false) }}> {isConfig ? '˅' : '˃'} Konfigurasi QR</p>
+            <p onClick={() => { setIsConfig(!isConfig); setIsConfigQR(!isConfigQR); setIsConfigFont(false) }}> {isConfig ? '˅' : '˃'} Konfigurasi</p>
            <div
              onClick={() => qrBackgroundInputRef.current.click()} style={styles.changeButton}>Ganti</div>
          </div>
          <div style={styles.switchContainer}>
            {isConfig &&
              <div style={{ marginLeft: '15px' }}>
-                {/* <p style={styles.description} onClick={() => { setIsConfigQR(!isConfigQR); setIsConfigFont(false) }}>
-              {isConfigQR ? '˅' : '˃'} Konfigurasi QR
-            </p> */}
+                <p style={styles.description} onClick={() => { setIsConfigQR(!isConfigQR); setIsConfigFont(false) }}>
+                  {isConfigQR ? '˅' : '˃'} QR
+                </p>
                {isConfigQR && <>
                  <div style={styles.sliderContainer}>
                    <label style={styles.label}>
@@ -908,9 +895,9 @@ const SetPaymentQr = ({ shop }) => {
                  </div>
                </>}

-                {/* <p style={styles.description} onClick={() => { setIsConfigFont(!isConfigFont); setIsConfigQR(false) }}>
-              {isConfigFont ? '˅' : '˃'} Konfigurasi nomor
-            </p> */}
+                <p style={styles.description} onClick={() => { setIsConfigFont(!isConfigFont); setIsConfigQR(false) }}>
+                  {isConfigFont ? '˅' : '˃'} Nomor meja
+                </p>
                {isConfigFont && (
                  <>
                    <div style={styles.sliderContainer}>
@@ -989,9 +976,9 @@ const SetPaymentQr = ({ shop }) => {

              </div>
            }
-            {/* <p style={styles.description} onClick={() => setIsViewTables(!isViewTables)}>
+            <p style={styles.description} onClick={() => setIsViewTables(!isViewTables)}>
          {isViewTables ? '˅' : '˃'} Daftar meja
-        </p> */}
+        </p>

            {isViewTables &&
              <div style={{ marginTop: '34px', marginLeft: '15px' }}>