Spaces:

Adityadn
/

FINAL-PROJECT-ACQ20RC

Running

App Files Files Community

Adityadn commited on Mar 21

Commit

b28567d

verified ·

1 Parent(s): 100ce4f

Upload 7 files

Browse files

Files changed (4) hide show

javascript/cart.js +184 -184
javascript/main.js +503 -504
javascript/profile.js +259 -242
javascript/search.js +18 -9

javascript/cart.js CHANGED Viewed

@@ -1,187 +1,187 @@
-async function updateCartIcon() {
-    const cart = await getCarts();
-    const count = cart.length;
-    const cartIcon = document.getElementById("cart-icon");
-    if (cartIcon) {
-        cartIcon.innerHTML = `
-    <i class="bi bi-cart"></i>
-    <span class="m-1">
-      <span class="nd-720">Keranjang</span>
-      <span class="nd-512">(${count})</span>
-    </span>`;
-    }
-}
-document.addEventListener("DOMContentLoaded", async function () {
-    setInterval(await updateCartIcon, 100);
-});
-async function promptQuantityAndAdd(productId) {
-    checkUID("addToCart");
-    let [qtyStr, isCancel] = await prompt(
-        "Masukkan jumlah produk yang ingin ditambahkan ke keranjang:",
-        "number"
-    );
-    console.log(qtyStr, isCancel);
-    if (isCancel) {
-        return;
-    }
-    if (!qtyStr) {
-        alert("Jumlah tidak boleh kosong.", false);
-        return;
-    }
-    let qty = parseInt(qtyStr);
-    if (isNaN(qty) || qty <= 0) {
-        alert("Masukkan jumlah produk yang valid.", false);
-        return;
-    }
-    await addToCart(productId, qty);
-}
-async function addToCart(productId, quantity = 1) {
-    checkUID("addToCart");
-    console.log(productId, quantity);
-    const cart = await getCarts();
-    let userData = await getUserData();
-    for (let i = 0; i < quantity; i++) {
-        cart.push(productId);
-    }
-    userData.cart = cart;
-    localStorage.setItem("cart", JSON.stringify(cart));
-    await updateUserDataToGitHub(userData);
-    await updateCartIcon();
-    alert(
-        `Produk telah ditambahkan ke keranjang sebanyak ${quantity} item.`,
-        false
-    );
-}
-function addToCartFromProduct(productId) {
-    checkUID("addToCart");
-    const qtyInput = document.getElementById("quantity");
-    let quantity = parseInt(qtyInput.value);
-    if (isNaN(quantity) || quantity <= 0) {
-        alert("Masukkan jumlah produk yang valid.", false);
-        return;
-    }
-    addToCart(productId, quantity);
-}
-async function loadCart() {
-    do {
-        const cart = await getCarts();
-        const params = new URLSearchParams(window.location.search);
         const message = params.get("message") || "";
-        if (message) alert(message, false);
-        let cartCount = {};
-        cart.forEach((id) => {
-            cartCount[id] = (cartCount[id] || 0) + 1;
-        });
-        const cartItemsContainer = document.getElementById("cart-items");
-        cartItemsContainer.innerHTML = "";
-        let total = 0;
-        if (Object.keys(cartCount).length === 0) {
-            cartItemsContainer.innerHTML = "<p>Keranjang kosong.</p>";
-        } else {
-            cartItemsContainer.innerHTML = `<span class="text-center text-muted">${message}</span>`;
-            let index = 1;
-            for (let id in cartCount) {
-                const product = products.find((p) => p.id === parseInt(id));
-                if (product) {
-                    const qty = cartCount[id];
-                    const subtotal = product.price * qty;
-                    total += subtotal;
-                    cartItemsContainer.innerHTML += `
-          <div class="d-flex justify-content-between align-items-center border-bottom pb-2 mb-2">
-            <div>
-              <h5>${product.name}</h5>
-              <p class="mb-0">
-                ${formatRupiah(product.price)} x
-                <input class="form-control form-control-lg" type="number" value="${qty}" min="1" style="width:60px;"
-                  onchange="updateQuantity(${product.id}, this.value)">
-              </p>
-            </div>
-            <button class="btn btn-danger btn-lg" onclick="removeFromCart(${
-                product.id
-            })">Hapus</button>
-          </div>`;
-                    index++;
-                }
-            }
-        }
-        const cartSummary = document.getElementById("cart-summary");
-        cartSummary.innerHTML = `<h4>Total: ${formatRupiah(total)}</h4>`;
-        if (cartItemsContainer.innerHTML.trim() == "") {
-            cartItemsContainer.innerHTML = "";
-            alert("Jika daftar keranjang tidak muncul, silahkan muat ulang halaman ini", false)
-        }
-        await new Promise((resolve) => setTimeout(resolve, 1000));
-    } while (cartItemsContainer.innerHTML.trim() == "");
-}
-async function updateQuantity(productId, newQty) {
-    newQty = parseInt(newQty);
-    if (isNaN(newQty) || newQty <= 0) {
-        alert("Masukkan jumlah produk yang valid.", false);
-        return;
-    }
-    const cart = await getCarts();
-    const newCart = cart.filter((id) => id !== productId);
-    // Tambahkan produk sesuai newQty
-    for (let i = 0; i < newQty; i++) {
-        newCart.push(productId);
-    }
-    localStorage.setItem("cart", JSON.stringify(newCart));
-    let userData = await getUserData();
-    userData.cart = newCart;
-    await updateUserDataToGitHub(userData);
-    await loadCart();
-    await updateCartIcon();
-}
-async function removeFromCart(productId) {
-    const cart = await getCarts();
-    const index = cart.indexOf(productId);
-    if (index !== -1) {
-        cart.splice(index, 1);
-        localStorage.setItem("cart", JSON.stringify(cart));
-        let userData = await getUserData();
-        userData.cart = cart;
-        await updateUserDataToGitHub(userData);
-        await loadCart();
-        await updateCartIcon();
-    }
-}
-document.addEventListener("DOMContentLoaded", function () {
-    AOS.init();
-    if (document.getElementById("cart-items")) {
-        loadCart();
-    }
 });

