Write a Review (JudgeMe)

<div class="review-create-section">
    <t1 class="review-heading">WRITE A REVIEW
        <div class="star-rating" id="starRating">
            <img class="star" data-value="1" src="https://res.cloudinary.com/dixyq8hvr/image/upload/v1747398424/blank-star_mhyhcu.png">
            <img class="star" data-value="2" src="https://res.cloudinary.com/dixyq8hvr/image/upload/v1747398424/blank-star_mhyhcu.png">
            <img class="star" data-value="3" src="https://res.cloudinary.com/dixyq8hvr/image/upload/v1747398424/blank-star_mhyhcu.png">
            <img class="star" data-value="4" src="https://res.cloudinary.com/dixyq8hvr/image/upload/v1747398424/blank-star_mhyhcu.png">
            <img class="star" data-value="5" src="https://res.cloudinary.com/dixyq8hvr/image/upload/v1747398424/blank-star_mhyhcu.png">
        </div>
        <t5 class="review-title-label">Review Title</t5>
        <input id="review-title" class="review-title">
        <t5 class="review-label">Review</t5>
        <textarea id="review-textarea" class="review-textarea" placeholder="Share your review"></textarea>
        <filled-button class="submit-review-btn" onclick="submitReviewFormData()">Submit Review</filled-button>
    </t1>
</div>

.review-create-section {
    background: white;
    padding: 24px;
    font-family: 'Poppins', sans-serif;
}
.review-heading {
    font-weight: 700;
}
.star-rating {
    display: flex;
    gap: 8px;
    margin-top: 24px;
    margin-bottom: 24px;
}
.star-rating img.star {
    width: 28px;
    height: 28px;
    cursor: pointer;
}
.review-title-label {
    display: block;
    font-weight: 500;
    margin-bottom: 4px;
}
.review-label {
    display: block;
    font-weight: 500;
    margin-bottom: 4px;
}
.review-title {
    width: 100%;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    resize: none;
    outline: none;
    box-shadow: none;
    font-family: inherit;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-tap-highlight-color: transparent;
    margin-bottom: 12px;
}
.review-textarea {
    width: 100%;
    height: 120px;
    padding: 12px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    resize: none;
    outline: none;
    box-shadow: none;
    font-family: inherit;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-tap-highlight-color: transparent;
}
filled-button {
    margin-top: 24px;
    width: 100%;
    padding: 10px;
}

const filledStar = "https://res.cloudinary.com/dixyq8hvr/image/upload/v1747398424/golden-star_jwk9ox.png";
const blankStar = "https://res.cloudinary.com/dixyq8hvr/image/upload/v1747398424/blank-star_mhyhcu.png";
let selectedRating = 0;
document.querySelectorAll('.star').forEach(star => {
    star.addEventListener('click', () => {
        selectedRating = parseInt(star.getAttribute('data-value'));
        updateStars();
    });
});
function updateStars() {
    document.querySelectorAll('.star').forEach(star => {
        const value = parseInt(star.getAttribute('data-value'));
        star.src = value <= selectedRating ? filledStar : blankStar;
    });
}
function submitReviewFormData() {
    const productId = (typeof params !== "undefined" && params.productId) ? params.productId : "1920382697526";
    const reviewerName = VajroSDK.variables.customer.firstName
    const reviewerEmail = VajroSDK.variables.customer.email
    const reviewTitle = document.getElementById("review-title").value.trim();
    const review = document.getElementById("review-textarea").value.trim();
    if (!reviewerName || !reviewerEmail) {
        VajroSDK.actions.showAlert({ title: "Error", message: "Failed to submit review. Please login to continue" });
        return;
    }
    if (!selectedRating) {
        VajroSDK.actions.showAlert({ title: "Error", message: "Please provide the rating" });
        return;
    }
    if (!reviewTitle) {
        VajroSDK.actions.showAlert({ title: "Error", message: "Please provide the review title" });
        return;
    }
    if (!review) {
        VajroSDK.actions.showAlert({ title: "Error", message: "Please provide the review" });
        return;
    }
    const formData = new FormData();
    formData.append("shop_domain", "307fa6-3.myshopify.com"); //Replace with relevant domain
    formData.append("platform", "shopify");
    formData.append("id", productId);
    formData.append("email", reviewerEmail);
    formData.append("name", reviewerName);
    formData.append("reviewer_name_format", "");
    formData.append("rating", selectedRating.toString());
    formData.append("title", reviewTitle);
    formData.append("body", review);
    fetch("https://api.judge.me/api/v1/reviews", {
        method: "POST",
        body: formData
    })
        .then((res) => res.json())
        .then((data) => {
            console.log("✅ Review submitted", data);
            VajroSDK.actions.showAlert({
                title: "Success",
                message: `${data.message}`
            })
        })
        .catch((err) => {
            console.error("❌ Error submitting review:", err);
            VajroSDK.actions.showAlert({
                title: "Error",
                message: `${err.message ?? "Failed to submit review"}`
            });
        });
}