Upload 7 files

javascript/cart.js

@@ -1,3 +1,187 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:73f4e3e747a78d0f4a19cffde6e5a27121c0778a73e785eff744319b0af8c7e3
-size 5704
+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") || "";
+
+        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;
+    }
+
+    // Ambil keranjang yang ada
+    const cart = await getCarts();
+    // Hapus semua kemunculan produk dengan productId tersebut
+    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();
+    }
+});

javascript/component.js

@@ -1,3 +1,298 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:2e47cba0f834c8034e1cc207b8781134d345e27589d7443fb15f99b4c4ac16e7
-size 10707
+const urlNow = window.location.href;
+const header = document.querySelector("header");
+
+header.className = "shadow-sm py-3 fixed-top";
+header.innerHTML = `
+  <div class="container d-flex flex-column align-items-center mt-2">
+    <form id="searchForm" class="d-flex align-items-center w-75" style="max-width: 600px;">
+      <input id="searchInput" class="form-control form-control-lg" type="search" placeholder="${
+          urlNow.includes("transaction")
+              ? "Cari transaksi..."
+              : "Cari produk..."
+      }" aria-label="Search">
+			<label for="searchInput" class="m-1" id="labelSearchInput">
+				<i class="bi bi-search me-2 text-secondary btn btn-light btn-lg"></i>
+			</label>
+		</form>
+	</div>
+`;
+
+function searchForm() {
+    const searchInputElm = document.getElementById("searchInput");
+    const value = searchInputElm.value.trim();
+    let nextSearch = false;
+    value ? (nextSearch = true) : searchInputElm.focus();
+
+    if (nextSearch)
+        window.location.href =
+            "search.html?" +
+            (urlNow.includes("transaction") ? "transactions=" : "products=") +
+            value;
+}
+
+document
+    .getElementById("labelSearchInput")
+    .addEventListener("click", () => searchForm());
+
+document.getElementById("searchForm").addEventListener("submit", (e) => {
+    e.preventDefault();
+    searchForm();
+});
+
+const footer = document.querySelector("footer");
+
+footer.className = "py-3 fixed-bottom shadow-sm";
+footer.innerHTML = `
+	<div class="container d-flex justify-content-around">
+	<a href="index.html" class="btn btn-warning btn-lg d-flex flex-column align-items-center">
+		<i class="bi bi-bag"></i>
+      <span class="m-1">
+			<span class="nd-720">Cari</span>
+			<span class="nd-512">Produk</span>
+		</span>
+	</a>
+	<a href="transactions.html" class="btn btn-warning btn-lg d-flex flex-column align-items-center">
+		<i class="bi bi-receipt"></i>
+      <span class="m-1">
+			<span class="nd-720">Cek</span>
+			<span class="nd-512">Transaksi</span>
+		</span>
+	</a>
+	<a id="cart-icon" href="cart.html" class="btn btn-primary btn-lg d-flex align-items-center">
+		<i class="bi bi-cart"></i>
+      <span class="m-1">
+			<span class="nd-720">Keranjang</span>
+			<span class="nd-512">(0)</span>
+		</span>
+	</a>
+	<a href="profile.html" class="btn btn-secondary btn-lg d-flex flex-column align-items-center">
+		<i class="bi bi-person-circle"></i>
+		<span class="nd-512">Profil</span>
+	</a>
+	</div>
+`;
+
+const backAreaButton = document.getElementById("backAreaButton");
+if (backAreaButton) {
+    backAreaButton.innerHTML = `
+		<div class="btn btn-primary btn-lg mb-4" id="backButton">
+			<i class="bi bi-arrow-left"></i> <span class="nd-512">Kembali</span>
+		</div>
+		<br><br>
+	`;
+}
+
+async function alert(
+    message = "",
+    isPopUp = true,
+    isTime = false,
+    timeOut = 5,
+    messagesAfterTimeOut = [],
+    awaitResolve = 0
+) {
+    return new Promise((resolve) => {
+        try {
+            let modal;
+            let messageElem;
+            let timeOutElm;
+            let okBtn;
+            let intervalId;
+
+            if (isPopUp) {
+                modal = document.createElement("div");
+                modal.className = "modal";
+                modal.style.position = "fixed";
+                modal.style.top = "0";
+                modal.style.left = "0";
+                modal.style.width = "100%";
+                modal.style.height = "100%";
+                modal.style.backgroundColor = "rgba(0,0,0,0.5)";
+                modal.style.display = "flex";
+                modal.style.alignItems = "center";
+                modal.style.justifyContent = "center";
+            } else {
+                modal = document.createElement("div");
+                modal.className = "notification";
+                modal.style.position = "fixed";
+                modal.style.top = "5%";
+                modal.style.right = "2.5%";
+                modal.style.padding = "10px 20px";
+                modal.style.borderRadius = "5px";
+                modal.style.zIndex = "1000000000";
+                modal.setAttribute("data-aos", "fade-left");
+            }
+
+            const modalContent = document.createElement("div");
+            modalContent.className =
+                "modal-content d-flex align-items-center bg-warning p-3";
+            modalContent.style.width = isPopUp ? "75%" : "100%";
+            modalContent.style.height = isPopUp ? "" : "100%";
+            modalContent.style.borderRadius = "5px";
+            modalContent.style.boxShadow = isPopUp
+                ? "0 2px 10px rgba(0,0,0,0.1)"
+                : "";
+
+            messageElem = document.createElement("p");
+            messageElem.innerHTML =
+                (!isPopUp ? `<i class="bi bi-bell-fill m-2"></i>` : ``) +
+                message;
+
+            timeOutElm = document.createElement("p");
+
+            okBtn = document.createElement("button");
+            okBtn.className = "btn btn-primary btn-lg";
+            okBtn.textContent = "OK";
+            okBtn.style.minWidth = "80px";
+            okBtn.style.display = isTime ? "none" : "block";
+            okBtn.style.marginTop = "10px";
+
+            modalContent.appendChild(messageElem);
+
+            if (isTime) {
+                modalContent.appendChild(timeOutElm);
+            }
+
+            if (isPopUp) {
+                const btnContainer = document.createElement("div");
+                btnContainer.style.marginTop = "20px";
+                btnContainer.appendChild(okBtn);
+                modalContent.appendChild(btnContainer);
+            }
+
+            modal.appendChild(modalContent);
+            document.body.appendChild(modal);
+
+            intervalId = setInterval(async () => {
+                timeOut--;
+                console.log(timeOut);
+                timeOutElm.textContent = timeOut;
+                if (messagesAfterTimeOut.length > 0) {
+                    messagesAfterTimeOut.forEach((mes) => {
+                        if (mes.timeOut >= timeOut) {
+                            modalContent.className =
+                                "modal-content d-flex align-items-center bg-warning p-3";
+                            messageElem.textContent = mes.message;
+                        }
+                    });
+                }
+
+                if (timeOut <= 0) {
+                    await new Promise((res) => setTimeout(res, awaitResolve));
+                    if (document.body.contains(modal)) {
+                        document.body.removeChild(modal);
+                    }
+                    clearInterval(intervalId);
+                    resolve();
+                }
+            }, 1000);
+
+            okBtn.addEventListener("click", function () {
+                if (intervalId) clearInterval(intervalId);
+                if (document.body.contains(modal)) {
+                    document.body.removeChild(modal);
+                }
+                resolve();
+            });
+
+            if (!isPopUp) {
+                setTimeout(() => {
+                    if (document.body.contains(modal)) {
+                        document.body.removeChild(modal);
+                    }
+                    resolve();
+                }, timeOut * 1000);
+            }
+        } catch (e) {
+            console.error(e);
+        }
+    });
+}
+
+async function prompt(message = "", type = "text", placeholder = "") {
+    return new Promise((resolve) => {
+        const modal = document.createElement("div");
+        modal.className = "modal";
+        modal.style.position = "fixed";
+        modal.style.top = 0;
+        modal.style.left = 0;
+        modal.style.width = "100%";
+        modal.style.height = "100%";
+        modal.style.backgroundColor = "rgba(0,0,0,0.5)";
+        modal.style.display = "flex";
+        modal.style.alignItems = "center";
+        modal.style.justifyContent = "center";
+
+        const modalContent = document.createElement("div");
+        modalContent.className = "modal-content";
+        modalContent.style.width = "75%";
+        modalContent.style.background = "#fff";
+        modalContent.style.padding = "20px";
+        modalContent.style.borderRadius = "5px";
+        modalContent.style.boxShadow = "0 2px 10px rgba(0,0,0,0.1)";
+
+        const messageElem = document.createElement("p");
+        messageElem.textContent = message;
+
+        const input = document.createElement("input");
+        input.type = type;
+        input.required = "true";
+        input.style.width = "100%";
+        input.style.marginTop = "10px";
+        input.placeholder = placeholder;
+        input.className = "form-control form-control-lg";
+
+        const btnContainer = document.createElement("div");
+        btnContainer.style.marginTop = "20px";
+        btnContainer.style.textAlign = "right";
+
+        const okBtn = document.createElement("button");
+        okBtn.className = "btn btn-success btn-lg";
+        okBtn.textContent = "OK";
+        okBtn.style.marginRight = "10px";
+
+        const cancelBtn = document.createElement("button");
+        cancelBtn.className = "btn btn-danger btn-lg";
+        cancelBtn.textContent = "Batal";
+
+        btnContainer.appendChild(okBtn);
+        btnContainer.appendChild(cancelBtn);
+
+        modalContent.appendChild(messageElem);
+        modalContent.appendChild(input);
+        modalContent.appendChild(btnContainer);
+        modal.appendChild(modalContent);
+        document.body.appendChild(modal);
+
+        input.addEventListener("click", () => {
+            input.removeAttribute("focus");
+            input.removeAttribute("invalid");
+            input.removeAttribute("style");
+        });
+
+        okBtn.addEventListener("click", function () {
+            const value = input.value;
+            if (input.value.trim().length > 0) {
+                document.body.removeChild(modal);
+                resolve([value, false]);
+            } else {
+                input.setAttribute("focus", true);
+                input.setAttribute("invalid", true);
+                input.style.border = "1px solid red";
+                input.focus();
+            }
+        });
+
+        cancelBtn.addEventListener("click", function () {
+            document.body.removeChild(modal);
+            resolve([null, true]);
+        });
+    });
+}
+
+document.querySelectorAll("main").forEach((elm) => {
+    elm.setAttribute(
+        "class",
+        "hf row mt-4 d-flex flex-column align-items-center"
+    );
+    elm.setAttribute("data-aos", "fade-down");
+});