+async function updateCartIcon() {
+    const cart = await getCarts();
+    const count = cart.length;
+    const cartIcon = document.getElementById("cart-icon");
+    if (cartIcon) {
+        cartIcon.innerHTML = `
+    <i class="bi bi-cart"></i>
+    <span class="m-1">
+      <span class="nd-720">Keranjang</span>
+      <span class="nd-512">(${count})</span>
+    </span>`;
+    }
+}
+document.addEventListener("DOMContentLoaded", async function () {
+    setInterval(await updateCartIcon, 10000);
+});
+async function promptQuantityAndAdd(productId) {
+    checkUID("addToCart");
+    let [qtyStr, isCancel] = await prompt(
+        "Masukkan jumlah produk yang ingin ditambahkan ke keranjang:",
+        "number"
+    );
+    console.log(qtyStr, isCancel);
+    if (isCancel) {
+        return;
+    }
+    if (!qtyStr) {
+        alert("Jumlah tidak boleh kosong.", false);
+        return;
+    }
+    let qty = parseInt(qtyStr);
+    if (isNaN(qty) || qty <= 0) {
+        alert("Masukkan jumlah produk yang valid.", false);
+        return;
+    }
+    await addToCart(productId, qty);
+}
+async function addToCart(productId, quantity = 1) {
+    checkUID("addToCart");
+    console.log(productId, quantity);
+    const cart = await getCarts();
+    let userData = await getUserData();
+    for (let i = 0; i < quantity; i++) {
+        cart.push(productId);
+    }
+    userData.cart = cart;
+    localStorage.setItem("cart", JSON.stringify(cart));
+    await updateUserDataToGitHub(userData);
+    await updateCartIcon();
+    alert(
+        `Produk telah ditambahkan ke keranjang sebanyak ${quantity} item.`,
+        false
+    );
+}
+function addToCartFromProduct(productId) {
+    checkUID("addToCart");
+    const qtyInput = document.getElementById("quantity");
+    let quantity = parseInt(qtyInput.value);
+    if (isNaN(quantity) || quantity <= 0) {
+        alert("Masukkan jumlah produk yang valid.", false);
+        return;
+    }
+    addToCart(productId, quantity);
+}
+async function loadCart() {
+    do {
+        const cart = await getCarts();
+        const params = new URLSearchParams(window.location.search);
         const message = params.get("message") || "";
+        if (message) alert(message, false);
+        let cartCount = {};
+        cart.forEach((id) => {
+            cartCount[id] = (cartCount[id] || 0) + 1;
+        });
+        const cartItemsContainer = document.getElementById("cart-items");
+        cartItemsContainer.innerHTML = "";
+        let total = 0;
+        if (Object.keys(cartCount).length === 0) {
+            cartItemsContainer.innerHTML = "<p>Keranjang kosong.</p>";
+        } else {
+            cartItemsContainer.innerHTML = `<span class="text-center text-muted">${message}</span>`;
+            let index = 1;
+            for (let id in cartCount) {
+                const product = products.find((p) => p.id === parseInt(id));
+                if (product) {
+                    const qty = cartCount[id];
+                    const subtotal = product.price * qty;
+                    total += subtotal;
+                    cartItemsContainer.innerHTML += `
+          <div class="d-flex justify-content-between align-items-center border-bottom pb-2 mb-2">
+            <div>
+              <h5>${product.name}</h5>
+              <p class="mb-0">
+                ${formatRupiah(product.price)} x
+                <input class="form-control form-control-lg" type="number" value="${qty}" min="1" style="width:60px;"
+                  onchange="updateQuantity(${product.id}, this.value)">
+              </p>
+            </div>
+            <button class="btn btn-danger btn-lg" onclick="removeFromCart(${
+                product.id
+            })">Hapus</button>
+          </div>`;
+                    index++;
+                }
+            }
+        }
+        const cartSummary = document.getElementById("cart-summary");
+        cartSummary.innerHTML = `<h4>Total: ${formatRupiah(total)}</h4>`;
+        if (cartItemsContainer.innerHTML.trim() == "") {
+            cartItemsContainer.innerHTML = "";
+            alert("Jika daftar keranjang tidak muncul, silahkan muat ulang halaman ini", false)
+        }
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+    } while (cartItemsContainer.innerHTML.trim() == "");
+}
+async function updateQuantity(productId, newQty) {
+    newQty = parseInt(newQty);
+    if (isNaN(newQty) || newQty <= 0) {
+        alert("Masukkan jumlah produk yang valid.", false);
+        return;
+    }
+    const cart = await getCarts();
+    const newCart = cart.filter((id) => id !== productId);
+    for (let i = 0; i < newQty; i++) {
+        newCart.push(productId);
+    }
+    localStorage.setItem("cart", JSON.stringify(newCart));
+    let userData = await getUserData();
+    userData.cart = newCart;
+    await updateUserDataToGitHub(userData);
+    await loadCart();
+    await updateCartIcon();
+}
+async function removeFromCart(productId) {
+    const cart = await getCarts();
+    const index = cart.indexOf(productId);
+    if (index !== -1) {
+        cart.splice(index, 1);
+        localStorage.setItem("cart", JSON.stringify(cart));
+        let userData = await getUserData();
+        userData.cart = cart;
+        await updateUserDataToGitHub(userData);
+        await loadCart();
+        await updateCartIcon();
+    }
+}
+document.addEventListener("DOMContentLoaded", function () {
+    AOS.init();
+    if (document.getElementById("cart-items")) {
+        loadCart();
+    }
 });

javascript/main.js CHANGED Viewed

