ok

2025-02-17 07:23:32 +07:00
parent df0dbafe18
commit 05c5545cbb
9 changed files with 169 additions and 52 deletions
--- a/src/components/AccountUpdatePage.js
+++ b/src/components/AccountUpdatePage.js
@@ -6,9 +6,9 @@ const AccountUpdatePage = ({ user, showEmail, onSubmit }) => {
    const [formData, setFormData] = useState({
        username: user.username || '',
        email: user.email || '',
-        password: user.password === 'unsetunsetunset' ? '' : user.password || '',
+        password: '&#9679;&#9679;&#9679;&#9679;&#9679;',
    });
-
+    
    const [errorMessage, setErrorMessage] = useState('');
    const [successMessage, setSuccessMessage] = useState(''); // New state for success messages

@@ -58,7 +58,7 @@ const AccountUpdatePage = ({ user, showEmail, onSubmit }) => {

        <div className={styles.LoginForm}>
        <div className={`${styles.FormUsername} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : ''}`}>
-          <label htmlFor="username" className={styles.usernameLabel}>----------------------------------------------</label>
+          <label htmlFor="username" className={styles.usernameLabel}>--------------------------------------------</label>
          
          <input
            name="username"
@@ -85,7 +85,7 @@ const AccountUpdatePage = ({ user, showEmail, onSubmit }) => {
        <div className={`${styles.FormPassword} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : ''}`}>
          <span>
            <label onClick={() => setInputtingPassword(false)} htmlFor="password" className={styles.usernameLabel}> &lt;--- &lt;-- kembali </label>
-            <label htmlFor="password" className={styles.usernameLabel}> &nbsp; ------------------------- &nbsp; </label>
+            <label htmlFor="password" className={styles.usernameLabel}>-------------------------</label>
          </span>

          <input
--- a/src/components/ButtonWithReplica.css
+++ b/src/components/ButtonWithReplica.css
@@ -52,6 +52,7 @@
 }
 .bussinessName {
  position: absolute;
+  width: 60vw;
  top: 50%;
  left: 50%;
  color: rgba(0, 0, 0, 0);
@@ -80,7 +81,7 @@
 }
 .bussinessQR {
  position: absolute;
-  height: 480%;
+  height: 570%;
  width: 480%;
  top: 50%;
  left: 50%;
@@ -93,11 +94,84 @@
  position: absolute;
  top: -321%;
  transform: translate(-50%, -80%);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+

  transition: all 0.5s ease-in-out;
  z-index: 201; /* Behind the button */
 }

+.downloadQR{
+  font-size: 115%;
+  padding-top: 10px;
+  background-color: transparent;
+  color: transparent;
+  width: 21.7%;
+}
+
+.downloadQR.active{
+  background-color: #8f8f8f;
+  color: white;
+  transition: all 0.5s ease-in-out;
+}
+
+.trapezoid {
+  z-index: 201;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  color: rgba(0, 0, 0, 0);
+  transform: translate(-200%, -50%);
+  width: 0;
+  height: 80px;
+  border-top: 70px solid transparent;
+  border-left: 100px solid transparent;
+  border-bottom: 70px solid transparent;
+  transition: all 0.5s ease-in-out;
+}
+.trapezoid.active {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  color: rgba(0, 0, 0, 0);
+  transform: translate(-200%, -160%);
+  width: 0;
+  height: 80px;
+  border-top: 70px solid transparent;
+  border-left: 100px solid #EE2E3B;
+  border-bottom: 70px solid transparent;
+  transition: all 0.5s ease-in-out;
+}
+
+.rightTriangle {
+  z-index: 201;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  color: rgba(0, 0, 0, 0);
+  transform: translate(-4%, 120%);
+  width: 0;
+  height: 0;
+  border-left: 184px solid transparent;
+  border-right: 0px solid transparent;
+  border-bottom: 128px solid #ee2e3b;
+  transition: all 0.5s ease-in-out;
+}
+.rightTriangle.active {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  color: rgba(0, 0, 0, 0);
+  transform: translate(-4%, 10%);
+  width: 0;
+  height: 0;
+  border-left: 184px solid transparent;
+  border-right: 0px solid transparent;
+  border-bottom: 128px solid #ee2e3b;
+  transition: all 0.5s ease-in-out;
+}
 .price {
  position: absolute;
  top: 50%;
@@ -113,7 +187,7 @@
 .price.active {
  position: absolute;
  color: rgb(0, 0, 0);
-  transform: translate(-50%, -150%);
+  transform: translate(-50%, -140%);
  z-index: 201; /* Behind the button */
  font-size: 3vw;
  text-align: center;
--- a/src/components/ButtonWithReplica.js
+++ b/src/components/ButtonWithReplica.js
@@ -126,7 +126,22 @@ const ButtonWithReplica = ({
    console.log(qrisComponent.nmid); // Log the QR value
    Open();
  };
-
+  const downloadQR = () => {
+    const imageUrl = "https://dev.api.kedaimaster.com/uploads/1739542152564.jpg"; // Image URL
+  
+    // Create a new XMLHttpRequest to fetch the image as a Blob
+    fetch(imageUrl)
+      .then((response) => response.blob()) // Convert the response to a Blob
+      .then((blob) => {
+        const link = document.createElement("a");
+        link.href = URL.createObjectURL(blob); // Create a URL for the Blob
+        link.download = "QRCode.jpg"; // Set the download filename
+        link.click(); // Trigger the download
+      })
+      .catch((error) => {
+        console.error("Failed to download the image:", error);
+      });
+  }
  return (
    <div className="container">
      <button
@@ -138,13 +153,17 @@ const ButtonWithReplica = ({
      </button>
      <>
        <div className={`replica ${isActive ? "active" : ""}`}></div>
+        <div className={`bussinessQR ${isActive ? "active" : ""}`}>
        <QRCodeSVG
-          className={`bussinessQR ${isActive ? "active" : ""}`}
+          width={400}
+          height={400}
          style={{pointerEvents: 'none'}}
          bgColor={"transparent"}
          fgColor={fgColor}
          value={QRValue}
        />
+        <div onClick={downloadQR} className={`downloadQR ${isActive ? "active" : ""}`} >Download QRIS</div>
+        </div>
        <div className={`bussinessName ${isActive ? "active" : ""}`}>
          <h2>{qrisComponent.merchantName}</h2>
          {qrisComponent.nmid != "" && <h4>NMID : {qrisComponent.nmid}</h4>}
@@ -152,6 +171,8 @@ const ButtonWithReplica = ({
        <div className={`price ${isActive ? "active" : ""}`}>
          <h1>{price}</h1>
        </div>
+        <div className={`trapezoid ${isActive ? "active" : ""}`}></div>
+        <div className={`rightTriangle ${isActive ? "active" : ""}`}></div>
      </>
    </div>
  );
--- a/src/components/ItemConfig.js
+++ b/src/components/ItemConfig.js
@@ -14,7 +14,7 @@ const ItemConfig = ({
    handleCreateItem,
    handleUpdateItem
 }) => {
-    const [selectedImage, setSelectedImage] = useState(imageFile);
+    const [selectedImage, setSelectedImage] = useState();
    const [previewUrl, setPreviewUrl] = useState(imageUrl);
    const [itemName, setItemName] = useState(initialName);
    const [itemPrice, setItemPrice] = useState(initialPrice);
@@ -83,7 +83,7 @@ const ItemConfig = ({
        handleCreateItem(itemName, itemPrice, selectedImage, itemDescription, itemPromoPrice);
      };
      const handleUpdate = () => {
-        console.log(itemDescription)
+        console.log(itemName, itemPrice, selectedImage, itemDescription, itemPromoPrice)
        handleUpdateItem(itemName, itemPrice, selectedImage, itemDescription, itemPromoPrice);
      };

--- a/src/components/ItemLister.js
+++ b/src/components/ItemLister.js
@@ -224,7 +224,7 @@ const ItemLister = ({
    );
    setisEditItem(0);
  };
-  const onUpdateItem = (itemId, name, price, image, description, promoPrice) => {
+  const onUpdateItem = async (itemId, name, price, image, description, promoPrice) => {
    if (isEdit)
      setItemsToUpdate((prev) => [...prev, { itemId, name, price,promoPrice, image, description }]);
    else {
@@ -237,24 +237,44 @@ const ItemLister = ({
      // Create a copy of the current items array
      const updatedItems = [...items];
      const item = updatedItems[itemIndex];
-      console.log(items)
+      console.log(item)
+      console.log(image)
      // Toggle the availability locally
-      if(image){
-        const reader = new FileReader();
-        reader.onloadend = () => {
-          updatedItems[itemIndex].selectedImage = reader.result;
-          console.log(reader.result)
-        };
-        reader.readAsDataURL(image);
-
-  
+      const readImage = (image) => {
+        return new Promise((resolve, reject) => {
+          // Check if image is a valid File or Blob object
+          if (!(image instanceof Blob)) {
+            return;
+          }
+      
+          const reader = new FileReader();
+          reader.onloadend = () => resolve(reader.result);
+          reader.onerror = (error) => reject(error);
+          reader.readAsDataURL(image);  // read the image as a data URL
+        });
+      };
+      
+      
+      let newImage = null;
+      if (image) {
+        try {
+          newImage = await readImage(image);
+          console.log(newImage);
+        } catch (error) {
+          console.error("Error reading image:", error);
+        }
      }
+      
      updatedItems[itemIndex] = {
        itemId: item.itemId,
        name,
        price,
-        availability: item.availability
+        description: description,
+        availability: item.availability,
+        image: image ? newImage : item.image,
+        selectedImage: image ? newImage : null
      };
+      
      console.log(updatedItems)

      // Update the state with the local change
@@ -800,7 +820,7 @@ const ItemLister = ({
              </>
            )}
            {(isEdit && !isFirstStep || !isEdit) &&
-              <>
+              <div key={randomKey}>
                {isEdit && <div style={{ display: 'flex', justifyContent: 'flex-start' }}><div style={{ marginTop: '49px', marginRight: '10px', marginLeft: '10px' }} onClick={() => setIsFirstStep(true)}><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 512 512"><path d="M48,256c0,114.87,93.13,208,208,208s208-93.13,208-208S370.87,48,256,48,48,141.13,48,256Zm212.65-91.36a16,16,0,0,1,.09,22.63L208.42,240H342a16,16,0,0,1,0,32H208.42l52.32,52.73A16,16,0,1,1,238,347.27l-79.39-80a16,16,0,0,1,0-22.54l79.39-80A16,16,0,0,1,260.65,164.64Z" /></svg></div>
                  <h2 className={styles["item-list-title"]}>{items && items.length < 1 ? 'Buat item' : 'Daftar item'}</h2></div>}
                <div className={styles["item-list"]}>
@@ -835,7 +855,7 @@ const ItemLister = ({

                  {itemsToCreate.map((item) => {
                    return !forCart || (forCart && item.qty > 0) ? (
-                      <div key={randomKey}>
+                      <div>
                        {isEditItem == item.itemId && (
                          <ItemConfig
                            isBeingEdit={true}
@@ -937,23 +957,25 @@ const ItemLister = ({
                          //   batal
                          // </button>
                          <ItemConfig
-                            isBeingEdit={true}
-                            name={item.name}
-                            price={item.price}
-                            promoPrice={item.promoPrice}
-                            description={item.description}
-                            imageUrl={
-                              itemTypeId ? getImageUrl(item.image) : item.image
-                            }
-                            imageFile={item.selectedImage}
-                            cancelEdit={() => editItem(0)}
-                            handleCreateItem={onCreateItem}
-                            handleUpdateItem={(name, price, image, description, promoPrice) => {
-                              console.log(description)
-                              onUpdateItem(item.itemId, name, price, image, description, promoPrice);
-                            }
-                            }
-                          />
+  isBeingEdit={true}
+  name={item.name}
+  price={item.price}
+  promoPrice={item.promoPrice}
+  description={item.description}
+  imageUrl={itemTypeId ? getImageUrl(item.image) : item.image}
+  imageFile={item.selectedImage}
+  cancelEdit={() => editItem(0)}
+  handleCreateItem={onCreateItem}
+  handleUpdateItem={async (name, price, image, description, promoPrice) => {
+    try {
+      console.log(description);
+      await onUpdateItem(item.itemId, name, price, image, description, promoPrice);
+    } catch (error) {
+      console.error("Error updating item:", error);
+    }
+  }}
+/>
+
                        )}
                        <div className={styles["itemWrapper"]}>
                          {isEditMode && isEditItem != item.itemId && (
@@ -1047,7 +1069,7 @@ const ItemLister = ({
                    )}

                </div>
-              </>
+              </div>
            }
            {isEdit && (
              <div className={styles.PaymentOption}>