javascript/data.js

@@ -1,3 +1,204 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:fb444f036fd2376ca0f99f059b67ca1a923bf00f075e5d13ee72cdcec09a70fe
-size 6758
+var products = [];
+var fileData = "";
+
+const GITHUB_TOKEN = atob(
+    "Z2l0aHViX3BhdF8xMUFYNEtVTlkwY05lbWNpZHVrWDYxXzczTzV2bTh2Wk5uMzlpQm0wb1BXRmd5dUx2a0VKSGluZ0dZeURPV0JFWTJXMk9YTFFINVRLT2xpU2ts"
+);
+
+console.log(
+    GITHUB_TOKEN ===
+        "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"
+);
+
+const GITHUB_OWNER = "Adityadn64";
+const GITHUB_REPO = "FINAL-PROJECT---ACQ20RC";
+const USERS_FILE_PATH = "database/users.json";
+const PRODUCTS_FILE_PATH = "database/products.json";
+
+async function getUsers() {
+    const res = await fetch(
+        `https://api.github.com/repos/${GITHUB_OWNER}/${GITHUB_REPO}/contents/${USERS_FILE_PATH}`,
+        {
+            headers: {
+                Accept: "application/vnd.github+json",
+                Authorization: `Bearer ${GITHUB_TOKEN}`,
+            },
+        }
+    );
+
+    fileData = await res.json();
+    let currentUsers = {};
+    try {
+        currentUsers = JSON.parse(atob(fileData.content));
+    } catch (e) {
+        console.error("Error parsing current users; using empty object", e);
+    }
+    return currentUsers;
+}
+
+async function getUserData() {
+    const storedDataStr = localStorage.getItem("userData");
+    if (!storedDataStr) return null;
+    const storedData = JSON.parse(storedDataStr);
+
+    const usersDB = await getUsers();
+    let userData =
+        storedData.uid && usersDB && usersDB[storedData.uid]
+            ? usersDB[storedData.uid]
+            : storedData;
+    // Ensure uid is set
+    if (storedData.uid) {
+        userData.uid = storedData.uid;
+    }
+    return userData;
+}
+
+async function getCarts() {
+    const userData = await getUserData();
+    let localCart = [];
+    const cartStr = localStorage.getItem("cart");
+    if (cartStr) {
+        try {
+            localCart = JSON.parse(cartStr);
+            if (!Array.isArray(localCart)) {
+                localCart = [];
+            }
+        } catch (e) {
+            console.error(
+                "Error parsing local cart data; using empty array",
+                e
+            );
+            localCart = [];
+        }
+    }
+
+    let cartData;
+    if (userData && userData.cart && Array.isArray(userData.cart)) {
+        cartData = userData.cart;
+    } else {
+        cartData = localCart;
+    }
+
+    return cartData;
+}
+
+
+function convertImageToBase64(imageUrl) {
+    return new Promise((resolve, reject) => {
+        fetch(imageUrl)
+            .then(res => res.blob())
+            .then(blob => {
+                const reader = new FileReader();
+                reader.readAsDataURL(blob);
+                reader.onloadend = () => resolve(reader.result);
+                reader.onerror = error => reject(error);
+            })
+            .catch(err => reject(err));
+    });
+}
+
+async function uploadFileToGitHub(filePath, base64Data) {
+    try {
+        const fileRes = await fetch(
+            `https://api.github.com/repos/${GITHUB_OWNER}/${GITHUB_REPO}/contents/${filePath}`,
+            {
+                method: "PUT",
+                headers: {
+                    Accept: "application/vnd.github+json",
+                    Authorization: `Bearer ${GITHUB_TOKEN}`,
+                },
+                body: JSON.stringify({
+                    message: "Upload user photo",
+                    content: base64Data.split(",")[1], // Hanya ambil data Base64 tanpa prefix
+                }),
+            }
+        );
+
+        const result = await fileRes.json();
+        return result;
+    } catch (err) {
+        console.error("Error uploading file to GitHub:", err);
+        return null;
+    }
+}
+
+async function updateUserDataToGitHub(userData) {
+    try {
+        let currentUsers = await getUsers();
+        const isNotValidUID = !userData.uid || userData.uid === undefined;
+
+        if (isNotValidUID) {
+            localStorage.clear();
+            window.location.href =
+                `/profile.html?redirect=${urlNow}` +
+                (message ? `&message=${message}` : "");
+        }
+
+        if (!userData.photo_profile.includes("github")) {
+            const photoFilePath = `assets/users/photo_profile/${userData.uid}.jpg`;
+            let photoBase64 = userData.photo_profile;
+
+            if (!photoBase64.startsWith("data:image/")) {
+                photoBase64 = await convertImageToBase64(userData.photo_profile);
+            }
+
+            const photoUploadRes = await uploadFileToGitHub(photoFilePath, photoBase64);
+            if (photoUploadRes) {
+                userData.photo_profile = `https://raw.githubusercontent.com/${GITHUB_OWNER}/${GITHUB_REPO}/main/${photoFilePath}`;
+            }
+        }
+
+        currentUsers[userData.uid] = {
+            name: userData.name ? userData.name : "",
+            email: userData.email ? userData.email : "",
+            phone: userData.phone ? userData.phone : "",
+            address: userData.address ? userData.address : "",
+            photo_profile: userData.photo_profile ? userData.photo_profile : "",
+            cart: userData.cart ? userData.cart : [],
+            transactions: userData.transactions ? userData.transactions : {},
+        };
+
+        const newContent = btoa(JSON.stringify(currentUsers, null, 4));
+        const updateRes = await fetch(
+            `https://api.github.com/repos/${GITHUB_OWNER}/${GITHUB_REPO}/contents/${USERS_FILE_PATH}`,
+            {
+                method: "PUT",
+                headers: {
+                    Accept: "application/vnd.github+json",
+                    Authorization: `Bearer ${GITHUB_TOKEN}`,
+                },
+                body: JSON.stringify({
+                    message: "Update user data via login Google",
+                    content: newContent,
+                    sha: fileData.sha,
+                }),
+            }
+        );
+
+        const result = await updateRes.json();
+        console.log("Update user data result:", result, currentUsers);
+    } catch (err) {
+        console.error("Error updating user data to GitHub:", err);
+    }
+}
+
+async function fetchProductsData() {
+    const response = await fetch(
+        `https://api.github.com/repos/${GITHUB_OWNER}/${GITHUB_REPO}/contents/${PRODUCTS_FILE_PATH}`,
+        {
+            headers: {
+                Accept: "application/vnd.github.v3+json",
+                Authorization: `Bearer ${GITHUB_TOKEN}`,
+            },
+        }
+    );
+    const data = await response.json();
+    const fileContent = atob(data.content);
+    products = JSON.parse(fileContent);
+    return products;
+}
+
+document.addEventListener("DOMContentLoaded", async function () {
+    AOS.init();
+    products = await fetchProductsData();
+});