@@ -1,505 +1,504 @@
-function checkUID(m = "") {
-    const userData = JSON.parse(localStorage.getItem("userData")) || {};
-    const urlNow = window.location.href;
-    const isNotValidUID = userData.length > 0 && !userData.uid;
-    const message =
-        m === "addToCart"
-            ? "Silakan masuk terlebih dahulu untuk menambahkan produk ke keranjang."
-            : isNotValidUID
-            ? "Sesi Anda telah habis. Silakan masuk kembali untuk melanjutkan."
-            : m === "jelajah"
-            ? "Anda telah menjelajah produk selama 5 detik. Silakan masuk terlebih dahulu untuk mendapatkan pengalaman yang lebih baik."
-            : null;
-    if (
-        (Object.keys(userData).length === 0 || isNotValidUID) &&
-        !urlNow.includes("profile")
-    ) {
-        localStorage.clear();
-        window.location.href =
-            `profile.html?redirect=${urlNow}` +
-            (message ? `&message=${message}` : "");
-    }
-}
-setTimeout(() => {
-    checkUID("jelajah");
-}, 5000);
-function formatRupiah(number) {
-    return "Rp " + number.toLocaleString("id-ID");
-}
-async function loadProducts() {
-    const products = await fetchProductsData();
-    const productList = document.getElementById("product-list");
-    if (!productList) return;
-    productList.innerHTML = "";
-    products.forEach((product) => {
-        const col = document.createElement("div");
-        col.className = "col-lg-3 col-md-4 col-sm-6";
-        const card = document.createElement("div");
-        card.className = "card h-100";
-        let thumbnail = "assets/";
-        if (product.files && product.files.length > 0) {
-            thumbnail += product.files[0];
-        }
-        let thumbHTML = "";
-        if (thumbnail.match(/\.(jpg|jpeg|png|gif)$/i)) {
-            thumbHTML = `<img src="${thumbnail}" class="card-img-top" alt="${product.name}">`;
-        } else {
-            thumbHTML = `<img src="img/placeholder.jpg" class="card-img-top" alt="${product.name}">`;
-        }
-        const cardBody = document.createElement("div");
-        cardBody.className = "card-body d-flex flex-column";
-        const title = document.createElement("h5");
-        title.className = "card-title";
-        title.innerText = product.name;
-        const desc = document.createElement("p");
-        desc.className = "card-text";
-        desc.innerText = product.description;
-        const price = document.createElement("p");
-        price.className = "card-text fw-bold";
-        price.innerText = formatRupiah(product.price);
-        const detailLink = document.createElement("a");
-        detailLink.href = "product.html?id=" + product.id;
-        detailLink.className = "btn btn-primary btn-lg mt-auto";
-        detailLink.innerText = "Lihat Detail";
-        const cartBtn = document.createElement("button");
-        cartBtn.className = "btn btn-success btn-lg mt-2";
-        cartBtn.innerText = "Tambah Keranjang";
-        cartBtn.onclick = async function () {
-            await promptQuantityAndAdd(product.id);
-        };
-        card.innerHTML = thumbHTML;
-        cardBody.appendChild(title);
-        cardBody.appendChild(desc);
-        cardBody.appendChild(price);
-        cardBody.appendChild(detailLink);
-        cardBody.appendChild(cartBtn);
-        card.appendChild(cardBody);
-        col.appendChild(card);
-        productList.appendChild(col);
-    });
-}
-async function loadProductDetail() {
-    const params = new URLSearchParams(window.location.search);
-    const productId = parseInt(params.get("id"));
-    const container = document.getElementById("product-detail");
-    if (!container) return;
-    if (!productId) {
-        container.innerText = "Produk tidak ditemukan.";
-        return;
-    }
-    const products = await fetchProductsData();
-    const product = products.find((p) => p.id === productId);
-    if (!product) {
-        container.innerText = "Produk tidak ditemukan.";
-        return;
-    }
-    let carouselHTML = "";
-    if (product.files && product.files.length > 0) {
-        carouselHTML += `<div id="carouselProduct" class="carousel slide" data-bs-ride="carousel">`;
-        carouselHTML += `<div class="carousel-indicators">`;
-        product.files.forEach((file, index) => {
-            carouselHTML += `<button type="button" data-bs-target="#carouselProduct" data-bs-slide-to="${index}" ${
-                index === 0 ? 'class="active" aria-current="true"' : ""
-            } aria-label="Slide ${index + 1}"></button>`;
-        });
-        carouselHTML += `</div>`;
-        carouselHTML += `<div class="carousel-inner">`;
-        product.files.forEach((file, index) => {
-            file = "assets/" + file;
-            carouselHTML += `<div class="carousel-item ${
-                index === 0 ? "active" : ""
-            }">`;
-            if (file.match(/\.(jpg|jpeg|png|gif)$/i)) {
-                carouselHTML += `<img src="${file}" class="d-block w-100" alt="${product.name}">`;
-            } else if (file.match(/\.(mp4|webm)$/i)) {
-                carouselHTML += `<video class="d-block w-100" controls>
-							<source src="${file}" type="video/mp4">
-							Browser Anda tidak mendukung video.
-						  </video>`;
-            }
-            carouselHTML += `</div>`;
-        });
-        carouselHTML += `</div>`;
-        carouselHTML += `<button class="carousel-control-prev" type="button" data-bs-target="#carouselProduct" data-bs-slide="prev">
-						  <span class="carousel-control-prev-icon bg-primary rounded-circle p-4" aria-hidden="true"></span>
-						  <span class="visually-hidden">Previous</span>
-						</button>
-						<button class="carousel-control-next" type="button" data-bs-target="#carouselProduct" data-bs-slide="next">
-						  <span class="carousel-control-next-icon bg-primary rounded-circle p-4" aria-hidden="true"></span>
-						  <span class="visually-hidden">Next</span>
-						</button>`;
-        carouselHTML += `</div>`;
-    }
-    container.innerHTML = `
-	  <div class="row">
-		<div class="col-md-6">
-		  ${carouselHTML}
-		</div>
-		<div class="col-md-6">
-		  <h2>${product.name}</h2>
-		  <p>${product.description}</p>
-		  <h4 class="fw-bold">${formatRupiah(product.price)}</h4>
-		  <div class="mb-2">
-			<label for="quantity" class="form-label">Jumlah:</label>
-			<input type="number" id="quantity" class="form-control form-control-lg" value="1" min="1" style="max-width:150px;">
-		  </div>
-		  <button class="btn btn-success btn-lg" onclick="addToCartFromProduct(${
-              product.id
-          })">
-			Tambahkan ke Keranjang
-		  </button>
-		</div>
-	  </div>
-	`;
-    AOS.refresh();
-}
-function formatTransactionDate(key) {
-    const parts = key.split("_");
-    if (parts.length !== 7) return key;
-    const [year, month, day, hour, minute, second, ms] = parts;
-    const dateObj = new Date(
-        year,
-        parseInt(month) - 1,
-        day,
-        hour,
-        minute,
-        second,
-        ms
-    );
-    const formattedDate = dateObj.toLocaleDateString("id-ID", {
-        day: "2-digit",
-        month: "long",
-        year: "numeric",
-    });
-    const formattedTime = dateObj.toLocaleTimeString("id-ID", {
-        hour: "2-digit",
-        minute: "2-digit",
-        hour12: false,
-    });
-    return [formattedDate, formattedTime];
-}
-async function loadTransactions() {
-    const userData = await getUserData();
-    const transactions = userData.transactions || {};
-    if (!transactions || Object.keys(transactions).length === 0) {
-        document.getElementById("transaction-details").innerHTML =
-            "<p>Anda belum melakukan transaksi apapun. Silahkan beli produk terlebih dahulu.</p>";
-        alert("Anda belum melakukan transaksi apapun. Silahkan beli produk terlebih dahulu.", false)
-        return;
-    }
-    const transactionList = document.getElementById("transaction-list");
-    if (!transactionList) return;
-    transactionList.innerHTML = "";
-    Object.entries(transactions)
-        .sort((a, b) => {
-            const parseDateFromKey = (key) => {
-                const [year, month, day, hour, minute, second, ms] =
-                    key.split("_");
-                return new Date(year, month - 1, day, hour, minute, second, ms);
-            };
-            return parseDateFromKey(b[0]) - parseDateFromKey(a[0]);
-        })
-        .forEach(([transactionKey, transaction]) => {
-            let total = 0;
-            transaction.products.forEach((product) => {
-                total += product.price * product.total;
-            });
-            let paymentIcon = "";
-            switch (transaction.payment_method) {
-                case "bank":
-                    paymentIcon = "bi-building";
-                    break;
-                case "qr":
-                    paymentIcon = "bi-qr-code";
-                    break;
-                case "card":
-                    paymentIcon = "bi-credit-card";
-                    break;
-                default:
-                    paymentIcon = "bi-currency-dollar";
-            }
-            const col = document.createElement("div");
-            col.className =
-                "transactions-body col-lg-4 col-md-6 col-sm-12 mt-4";
-            const card = document.createElement("div");
-            card.className = "card h-100";
-            const cardBody = document.createElement("div");
-            cardBody.className = "card-body d-flex flex-column";
-            cardBody.style.position = "relative";
-            const td = formatTransactionDate(transactionKey);
-            cardBody.innerHTML = `
-		  <div class="payment-icon-bg">
-			<i class="bi ${paymentIcon}" style="font-size: 2.5rem;"></i>
-			<span class="m-2">Metode: ${
-                transaction.payment_method ? transaction.payment_method : "N/A"
-            }</span>
-		  </div>
-		  <div class="content">
-			<div class="d-flex justify-content-between align-items-center">
-			  <div class="transaction-total fw-bold">
-				Total: ${formatRupiah(total)}
-			  </div>
-			</div>
-			<div class="d-flex justify-content-between align-items-center mt-auto">
-			  <div class="transaction-date">
-				Tanggal: ${td[0]} <br> Waktu: ${td[1]}
-			  </div>
-			</div>
-		  </div>
-		`;
-            card.appendChild(cardBody);
-            col.appendChild(card);
-            transactionList.appendChild(col);
-            col.addEventListener(
-                "click",
-                () =>
-                    (window.location.href = `transaction.html?date=${transactionKey}`)
-            );
-        });
-}
-let transactionKey;
-async function updateActionButtonsPosition() {
-    const wrapper = document.querySelector(".receipt-wrapper");
-    const actionButtons = document.querySelector(".action-buttons");
-    if (!wrapper || !actionButtons) {
-        console.error("Element tidak ditemukan!");
-        return;
-    }
-    const receiptHeight = wrapper.getBoundingClientRect().height + 128;
-    actionButtons.setAttribute("style", `top: ${receiptHeight}px !important`);
-}
-async function loadTransactionDetail() {
-    const params = new URLSearchParams(window.location.search);
-    const transactionKey = params.get("date");
-    const detailsContainer = document.getElementById("transaction-details");
-    const mainElement = document.querySelector("main");
-    if (!transactionKey) {
-        detailsContainer.innerHTML = "<p>Transaksi tidak ditemukan.</p>";
-        return;
-    }
-    const userData = await getUserData();
-    if (!userData.transactions || !userData.transactions[transactionKey]) {
-        mainElement.innerHTML = "<p>Transaksi tidak ditemukan.</p>";
-        return;
-    }
-    const transaction = userData.transactions[transactionKey];
-    const td = formatTransactionDate(transactionKey);
-    let total = 0;
-    transaction.products.forEach((prod) => {
-        total += prod.price * prod.total;
-    });
-    // Buat HTML struk
-    let html = `
-    <div class="receipt-header">
-      <h2>TonS E-Commerce</h2>
-      <hr>
-      <p>Sidoarjo</p>
-      <p>Telp: 0896-6804-1554</p>
-      <p>Tanggal: ${td[0]} ${td[1]}</p>
-    </div>
-    <table class="receipt-table">
-      <thead>
-        <tr>
-          <th>No</th>
-          <th>Produk</th>
-          <th>Harga</th>
-          <th>Qty</th>
-          <th>Subtotal</th>
-        </tr>
-      </thead>
-      <tbody>
-  `;
-    transaction.products.forEach((prod, index) => {
-        const qty = prod.total;
-        const subtotal = prod.price * qty;
-        html += `
-      <tr>
-        <td>${index + 1}</td>
-        <td>${prod.name}</td>
-        <td>${formatRupiah(prod.price)}</td>
-        <td>${qty}</td>
-        <td>${formatRupiah(subtotal)}</td>
-      </tr>
-    `;
-    });
-    html += `
-      <tr class="total-row">
-        <td colspan="4" class="text-end"><strong>Total</strong></td>
-        <td><strong>${formatRupiah(total)}</strong></td>
-      </tr>
-      </tbody>
-    </table>
-    <div class="receipt-footer">
-      <p>Terima kasih telah berbelanja di TonS</p>
-      <p>Harap simpan struk ini sebagai bukti pembelian</p>
-    </div>
-  `;
-    detailsContainer.innerHTML = html;
-    const wrapper = document.createElement("div");
-    wrapper.className = "receipt-wrapper";
-    wrapper.innerHTML = detailsContainer.innerHTML;
-    detailsContainer.innerHTML = "";
-    detailsContainer.appendChild(wrapper);
-    await updateActionButtonsPosition();
-    window.addEventListener("resize", async () => {
-        requestAnimationFrame(updateActionButtonsPosition);
-    });
-}
-document.addEventListener("DOMContentLoaded", async function () {
-    AOS.init();
-    if (document.getElementById("product-list")) {
-        loadProducts();
-    }
-    if (document.getElementById("product-detail")) {
-        loadProductDetail();
-    }
-    if (document.getElementById("transaction-details")) {
-        await loadTransactionDetail();
-        await updateActionButtonsPosition();
-        window.addEventListener("resize", async () => {
-            requestAnimationFrame(updateActionButtonsPosition);
-        });
-        document
-            .getElementById("download-pdf")
-            .addEventListener("click", async () => {
-                const mainElement = document.getElementById(
-                    "transaction-details"
-                );
-                const receiptWrapperElement =
-                    document.querySelector(".receipt-wrapper");
-                const widthElement =
-                    receiptWrapperElement.offsetWidth -
-                    receiptWrapperElement.offsetLeft;
-                const heightElement =
-                    receiptWrapperElement.offsetHeight -
-                    receiptWrapperElement.offsetTop;
-                const params = new URLSearchParams(window.location.search);
-                const transactionKey = params.get("date");
-                try {
-                    await html2pdf()
-                        .from(mainElement)
-                        .set({
-                            margin: 10,
-                            filename: `receipt_${transactionKey}.pdf`,
-                            image: { type: "png", quality: 3 },
-                            html2canvas: { scale: 3, useCORS: true },
-                            jsPDF: {
-                                unit: "px",
-                                format: [widthElement, heightElement],
-                                orientation: "portrait",
-                            },
-                        })
-                        .toPdf()
-                        .save();
-                } catch (error) {
-                    console.error("Error generating PDF:", error);
-                }
-            });
-        document
-            .getElementById("print-receipt")
-            .addEventListener("click", async () => {
-                const mainElement = document.getElementById(
-                    "transaction-details"
-                );
-                const lastMainElement = mainElement.innerHTML;
-                mainElement.innerHTML += `
-				<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
-				<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
-				<link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css" />
-				<script src="https://printjs-4de6.kxcdn.com/print.min.css"></script>
-				<link rel="stylesheet" href="stylesheet/styles.css">
-				<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" defer></script>
-				<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script>
-				<script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.13/html-to-image.js"></script>
-				<script src="https://unpkg.com/aos@2.3.1/dist/aos.js" defer></script>
-				<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
-			`;
-                await printJS("transaction-details", "html");
-                mainElement.innerHTML = lastMainElement;
-            });
-    }
-    if (document.getElementById("transaction-list")) {
-        loadTransactions();
-    }
-    let backButton = document.getElementById("backButton");
-    if (backButton) {
-        backButton.addEventListener("click", (e) => {
-            e.preventDefault();
-            window.history.back();
-        });
-    }
 });

+function checkUID(m = "") {
+    const userData = JSON.parse(localStorage.getItem("userData")) || {};
+    const urlNow = window.location.href;
+    const isNotValidUID = userData.length > 0 && !userData.uid;
+    const message =
+        m === "addToCart"
+            ? "Silakan masuk terlebih dahulu untuk menambahkan produk ke keranjang."
+            : isNotValidUID
+            ? "Sesi Anda telah habis. Silakan masuk kembali untuk melanjutkan."
+            : m === "jelajah"
+            ? "Anda telah menjelajah selama 5 detik. Silakan masuk terlebih dahulu untuk mendapatkan pengalaman yang lebih baik."
+            : null;
+    if (
+        (Object.keys(userData).length === 0 || isNotValidUID) &&
+        !urlNow.includes("profile")
+    ) {
+        localStorage.clear();
+        window.location.href =
+            `profile.html?redirect=${urlNow}` +
+            (message ? `&message=${message}` : "");
+    }
+}
+setTimeout(() => {
+    checkUID("jelajah");
+}, 5000);
+function formatRupiah(number) {
+    return "Rp " + number.toLocaleString("id-ID");
+}
+async function loadProducts() {
+    const products = await fetchProductsData();
+    const productList = document.getElementById("product-list");
+    if (!productList) return;
+    productList.innerHTML = "";
+    products.forEach((product) => {
+        const col = document.createElement("div");
+        col.className = "col-lg-3 col-md-4 col-sm-6";
+        const card = document.createElement("div");
+        card.className = "card h-100";
+        let thumbnail = "assets/";
+        if (product.files && product.files.length > 0) {
+            thumbnail += product.files[0];
+        }
+        let thumbHTML = "";
+        if (thumbnail.match(/\.(jpg|jpeg|png|gif)$/i)) {
+            thumbHTML = `<img src="${thumbnail}" class="card-img-top" alt="${product.name}">`;
+        } else {
+            thumbHTML = `<img src="img/placeholder.jpg" class="card-img-top" alt="${product.name}">`;
+        }
+        const cardBody = document.createElement("div");
+        cardBody.className = "card-body d-flex flex-column";
+        const title = document.createElement("h5");
+        title.className = "card-title";
+        title.innerText = product.name;
+        const desc = document.createElement("p");
+        desc.className = "card-text";
+        desc.innerText = product.description;
+        const price = document.createElement("p");
+        price.className = "card-text fw-bold";
+        price.innerText = formatRupiah(product.price);
+        const detailLink = document.createElement("a");
+        detailLink.href = "product.html?id=" + product.id;
+        detailLink.className = "btn btn-primary btn-lg mt-auto";
+        detailLink.innerText = "Lihat Detail";
+        const cartBtn = document.createElement("button");
+        cartBtn.className = "btn btn-success btn-lg mt-2";
+        cartBtn.innerText = "Tambah Keranjang";
+        cartBtn.onclick = async function () {
+            await promptQuantityAndAdd(product.id);
+        };
+        card.innerHTML = thumbHTML;
+        cardBody.appendChild(title);
+        cardBody.appendChild(desc);
+        cardBody.appendChild(price);
+        cardBody.appendChild(detailLink);
+        cardBody.appendChild(cartBtn);
+        card.appendChild(cardBody);
+        col.appendChild(card);
+        productList.appendChild(col);
+    });
+}
+async function loadProductDetail() {
+    const params = new URLSearchParams(window.location.search);
+    const productId = parseInt(params.get("id"));
+    const container = document.getElementById("product-detail");
+    if (!container) return;
+    if (!productId) {
+        container.innerText = "Produk tidak ditemukan.";
+        return;
+    }
+    const products = await fetchProductsData();
+    const product = products.find((p) => p.id === productId);
+    if (!product) {
+        container.innerText = "Produk tidak ditemukan.";
+        return;
+    }
+    let carouselHTML = "";
+    if (product.files && product.files.length > 0) {
+        carouselHTML += `<div id="carouselProduct" class="carousel slide" data-bs-ride="carousel">`;
+        carouselHTML += `<div class="carousel-indicators">`;
+        product.files.forEach((file, index) => {
+            carouselHTML += `<button type="button" data-bs-target="#carouselProduct" data-bs-slide-to="${index}" ${
+                index === 0 ? 'class="active" aria-current="true"' : ""
+            } aria-label="Slide ${index + 1}"></button>`;
+        });
+        carouselHTML += `</div>`;
+        carouselHTML += `<div class="carousel-inner">`;
+        product.files.forEach((file, index) => {
+            file = "assets/" + file;
+            carouselHTML += `<div class="carousel-item ${
+                index === 0 ? "active" : ""
+            }">`;
+            if (file.match(/\.(jpg|jpeg|png|gif)$/i)) {
+                carouselHTML += `<img src="${file}" class="d-block w-100" alt="${product.name}">`;
+            } else if (file.match(/\.(mp4|webm)$/i)) {
+                carouselHTML += `<video class="d-block w-100" controls>
+							<source src="${file}" type="video/mp4">
+							Browser Anda tidak mendukung video.
+						  </video>`;
+            }
+            carouselHTML += `</div>`;
+        });
+        carouselHTML += `</div>`;
+        carouselHTML += `<button class="carousel-control-prev" type="button" data-bs-target="#carouselProduct" data-bs-slide="prev">
+						  <span class="carousel-control-prev-icon bg-primary rounded-circle p-4" aria-hidden="true"></span>
+						  <span class="visually-hidden">Previous</span>
+						</button>
+						<button class="carousel-control-next" type="button" data-bs-target="#carouselProduct" data-bs-slide="next">
+						  <span class="carousel-control-next-icon bg-primary rounded-circle p-4" aria-hidden="true"></span>
+						  <span class="visually-hidden">Next</span>
+						</button>`;
+        carouselHTML += `</div>`;
+    }
+    container.innerHTML = `
+	  <div class="row">
+		<div class="col-md-6">
+		  ${carouselHTML}
+		</div>
+		<div class="col-md-6">
+		  <h2>${product.name}</h2>
+		  <p>${product.description}</p>
+		  <h4 class="fw-bold">${formatRupiah(product.price)}</h4>
+		  <div class="mb-2">
+			<label for="quantity" class="form-label">Jumlah:</label>
+			<input type="number" id="quantity" class="form-control form-control-lg" value="1" min="1" style="max-width:150px;">
+		  </div>
+		  <button class="btn btn-success btn-lg" onclick="addToCartFromProduct(${
+              product.id
+          })">
+			Tambahkan ke Keranjang
+		  </button>
+		</div>
+	  </div>
+	`;
+    AOS.refresh();
+}
+function formatTransactionDate(key) {
+    const parts = key.split("_");
+    if (parts.length !== 7) return key;
+    const [year, month, day, hour, minute, second, ms] = parts;
+    const dateObj = new Date(
+        year,
+        parseInt(month) - 1,
+        day,
+        hour,
+        minute,
+        second,
+        ms
+    );
+    const formattedDate = dateObj.toLocaleDateString("id-ID", {
+        day: "2-digit",
+        month: "long",
+        year: "numeric",
+    });
+    const formattedTime = dateObj.toLocaleTimeString("id-ID", {
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false,
+    });
+    return [formattedDate, formattedTime];
+}
+async function loadTransactions() {
+    const userData = await getUserData() || {transactions: {}};
+    const transactions = userData.transactions || {};
+    if (Object.keys(transactions).length === 0) {
+        document.getElementById("transaction-list").innerHTML =
+            "<p>Anda belum melakukan transaksi apapun. Silahkan beli produk terlebih dahulu.</p>";
+        alert("Anda belum melakukan transaksi apapun. Silahkan beli produk terlebih dahulu.", false)
+        return;
+    }
+    const transactionList = document.getElementById("transaction-list");
+    if (!transactionList) return;
+    transactionList.innerHTML = "";
+    Object.entries(transactions)
+        .sort((a, b) => {
+            const parseDateFromKey = (key) => {
+                const [year, month, day, hour, minute, second, ms] =
+                    key.split("_");
+                return new Date(year, month - 1, day, hour, minute, second, ms);
+            };
+            return parseDateFromKey(b[0]) - parseDateFromKey(a[0]);
+        })
+        .forEach(([transactionKey, transaction]) => {
+            let total = 0;
+            transaction.products.forEach((product) => {
+                total += product.price * product.total;
+            });
+            let paymentIcon = "";
+            switch (transaction.payment_method) {
+                case "bank":
+                    paymentIcon = "bi-building";
+                    break;
+                case "qr":
+                    paymentIcon = "bi-qr-code";
+                    break;
+                case "card":
+                    paymentIcon = "bi-credit-card";
+                    break;
+                default:
+                    paymentIcon = "bi-currency-dollar";
+            }
+            const col = document.createElement("div");
+            col.className =
+                "transactions-body col-lg-4 col-md-6 col-sm-12 mt-4";
+            const card = document.createElement("div");
+            card.className = "card h-100";
+            const cardBody = document.createElement("div");
+            cardBody.className = "card-body d-flex flex-column";
+            cardBody.style.position = "relative";
+            const td = formatTransactionDate(transactionKey);
+            cardBody.innerHTML = `
+		  <div class="payment-icon-bg">
+			<i class="bi ${paymentIcon}" style="font-size: 2.5rem;"></i>
+			<span class="m-2">Metode: ${
+                transaction.payment_method ? transaction.payment_method : "N/A"
+            }</span>
+		  </div>
+		  <div class="content">
+			<div class="d-flex justify-content-between align-items-center">
+			  <div class="transaction-total fw-bold">
+				Total: ${formatRupiah(total)}
+			  </div>
+			</div>
+			<div class="d-flex justify-content-between align-items-center mt-auto">
+			  <div class="transaction-date">
+				Tanggal: ${td[0]} <br> Waktu: ${td[1]}
+			  </div>
+			</div>
+		  </div>
+		`;
+            card.appendChild(cardBody);
+            col.appendChild(card);
+            transactionList.appendChild(col);
+            col.addEventListener(
+                "click",
+                () =>
+                    (window.location.href = `transaction.html?date=${transactionKey}`)
+            );
+        });
+}
+let transactionKey;
+async function updateActionButtonsPosition() {
+    const wrapper = document.querySelector(".receipt-wrapper");
+    const actionButtons = document.querySelector(".action-buttons");
+    if (!wrapper || !actionButtons) {
+        console.error("Element tidak ditemukan!");
+        return;
+    }
+    const receiptHeight = wrapper.getBoundingClientRect().height + 128;
+    actionButtons.setAttribute("style", `top: ${receiptHeight}px !important`);
+}
+async function loadTransactionDetail() {
+    const params = new URLSearchParams(window.location.search);
+    const transactionKey = params.get("date");
+    const detailsContainer = document.getElementById("transaction-details");
+    const mainElement = document.querySelector("main");
+    if (!transactionKey) {
+        detailsContainer.innerHTML = "<p>Transaksi tidak ditemukan.</p>";
+        return;
+    }
+    const userData = await getUserData();
+    if (!userData.transactions || !userData.transactions[transactionKey]) {
+        mainElement.innerHTML = "<p>Transaksi tidak ditemukan.</p>";
+        return;
+    }
+    const transaction = userData.transactions[transactionKey];
+    const td = formatTransactionDate(transactionKey);
+    let total = 0;
+    transaction.products.forEach((prod) => {
+        total += prod.price * prod.total;
+    });
+    let html = `
+    <div class="receipt-header">
+      <h2>TonS E-Commerce</h2>
+      <hr>
+      <p>Sidoarjo</p>
+      <p>Telp: 0896-6804-1554</p>
+      <p>Tanggal: ${td[0]} ${td[1]}</p>
+    </div>
+    <table class="receipt-table">
+      <thead>
+        <tr>
+          <th>No</th>
+          <th>Produk</th>
+          <th>Harga</th>
+          <th>Qty</th>
+          <th>Subtotal</th>
+        </tr>
+      </thead>
+      <tbody>
+  `;
+    transaction.products.forEach((prod, index) => {
+        const qty = prod.total;
+        const subtotal = prod.price * qty;
+        html += `
+      <tr>
+        <td>${index + 1}</td>
+        <td>${prod.name}</td>
+        <td>${formatRupiah(prod.price)}</td>
+        <td>${qty}</td>
+        <td>${formatRupiah(subtotal)}</td>
+      </tr>
+    `;
+    });
+    html += `
+      <tr class="total-row">
+        <td colspan="4" class="text-end"><strong>Total</strong></td>
+        <td><strong>${formatRupiah(total)}</strong></td>
+      </tr>
+      </tbody>
+    </table>
+    <div class="receipt-footer">
+      <p>Terima kasih telah berbelanja di TonS</p>
+      <p>Harap simpan struk ini sebagai bukti pembelian</p>
+    </div>
+  `;
+    detailsContainer.innerHTML = html;
+    const wrapper = document.createElement("div");
+    wrapper.className = "receipt-wrapper";
+    wrapper.innerHTML = detailsContainer.innerHTML;
+    detailsContainer.innerHTML = "";
+    detailsContainer.appendChild(wrapper);
+    await updateActionButtonsPosition();
+    window.addEventListener("resize", async () => {
+        requestAnimationFrame(updateActionButtonsPosition);
+    });
+}
+document.addEventListener("DOMContentLoaded", async function () {
+    AOS.init();
+    if (document.getElementById("product-list")) {
+        loadProducts();
+    }
+    if (document.getElementById("product-detail")) {
+        loadProductDetail();
+    }
+    if (document.getElementById("transaction-details")) {
+        await loadTransactionDetail();
+        await updateActionButtonsPosition();
+        window.addEventListener("resize", async () => {
+            requestAnimationFrame(updateActionButtonsPosition);
+        });
+        document
+            .getElementById("download-pdf")
+            .addEventListener("click", async () => {
+                const mainElement = document.getElementById(
+                    "transaction-details"
+                );
+                const receiptWrapperElement =
+                    document.querySelector(".receipt-wrapper");
+                const widthElement =
+                    receiptWrapperElement.offsetWidth -
+                    receiptWrapperElement.offsetLeft;
+                const heightElement =
+                    receiptWrapperElement.offsetHeight -
+                    receiptWrapperElement.offsetTop;
+                const params = new URLSearchParams(window.location.search);
+                const transactionKey = params.get("date");
+                try {
+                    await html2pdf()
+                        .from(mainElement)
+                        .set({
+                            margin: 10,
+                            filename: `receipt_${transactionKey}.pdf`,
+                            image: { type: "png", quality: 3 },
+                            html2canvas: { scale: 3, useCORS: true },
+                            jsPDF: {
+                                unit: "px",
+                                format: [widthElement, heightElement],
+                                orientation: "portrait",
+                            },
+                        })
+                        .toPdf()
+                        .save();
+                } catch (error) {
+                    console.error("Error generating PDF:", error);
+                }
+            });
+        document
+            .getElementById("print-receipt")
+            .addEventListener("click", async () => {
+                const mainElement = document.getElementById(
+                    "transaction-details"
+                );
+                const lastMainElement = mainElement.innerHTML;
+                mainElement.innerHTML += `
+				<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
+				<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
+				<link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css" />
+				<script src="https://printjs-4de6.kxcdn.com/print.min.css"></script>
+				<link rel="stylesheet" href="stylesheet/styles.css">
+				<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" defer></script>
+				<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script>
+				<script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.13/html-to-image.js"></script>
+				<script src="https://unpkg.com/aos@2.3.1/dist/aos.js" defer></script>
+				<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
+			`;
+                await printJS("transaction-details", "html");
+                mainElement.innerHTML = lastMainElement;
+            });
+    }
+    if (document.getElementById("transaction-list")) {
+        loadTransactions();
+    }
+    let backButton = document.getElementById("backButton");
+    if (backButton) {
+        backButton.addEventListener("click", (e) => {
+            e.preventDefault();
+            window.history.back();
+        });
+    }
 });