javascript/main.js

@@ -1,3 +1,505 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:df00f6f01ceb1885cb0b19ecb4451f766362d384ceab3d943fa77a072f5b1194
-size 17656
+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 ? 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/[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/[email protected]/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/[email protected]/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/payment.js

@@ -1,3 +1,538 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:c55fb2fec92c75eed44d2527781b7bba1fa4e658c572ca67bc2430a7ddc19481
-size 16798
+const steps = [
+    { step: 1, title: "Periksa Data Belanja" },
+    { step: 2, title: "Periksa Informasi Anda" },
+    { step: 3, title: "Pilih Metode Pembayaran" },
+    { step: 4, title: "Lakukan Pembayaran" },
+];
+
+function getStep() {
+    const params = new URLSearchParams(window.location.search);
+    let step = parseInt(params.get("step"));
+    if (!step || step < 1 || step > 4) step = 1;
+    return step;
+}
+
+function goToStep(step) {
+    if (
+        (localStorage.getItem("paymentMethod") || null) === null &&
+        step === 4
+    ) {
+        alert("Pilih salah satu metode pembayaran!", false);
+        return;
+    }
+    window.location.href = "payment.html?step=" + step;
+}
+
+function renderStepNav(currentStep) {
+    let navHtml = `<div class="table-responsive">
+    <table class="table table-bordered text-center">
+      <thead class="table-light">
+        <tr>`;
+    steps.forEach((s) => {
+        navHtml += `<th class="${
+            s.step === currentStep ? "bg-info text-white" : "text-muted"
+        }">
+      <small>Langkah ${s.step}</small>
+    </th>`;
+    });
+    navHtml += `</tr></thead></table></div>`;
+    document.getElementById("step-nav").innerHTML = navHtml;
+}
+
+function renderStepButtons(currentStep) {
+    let btnHtml = `<div class="d-flex justify-content-end">`;
+    if (currentStep > 1) {
+        btnHtml += `<button class="btn btn-secondary btn-lg me-2" onclick="goToStep(${
+            currentStep - 1
+        })">Kembali</button>`;
+    }
+    if (currentStep === 2) {
+        btnHtml += `<button class="btn btn-primary btn-lg" onclick="saveInfoAndLanjut()">Lanjut</button>`;
+    } else if (currentStep < 4) {
+        btnHtml += `<button class="btn btn-primary btn-lg" onclick="goToStep(${
+            currentStep + 1
+        })">Lanjut</button>`;
+    } else {
+        btnHtml += `<button class="btn btn-success btn-lg" onclick="processFinalPayment()">Submit</button>`;
+    }
+    btnHtml += `</div>`;
+    document.getElementById("step-buttons").innerHTML = btnHtml;
+}
+
+async function displayStep1Content() {
+    document.getElementById("step-content").innerHTML = `
+    <h2 class="mb-3">Langkah ${steps[0].step}: ${steps[0].title}</h2>
+    <div id="cart-summary-step" class="table-responsive"></div>`;
+    await loadCartSummary();
+}
+
+var products = [];
+
+var totalPrice = 0;
+async function calculateTotalPrice() {
+    products = await fetchProductsData();
+
+    try {
+        const cart = await getCarts();
+        let cartCount = {};
+        cart.forEach((id) => {
+            cartCount[id] = (cartCount[id] || 0) + 1;
+        });
+        totalPrice = 0;
+        for (let id in cartCount) {
+            const product = products.find((p) => p.id === parseInt(id));
+            if (product) {
+                totalPrice += product.price * cartCount[id];
+            }
+        }
+    } catch (err) {
+        console.error("Error loading cart summary:", err);
+    }
+    return totalPrice;
+}
+
+async function getTotalPrice() {
+    totalPrice = await calculateTotalPrice();
+    console.log("Total Harga:", totalPrice);
+
+    return totalPrice;
+}
+
+async function loadCartSummary() {
+    products = await fetchProductsData();
+    totalPrice = await getTotalPrice();
+    const cart = await getCarts();
+
+    let cartCount = {};
+    cart.forEach((id) => {
+        cartCount[id] = (cartCount[id] || 0) + 1;
+    });
+    let tableHtml = `<div id="cart-summary-step-wrapper">
+  <table class="table table-striped">
+    <thead>
+      <tr>
+        <th>No</th>
+        <th>Nama Produk</th>
+        <th>Harga</th>
+        <th>Quantity</th>
+        <th>Subtotal</th>
+      </tr>
+    </thead>
+    <tbody>`;
+    let index = 1;
+    if (Object.keys(cartCount).length === 0) {
+        tableHtml += `<tr><td colspan="5">Keranjang kosong.</td></tr>`;
+    } else {
+        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;
+                tableHtml += `<tr>
+          <td>${index++}</td>
+          <td>${product.name}</td>
+          <td>${formatRupiah(product.price)}</td>
+          <td>${qty}</td>
+          <td>${formatRupiah(subtotal)}</td>
+        </tr>`;
+            }
+        }
+        tableHtml += `<tr class="table-light">
+      <td colspan="4" class="text-end"><strong>Total</strong></td>
+      <td><strong>${formatRupiah(totalPrice)}</strong></td>
+    </tr>`;
+    }
+    tableHtml += `</tbody></table>`;
+    document.getElementById("cart-summary-step").innerHTML = tableHtml;
+}
+
+async function displayStep2Content() {
+    const userData = await getUserData();
+
+    document.getElementById("step-content").innerHTML = `
+    <h2 class="mb-3">Langkah ${steps[1].step}: ${steps[1].title}</h2>
+    <form id="info-form" class="fs-5">
+      <div class="mb-3">
+        <label class="form-label">Nama Lengkap</label>
+        <input type="text" class="form-control form-control-lg" id="infoName" value="${userData.name}" required>
+      </div>
+      <div class="mb-3">
+        <label class="form-label">Email</label>
+        <input type="email" class="form-control form-control-lg" id="infoEmail" value="${userData.email}" required disabled>
+      </div>
+      <div class="mb-3">
+        <label class="form-label">Telepon</label>
+        <input type="text" class="form-control form-control-lg" id="infoPhone" value="${userData.phone}" required>
+      </div>
+      <div class="mb-3">
+        <label class="form-label">Alamat</label>
+        <input type="text" class="form-control form-control-lg" id="infoAddress" value="${userData.address}" required>
+      </div>
+    </form>`;
+}
+
+async function saveInfoAndLanjut() {
+    const name = document.getElementById("infoName").value.trim();
+    const email = document.getElementById("infoEmail").value.trim();
+    const phone = document.getElementById("infoPhone").value.trim();
+    const address = document.getElementById("infoAddress").value.trim();
+
+    const userData = await getUserData();
+
+    const transactions = userData.transactions ? userData.transactions : {};
+
+    const updatedUser = {
+        uid: userData.uid,
+        name: name,
+        email: userData.email,
+        phone: phone,
+        address: address,
+        picture: userData.picture,
+        cart: userData.cart,
+        transactions: transactions,
+    };
+
+    if (!name || !email || !phone || !address) {
+        alert("Semua input wajib diisi!", false);
+        return;
+    }
+
+    localStorage.setItem("userData", JSON.stringify(updatedUser));
+    await updateUserDataToGitHub(updatedUser);
+    goToStep(3);
+}
+
+function displayStep3Content() {
+    const params = new URLSearchParams(window.location.search);
+    const message = params.get("message") || "";
+
+    if (message.trim()) alert(message, false);
+
+    document.getElementById("step-content").innerHTML = `
+      <h2 class="mb-3">Langkah ${steps[2].step}: ${steps[2].title}</h2>
+      <br>
+      <br>
+      <div class="text-center ${message ? "text-danger mb-4" : ""}">
+        ${message}
+      </div>
+      <div id="payment-method-buttons" class="d-flex flex-wrap justify-content-center mb-3">
+        <button class="btn btn-outline-primary btn-lg m-2" data-method="bank">
+          <i class="bi bi-building me-1"></i> Bank Transfer
+        </button>
+        <button class="btn btn-outline-primary btn-lg m-2" data-method="qr">
+          <i class="bi bi-qr-code me-1"></i> Scan QR
+        </button>
+        <button class="btn btn-outline-primary btn-lg m-2" data-method="card">
+          <i class="bi bi-credit-card me-1"></i> Kartu Kredit/Debit
+        </button>
+      </div>
+      <p class="text-center" id="infoChoose"></p>
+  `;
+
+    const infoChoose = document.getElementById("infoChoose");
+
+    document
+        .querySelectorAll("#payment-method-buttons button")
+        .forEach((btn) => {
+            btn.addEventListener("click", function () {
+                const method = this.getAttribute("data-method");
+
+                localStorage.setItem("paymentMethod", method);
+
+                document
+                    .querySelectorAll("#payment-method-buttons button")
+                    .forEach((b) => {
+                        b.classList.remove("active");
+                    });
+
+                this.classList.add("active");
+
+                infoChoose.innerText =
+                    "Anda memilih metode pembayaran: " + this.innerText;
+            });
+        });
+
+    const savedMethod = localStorage.getItem("paymentMethod");
+    infoChoose.innerText =
+        "Sebelum lanjut pilih metode pembayaran yang tersedia diatas";
+
+    if (savedMethod) {
+        const btn = document.querySelector(
+            `#payment-method-buttons button[data-method="${savedMethod}"]`
+        );
+        if (btn) {
+            btn.classList.add("active");
+            infoChoose.innerText =
+                "Anda memilih metode pembayaran: " + btn.innerText;
+        }
+    }
+}
+
+async function loadBankList() {
+    try {
+        const url =
+            "https://gist.githubusercontent.com/muhammadyana/6abf8480799637b4082359b509410018/raw/indonesia-bank.json";
+        const response = await fetch(url);
+        if (!response.ok) {
+            throw new Error("Gagal memuat data bank: " + response.status);
+        }
+        const banks = await response.json();
+        const bankSelect = document.getElementById("bankName");
+
+        bankSelect.innerHTML = '<option value="">Pilih Bank</option>';
+        banks.forEach((bank) => {
+            const option = document.createElement("option");
+            option.value = bank.code;
+            option.text = bank.name;
+            bankSelect.appendChild(option);
+        });
+    } catch (error) {
+        console.error("Error loadBankList:", error);
+    }
+}
+
+async function displayStep4Content() {
+    await getTotalPrice();
+    const method = localStorage.getItem("paymentMethod") || null;
+
+    if (method === null) {
+        window.location.href =
+            "payment.html?step=3&message=Sebelum lanjut mohon pilih metode pembayaran terlebih dahulu!";
+    }
+
+    let html = `<h2 class="mb-3">Langkah ${steps[3].step}: ${steps[3].title}</h2>`;
+
+    if (method === "qr") {
+        html += `<p class="fs-5">Silakan scan QR Code berikut dengan aplikasi pembayaran Anda:</p>
+             <div id="qr-code" class="my-3"></div>`;
+        document.getElementById("step-content").innerHTML = html;
+        generateQRCode();
+    } else if (method === "bank") {
+        html += `<form id="final-payment-form" class="fs-5">
+      <div class="mb-3">
+        <label class="form-label">Nama Bank</label>
+        <select class="form-control form-control-lg" id="bankName" required>
+          <option value="">Pilih Bank</option>
+        </select>
+      </div>
+      <div class="mb-3">
+        <label class="form-label">Nomor Rekening</label>
+        <input type="text" class="form-control form-control-lg" id="accountNumber" required>
+      </div>
+    </form>`;
+        document.getElementById("step-content").innerHTML = html;
+
+        await loadBankList();
+    } else {
+        html += `<form id="final-payment-form" class="fs-5">
+      <div class="mb-3">
+        <label class="form-label">Nomor Kartu Kredit/Debit</label>
+        <input type="text" class="form-control form-control-lg" id="cardNumber" required>
+      </div>
+      <div class="mb-3">
+        <label class="form-label">Tanggal Kedaluwarsa (MM/YY)</label>
+        <input type="text" class="form-control form-control-lg" id="expiry" placeholder="MM/YY" required>
+      </div>
+      <div class="mb-3">
+        <label class="form-label">CVV</label>
+        <input type="text" class="form-control form-control-lg" id="cvv" required>
+      </div>
+    </form>`;
+        document.getElementById("step-content").innerHTML = html;
+    }
+}
+
+async function processFinalPayment() {
+    const method = localStorage.getItem("paymentMethod") || "card";
+    let valid = true;
+
+    if (method === "bank") {
+        valid =
+            document.getElementById("bankName").value.trim() &&
+            document.getElementById("accountNumber").value.trim();
+    } else if (method === "card") {
+        valid =
+            document.getElementById("cardNumber").value.trim() &&
+            document.getElementById("expiry").value.trim() &&
+            document.getElementById("cvv").value.trim();
+    }
+
+    if (!valid) {
+        alert("Semua input wajib diisi!", false);
+        return;
+    }
+
+    await alert(
+        "Proses pembayaran...",
+        true,
+        true,
+        7,
+        [
+            {
+                timeOut: 3,
+                message: "Pembayaran Berhasil!",
+            },
+        ],
+        3
+    );
+
+    await clearCart(method);
+}
+
+async function clearCart(payment_method) {
+    const userData = await getUserData();
+    const transactions = userData.transactions ? userData.transactions : {};
+
+    const updatedUser = {
+        uid: userData.uid,
+        name: userData.name,
+        email: userData.email,
+        phone: userData.phone,
+        address: userData.address,
+        photo_profile: userData.photo_profile,
+        cart: [],
+        transactions: transactions,
+    };
+
+    console.log("clearCart", updatedUser);
+
+    await saveTransaction(updatedUser, userData.cart, payment_method);
+
+    updateCartIcon();
+}
+
+async function saveTransaction(userData, productIDs, paymentMethod) {
+    let now = new Date();
+    let transactionID =
+        now.getFullYear() +
+        "_" +
+        String(now.getMonth() + 1).padStart(2, "0") +
+        "_" +
+        String(now.getDate()).padStart(2, "0") +
+        "_" +
+        String(now.getHours()).padStart(2, "0") +
+        "_" +
+        String(now.getMinutes()).padStart(2, "0") +
+        "_" +
+        String(now.getSeconds()).padStart(2, "0") +
+        "_" +
+        String(now.getMilliseconds()).padStart(3, "0");
+
+    const products = await fetchProductsData();
+
+    const transactions = userData.transactions;
+
+    let productMap = {};
+
+    productIDs.forEach((id) => {
+        if (products[id]) {
+            if (productMap[id]) {
+                productMap[id].total += 1;
+            } else {
+                productMap[id] = { ...products[id], total: 1 };
+            }
+        }
+    });
+
+    let theProducts = Object.values(productMap);
+
+    transactions[transactionID] = {
+        products: theProducts,
+        payment_method: paymentMethod,
+        user: {
+            name: userData.name,
+            email: userData.email,
+            phone: userData.phone,
+            address: userData.address,
+            photo_profile: userData.photo_profile,
+        },
+    };
+
+    userData.transactions = transactions;
+
+    await updateUserDataToGitHub(userData);
+    localStorage.setItem("userData", JSON.stringify(userData));
+
+    console.log("saveTransaction", userData);
+
+    console.log("Transaksi berhasil disimpan dengan ID:", transactionID);
+
+    window.location.href = `transaction.html?date=${transactionID}`;
+}
+
+function computeCRC(input) {
+    let crc = 0xffff;
+    for (let i = 0; i < input.length; i++) {
+        crc ^= input.charCodeAt(i) << 8;
+        for (let j = 0; j < 8; j++) {
+            if (crc & 0x8000) {
+                crc = ((crc << 1) ^ 0x1021) & 0xffff;
+            } else {
+                crc = (crc << 1) & 0xffff;
+            }
+        }
+    }
+    return crc.toString(16).toUpperCase().padStart(4, "0");
+}
+
+function generateQRCode() {
+    const qrContainer = document.getElementById("qr-code");
+    if (!qrContainer) return;
+    qrContainer.innerHTML = "";
+
+    const payloadWithoutCRC = `00 02 01
+01 0F ID.CO.QRIS000001
+02 07 QRIS V2
+03 02 12
+04 03 360
+05 06 ${totalPrice}
+06 02 ID
+07 0B BRI Virtual
+08 07 Sidoarjo
+63 04`;
+
+    const payloadForCRC = payloadWithoutCRC + "0000";
+    const crcValue = computeCRC(payloadForCRC);
+
+    const finalPayload = payloadWithoutCRC + crcValue;
+
+    new QRCode(qrContainer, {
+        text: finalPayload,
+        width: 200,
+        height: 200,
+    });
+}
+
+async function initPaymentSteps() {
+    const step = getStep();
+    const cart = await getCarts();
+
+    if (cart.length === 0)
+        window.location.href =
+            "cart.html?message=Anda belum memesan produk apapun. Pergi ke halaman produk untuk berbelanja";
+
+    products = await fetchProductsData();
+    switch (step) {
+        case 1:
+            await displayStep1Content();
+            break;
+        case 2:
+            await displayStep2Content();
+            break;
+        case 3:
+            displayStep3Content();
+            break;
+        case 4:
+            await displayStep4Content();
+            break;
+        default:
+            displayStep1Content();
+    }
+    renderStepNav(step);
+    renderStepButtons(step);
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+    AOS.init();
+    initPaymentSteps();
+});