javascript/profile.js CHANGED Viewed

@@ -1,243 +1,260 @@
-const CLIENT_ID =
-    "819389601271-fl7jsirpdkepkcou78erki5hmi30rrbm.apps.googleusercontent.com";
-let tokenClient;
-let accessToken;
-async function handleCredentialResponse(response) {
-    const idToken = response.credential;
-    const payload = JSON.parse(atob(idToken.split(".")[1]));
-    const uid = payload.sub;
-    localStorage.setItem("userData", JSON.stringify({
-        uid: uid,
-        name: payload.name,
-        photo_profile: payload.picture,
-        email: payload.email,
-    }));
-    let userData = await getUserData();
-    if (!userData || Object.keys(userData).length === 0) {
-        userData = {
-            uid: uid,
-            name: payload.name,
-            photo_profile: payload.picture,
-            email: payload.email,
-        };
-    }
-    await updateUserDataToGitHub(userData);
-    localStorage.setItem("cart", JSON.stringify(userData.cart || []));
-    window.location.reload();
-}
-function handleAccessTokenResponse(response) {
-    accessToken = response.access_token;
-    console.log("Access Token:", accessToken);
-    fetchUserAdditionalInfo();
-}
-async function fetchUserAdditionalInfo() {
-    let userData = JSON.parse(localStorage.getItem("userData"));
-    if (userData && userData.uid && accessToken) {
-        try {
-            const res = await fetch(
-                "https://people.googleapis.com/v1/people/me?personFields=phoneNumbers,addresses",
-                {
-                    headers: {
-                        Authorization: `Bearer ${accessToken}`,
-                    },
-                }
-            );
-            if (!res.ok)
-                throw new Error(
-                    "Gagal mendapatkan data tambahan: " + res.status
-                );
-            const additionalData = await res.json();
-            console.log("Data tambahan:", additionalData);
-            if (
-                additionalData.phoneNumbers &&
-                additionalData.phoneNumbers.length > 0
-            ) {
-                userData.phone = additionalData.phoneNumbers[0].value;
-            }
-            if (
-                additionalData.addresses &&
-                additionalData.addresses.length > 0
-            ) {
-                userData.address = additionalData.addresses[0].formattedValue;
-            }
-            localStorage.setItem("userData", JSON.stringify(userData));
-            console.log("User Data Lengkap:", userData);
-        } catch (err) {
-            console.error("Error fetching additional info:", err);
-        }
-    } else {
-        console.warn("Data UID atau access token tidak tersedia.");
-    }
-}
-async function renderGoogleLoginButton() {
-    const container = document.getElementById("profile-container");
-    document
-        .querySelectorAll("#googleSignInButton")
-        .forEach((elm) => elm.remove());
-    const urlNow = window.location.href;
-    const urlParams = new URLSearchParams(window.location.search);
-    const redirectUrl = urlParams.get("redirect") || urlNow;
-    const message =
-        urlParams.get("message") ||
-        "Silakan masuk ke akun Anda terlebih dahulu untuk melanjutkan:";
-    container.innerHTML = `
-    <p class="text-center" style="text-decoration: underline; font-style: italic;">${message}</p>
-    <span class="text-center m-4">Klik tombol di bawah ini untuk masuk:</span>
-    <div id="googleSignInButton"></div>
-  `;
-    if (message.trim()) alert(message, false);
-    let isGoogle = false;
-    do {
-        try {
-            google.accounts.id.initialize({
-                client_id: CLIENT_ID,
-                callback: async (response) => {
-                    await handleCredentialResponse(response);
-                    window.location.href = redirectUrl;
-                },
-                auto_select: false,
-                button_auto_select: false,
-                scope: "email profile https://www.googleapis.com/auth/user.phonenumbers.read https://www.googleapis.com/auth/user.addresses.read",
-            });
-            google.accounts.id.prompt();
-            google.accounts.id.renderButton(
-                document.getElementById("googleSignInButton"),
-                { theme: "outline", size: "large" }
-            );
-            isGoogle = true;
-        } catch (e) {
-            console.error("Error initializing Google login:", e);
-            alert("Jika tombol masuk tidak tampil, silahkan muat ulang halaman ini", false)
-            container.innerHTML += `
-              <script src="https://accounts.google.com/gsi/client" async defer></script>
-              <script src="https://accounts.google.com/gsi/oauth2" async defer></script>
-            `;
-        }
-        await new Promise((resolve) => setTimeout(resolve, 100));
-    } while (!isGoogle);
-}
-async function initProfile() {
-    const userData = await getUserData();
-    if (userData && Object.keys(userData).length > 0) {
-        renderProfileForm(userData);
-    } else {
-        await renderGoogleLoginButton();
-    }
-}
-function renderProfileForm(userData) {
-    const container = document.getElementById("profile-container");
-    container.innerHTML = `
-    <form id="profileForm" class="fs-5">
-      <div class="mb-2 d-flex flex-row align-items-center justify-content-center">
-        <img id="photo_profile" class="img-fluid img-thumbnail rounded-circle" src=${userData.photo_profile}>
-        <input class="d-none" type="file" id="fileInput" accept="image/*">
-      </div>
-      <div class="mb-2">
-        <input class="form-control form-control-lg" type="text" id="name" placeholder="Nama" value="${
-            userData.name || ""
-        }" required>
-      </div>
-      <div class="mb-2">
-        <input class="form-control form-control-lg" type="email" id="email" placeholder="Email" value="${
-            userData.email || ""
-        }" required disabled>
-      </div>
-      <div class="mb-2">
-        <input class="form-control form-control-lg" type="text" id="phone" placeholder="No. HP" value="${
-            userData.phone || ""
-        }" required>
-      </div>
-      <div class="mb-2">
-        <input class="form-control form-control-lg" type="text" id="address" placeholder="Alamat" value="${
-            userData.address || ""
-        }" required>
-      </div>
-      <br>
-      <button class="btn btn-primary btn-lg" type="button" id="saveProfile">Simpan</button>
-      <br><br>
-      <button class="btn btn-danger btn-lg" type="button" id="logout">Keluar Akun</button>
-    </form>`;
-    document.getElementById("photo_profile").addEventListener("click", function () {
-        document.getElementById("fileInput").click();
-    });
-    document.getElementById("fileInput").addEventListener("change", function (event) {
-        const file = event.target.files[0];
-        if (file) {
-            if (file.size > 1 * 1024 * 1024) {
-                alert("Ukuran file terlalu besar! Maksimal 1MB.", false);
-                return;
-            }
-            const reader = new FileReader();
-            reader.onload = function (e) {
-                document.getElementById("photo_profile").src = e.target.result;
-            };
-            reader.readAsDataURL(file);
-        }
-    });
-    document
-        .getElementById("saveProfile")
-        .addEventListener("click", async function () {
-            const updatedUser = {
-                uid: userData.uid,
-                name: document.getElementById("name").value.trim(),
-                email: userData.email,
-                phone: document.getElementById("phone").value.trim(),
-                address: document.getElementById("address").value.trim(),
-                photo_profile: document.getElementById("photo_profile").src,
-                cart: userData.cart ? userData.cart : [],
-                transactions: userData.transactions
-                    ? userData.transactions
-                    : [],
-            };
-            if (
-                !updatedUser.name ||
-                !updatedUser.email ||
-                !updatedUser.phone ||
-                !updatedUser.address
-            ) {
-                alert("Semua input wajib diisi!", false);
-                return;
-            }
-            localStorage.setItem("userData", JSON.stringify(updatedUser));
-            await updateUserDataToGitHub(updatedUser);
-            alert("Profil berhasil disimpan!", false);
-        });
-    document.getElementById("logout").addEventListener("click", function () {
-        localStorage.removeItem("userData");
-        window.location.reload();
-    });
-}
-document.addEventListener("DOMContentLoaded", function () {
-    AOS.init();
-    initProfile();
 });

+const CLIENT_ID =
+    "819389601271-fl7jsirpdkepkcou78erki5hmi30rrbm.apps.googleusercontent.com";
+let tokenClient;
+let accessToken;
+async function handleCredentialResponse(response) {
+    const idToken = response.credential;
+    const payload = JSON.parse(atob(idToken.split(".")[1]));
+    const uid = payload.sub;
+    localStorage.setItem("userData", JSON.stringify({
+        uid: uid,
+        name: payload.name,
+        photo_profile: payload.picture,
+        email: payload.email,
+    }));
+    let userData = await getUserData();
+    if (!userData || Object.keys(userData).length === 0) {
+        userData = {
+            uid: uid,
+            name: payload.name,
+            photo_profile: payload.picture,
+            email: payload.email,
+        };
+    }
+    await updateUserDataToGitHub(userData);
+    localStorage.setItem("cart", JSON.stringify(userData.cart || []));
+    window.location.reload();
+}
+function handleAccessTokenResponse(response) {
+    accessToken = response.access_token;
+    console.log("Access Token:", accessToken);
+    fetchUserAdditionalInfo();
+}
+async function fetchUserAdditionalInfo() {
+    let userData = JSON.parse(localStorage.getItem("userData"));
+    if (userData && userData.uid && accessToken) {
+        try {
+            const res = await fetch(
+                "https://people.googleapis.com/v1/people/me?personFields=phoneNumbers,addresses",
+                {
+                    headers: {
+                        Authorization: `Bearer ${accessToken}`,
+                    },
+                }
+            );
+            if (!res.ok)
+                throw new Error(
+                    "Gagal mendapatkan data tambahan: " + res.status
+                );
+            const additionalData = await res.json();
+            console.log("Data tambahan:", additionalData);
+            if (
+                additionalData.phoneNumbers &&
+                additionalData.phoneNumbers.length > 0
+            ) {
+                userData.phone = additionalData.phoneNumbers[0].value;
+            }
+            if (
+                additionalData.addresses &&
+                additionalData.addresses.length > 0
+            ) {
+                userData.address = additionalData.addresses[0].formattedValue;
+            }
+            localStorage.setItem("userData", JSON.stringify(userData));
+            console.log("User Data Lengkap:", userData);
+        } catch (err) {
+            console.error("Error fetching additional info:", err);
+        }
+    } else {
+        console.warn("Data UID atau access token tidak tersedia.");
+    }
+}
+async function renderGoogleLoginButton() {
+    const container = document.getElementById("profile-container");
+    document.querySelectorAll("#googleSignInButton").forEach((elm) => elm.remove());
+    const urlNow = window.location.href;
+    const urlParams = new URLSearchParams(window.location.search);
+    const redirectUrl = urlParams.get("redirect") || urlNow;
+    const message =
+        urlParams.get("message") ||
+        "Silakan masuk ke akun Anda terlebih dahulu untuk melanjutkan:";
+    container.innerHTML = `
+        <p class="text-center" style="text-decoration: underline; font-style: italic;">${message}</p>
+        <span class="text-center m-4">Klik tombol di bawah ini untuk masuk:</span>
+        <div id="googleSignInButton"></div>
+    `;
+    if (message.trim()) alert(message, false);
+    async function loadGoogleAPI(callback) {
+        if (typeof google !== "undefined") {
+            callback();
+            return;
+        }
+        console.log("Memuat Google API...");
+        const script = document.createElement("script");
+        script.src = "https://accounts.google.com/gsi/client";
+        script.async = true;
+        script.defer = true;
+        script.onload = function () {
+            console.log("Google API berhasil dimuat.");
+            if (typeof google !== "undefined") {
+                callback();
+            } else {
+                console.error("Google API gagal dimuat.");
+                alert("Jika tombol masuk tidak tampil, silakan muat ulang halaman ini", false);
+            }
+        };
+        script.onerror = function () {
+            console.error("Gagal memuat Google API.");
+            alert("Gagal memuat Google Login. Coba gunakan browser lain atau muat ulang halaman ini.", false);
+        };
+        document.head.appendChild(script);
+    }
+    function initializeGoogleLogin() {
+        google.accounts.id.initialize({
+            client_id: CLIENT_ID,
+            callback: async (response) => {
+                await handleCredentialResponse(response);
+                window.location.href = redirectUrl;
+            },
+            auto_select: false,
+            button_auto_select: false,
+            scope: "email profile https://www.googleapis.com/auth/user.phonenumbers.read https://www.googleapis.com/auth/user.addresses.read",
+        });
+        google.accounts.id.prompt();
+        google.accounts.id.renderButton(
+            document.getElementById("googleSignInButton"),
+            { theme: "outline", size: "large" }
+        );
+    }
+    loadGoogleAPI(() => {
+        initializeGoogleLogin();
+    });
+}
+async function initProfile() {
+    const userData = await getUserData();
+    if (userData && Object.keys(userData).length > 0) {
+        renderProfileForm(userData);
+    } else {
+        await renderGoogleLoginButton();
+    }
+}
+function renderProfileForm(userData) {
+    const container = document.getElementById("profile-container");
+    container.innerHTML = `
+    <form id="profileForm" class="fs-5">
+      <div class="mb-2 d-flex flex-row align-items-center justify-content-center">
+        <img id="photo_profile" class="img-fluid img-thumbnail rounded-circle" src=${userData.photo_profile}>
+        <input class="d-none" type="file" id="fileInput" accept="image/*">
+      </div>
+      <div class="mb-2">
+        <input class="form-control form-control-lg" type="text" id="name" placeholder="Nama" value="${
+            userData.name || ""
+        }" required>
+      </div>
+      <div class="mb-2">
+        <input class="form-control form-control-lg" type="email" id="email" placeholder="Email" value="${
+            userData.email || ""
+        }" required disabled>
+      </div>
+      <div class="mb-2">
+        <input class="form-control form-control-lg" type="text" id="phone" placeholder="No. HP" value="${
+            userData.phone || ""
+        }" required>
+      </div>
+      <div class="mb-2">
+        <input class="form-control form-control-lg" type="text" id="address" placeholder="Alamat" value="${
+            userData.address || ""
+        }" required>
+      </div>
+      <br>
+      <button class="btn btn-primary btn-lg" type="button" id="saveProfile">Simpan</button>
+      <br><br>
+      <button class="btn btn-danger btn-lg" type="button" id="logout">Keluar Akun</button>
+    </form>`;
+    document.getElementById("photo_profile").addEventListener("click", function () {
+        document.getElementById("fileInput").click();
+    });
+    document.getElementById("fileInput").addEventListener("change", function (event) {
+        const file = event.target.files[0];
+        if (file) {
+            if (file.size > 1 * 1024 * 1024) {
+                alert("Ukuran file terlalu besar! Maksimal 1MB.", false);
+                return;
+            }
+            const reader = new FileReader();
+            reader.onload = function (e) {
+                document.getElementById("photo_profile").src = e.target.result;
+            };
+            reader.readAsDataURL(file);
+        }
+    });
+    document
+        .getElementById("saveProfile")
+        .addEventListener("click", async function () {
+            const updatedUser = {
+                uid: userData.uid,
+                name: document.getElementById("name").value.trim(),
+                email: userData.email,
+                phone: document.getElementById("phone").value.trim(),
+                address: document.getElementById("address").value.trim(),
+                photo_profile: document.getElementById("photo_profile").src,
+                cart: userData.cart ? userData.cart : [],
+                transactions: userData.transactions
+                    ? userData.transactions
+                    : [],
+            };
+            if (
+                !updatedUser.name ||
+                !updatedUser.email ||
+                !updatedUser.phone ||
+                !updatedUser.address
+            ) {
+                alert("Semua input wajib diisi!", false);
+                return;
+            }
+            localStorage.setItem("userData", JSON.stringify(updatedUser));
+            await updateUserDataToGitHub(updatedUser);
+            alert("Profil berhasil disimpan!", false);
+        });
+    document.getElementById("logout").addEventListener("click", function () {
+        localStorage.removeItem("userData");
+        window.location.reload();
+    });
+}
+document.addEventListener("DOMContentLoaded", function () {
+    AOS.init();
+    initProfile();
 });