javascript/profile.js

@@ -1,3 +1,243 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:d6a1748ed1c7934d221c432c6ad7e670be7134d5c8c389a3270ef36b7f15f9f5
-size 8818
+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();
+});

javascript/search.js

@@ -1,3 +1,241 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:5c718b23f3951dcd4c23c5f5bb4cdc0acbbf00124e2219813dcd50ba74d87853
-size 9948
+document.addEventListener("DOMContentLoaded", async function () {
+    const resultList = document.getElementById("result-list");
+    const urlParams = new URLSearchParams(window.location.search);
+    const productQuery = urlParams.get("products");
+    const transactionQuery = urlParams.get("transactions");
+
+    const createHeader = (text) => {
+        const header = document.createElement("h3");
+        header.textContent = text;
+        header.className = "col-12 mt-4";
+        resultList.appendChild(header);
+    };
+
+    if (!productQuery && !transactionQuery) {
+        const messageElem = document.createElement("p");
+        messageElem.textContent =
+            "Tidak menemukan hasil pencarian yang sesuai.";
+        messageElem.className = "text-center";
+        resultList.appendChild(messageElem);
+        return;
+    }
+
+    document.getElementById("searchInput").value =
+        productQuery && transactionQuery
+            ? productQuery + " " + transactionQuery
+            : productQuery
+            ? productQuery
+            : transactionQuery;
+
+    if (productQuery) {
+        const products = await fetchProductsData();
+
+        const filteredProducts = products.filter((product) => {
+            const lowerQuery = productQuery.toLowerCase();
+            return (
+                product.name.toLowerCase().includes(lowerQuery) ||
+                (product.description &&
+                    product.description.toLowerCase().includes(lowerQuery))
+            );
+        });
+
+        if (filteredProducts.length > 0) {
+            createHeader("Produk");
+            filteredProducts.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);
+                resultList.appendChild(col);
+            });
+        } else {
+            const messageElem = document.createElement("p");
+            messageElem.textContent = "Produk tidak ditemukan.";
+            messageElem.className = "text-center";
+            resultList.appendChild(messageElem);
+        }
+    }
+
+    if (productQuery && transactionQuery) {
+        const hrElement = document.createElement("hr");
+        resultList.appendChild(hrElement);
+    }
+
+    if (transactionQuery) {
+        const userData = await getUserData();
+        const transactions = userData.transactions ? userData.transactions : {};
+
+        if (transactions && 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
+                        );
+                    };
+                    return parseDateFromKey(b[0]) - parseDateFromKey(a[0]);
+                }
+            );
+
+            const filteredTransactions = entries.filter(
+                ([key, transaction]) => {
+                    const td = formatTransactionDate(key);
+                    const pm = transaction.payment_method;
+                    const total = transaction.total.toString();
+
+                    return (
+                        key.includes(transactionQuery) ||
+                        td[0].includes(transactionQuery) ||
+                        td[1].includes(transactionQuery) ||
+                        pm.includes(transactionQuery) ||
+                        total.includes(transactionQuery) ||
+                        Object.values(productCount)
+                            .join(",")
+                            .includes(transactionQuery)
+                    );
+                }
+            );
+
+            if (filteredTransactions.length > 0) {
+                createHeader("Transaksi");
+
+                filteredTransactions.forEach(
+                    ([transactionKey, transaction]) => {
+                        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";
+
+                        let total = 0;
+
+                        transaction.products.forEach((product) => {
+                            total += product.price * product.total;
+                        });
+
+                        const td = formatTransactionDate(transactionKey);
+
+                        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";
+                        }
+
+                        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);
+                        resultList.appendChild(col);
+
+                        col.addEventListener("click", () => {
+                            window.location.href = `transaction.html?date=${transactionKey}`;
+                        });
+                    }
+                );
+            } else {
+                const messageElem = document.createElement("p");
+                messageElem.textContent = "Transaksi tidak ditemukan.";
+                messageElem.className = "text-center";
+                alert(messageElem.textContent, false);
+                resultList.appendChild(messageElem);
+            }
+        } else {
+            const messageElem = document.createElement("p");
+            messageElem.textContent = "Anda belum melakukan transaksi apapun. Silahkan beli produk terlebih dahulu.";
+            messageElem.className = "text-center";
+            alert(messageElem.textContent, false);
+            resultList.appendChild(messageElem);
+        }
+    }
+});