javascript/search.js CHANGED Viewed

@@ -19,6 +19,9 @@ document.addEventListener("DOMContentLoaded", async function () {
     return;
   }
   if (productQuery) {
     const products = await fetchProductsData();
@@ -102,9 +105,11 @@ document.addEventListener("DOMContentLoaded", async function () {
   }
   if (transactionQuery) {
-    const userData = await getUserData();
-    if (userData.transactions) {
-      const entries = Object.entries(userData.transactions).sort((a, b) => {
         const parseDateFromKey = (key) => {
           const [year, month, day, hour, minute, second, ms] = key.split("_");
           return new Date(year, month - 1, day, hour, minute, second, ms);
@@ -134,11 +139,13 @@ document.addEventListener("DOMContentLoaded", async function () {
           }
         }
         return (
-          key.includes(transactionQuery) ||
-          td[0].includes(transactionQuery) ||
-          td[1].includes(transactionQuery) ||
-          pm.includes(transactionQuery) ||
           total.toString().includes(transactionQuery) ||
           Object.values(productCount).join(",").includes(transactionQuery)
         );
@@ -227,12 +234,14 @@ document.addEventListener("DOMContentLoaded", async function () {
         messageElem.textContent = "Transaksi tidak ditemukan.";
         messageElem.className = "text-center";
         resultList.appendChild(messageElem);
       }
     } else {
       const messageElem = document.createElement("p");
-      messageElem.textContent = "Anda belum melakukan transaksi apapun.";
       messageElem.className = "text-center";
       resultList.appendChild(messageElem);
     }
   }
-});

     return;
   }
+  const searchInput = document.getElementById("searchInput")
+  if (searchInput) searchInput.value = (productQuery ? productQuery : "") + " " + (transactionQuery ? transactionQuery : "");
   if (productQuery) {
     const products = await fetchProductsData();
   }
   if (transactionQuery) {
+    const userData = await getUserData() || {transactions: {}};
+    const transactions = userData.transactions || {};
+    if (Object.keys(transactions).length > 0) {
+      const entries = Object.entries(transactions).sort((a, b) => {
         const parseDateFromKey = (key) => {
           const [year, month, day, hour, minute, second, ms] = key.split("_");
           return new Date(year, month - 1, day, hour, minute, second, ms);
           }
         }
+        const lowerQuery = transactionQuery.toLowerCase();
         return (
+          key.toLowerCase().includes(lowerQuery) ||
+          td[0].toLowerCase().includes(lowerQuery) ||
+          td[1].toLowerCase.includes(lowerQuery) ||
+          pm.toLowerCase.includes(lowerQuery) ||
           total.toString().includes(transactionQuery) ||
           Object.values(productCount).join(",").includes(transactionQuery)
         );
         messageElem.textContent = "Transaksi tidak ditemukan.";
         messageElem.className = "text-center";
         resultList.appendChild(messageElem);
+        alert(messageElem.textContent, false);
       }
     } else {
       const messageElem = document.createElement("p");
+      messageElem.textContent = "Anda belum melakukan transaksi apapun. Silahkan beli produk terlebih dahulu.";
       messageElem.className = "text-center";
       resultList.appendChild(messageElem);
+      alert(messageElem.textContent, false);
     }
   }
+});