dealhub/resources/js/deal-view-modal.js

import {showToast} from "@/toast.js";
import {closeModal, showModal} from "@/modal.js";
import {redirect} from "./interaction.js";
import {toggleShimmer} from "./shimmer.js";

export async function showDealModal(dealId) {
    if (!dealId) {
        showToast('Something went wrong!');
        return;
    }

    const dealModal = document.getElementById('deal-modal');

    showModal('deal-modal');

    toggleShimmer(true, dealModal);

    try {
        const response = await axios.get('/api/deals/' + dealId);
        setDealDetails(response.data);

        toggleShimmer(false, dealModal);

        dealModal.dataset.dealId = dealId;
        await axios.post(`/api/view/${dealId}`);
    } catch (e) {
        console.error(e);
        closeModal('deal-modal');
        showToast('Something went wrong!');
    }
}

function setDealDetails(dealDetails) {
    if (dealDetails === null) {
        throw new Error('DealDetails must be not null');
    }

    const deal = dealDetails.data
    const {
        id, title, description, link,
        image, category, broker,
        totalRedirection, totalLikes,
        isLiked, isFavorite
    } = deal;
    const dealModal = document.getElementById('deal-modal');

    dealModal.querySelector('.deal-image').src = image;
    dealModal.querySelector('.deal-title').innerText = title;
    dealModal.querySelector('.deal-description').innerText = description;
    dealModal.querySelector('.deal-category').querySelector('p').innerText = category.name;
    dealModal.querySelector('.broker-name').innerText = broker.name;
    dealModal.querySelector('.broker-email').innerText = broker.email;
    dealModal.querySelector('.broker-phone').innerText = broker.role.phone;

    // Set the like and click counts
    let likeCountElm = dealModal.querySelector('.likeCount');
    likeCountElm.querySelector('p').innerText = totalLikes ?? '0';
    likeCountElm.dataset.count = totalLikes ?? '0';
    dealModal.querySelector('.clickCount').querySelector('p').innerText = totalRedirection ?? '0';

    // Set if current user has already liked the deal
    let likeBtn = dealModal.querySelector('.likeBtn');
    let likeBtnSvg = likeBtn.querySelector('svg');
    if (isLiked) {
        likeBtn.dataset.liked = 'true'
        likeBtnSvg.classList.add('text-red-500', 'fill-current');
    } else {
        likeBtn.dataset.liked = 'false'
        likeBtnSvg.classList.remove('text-red-500', 'fill-current');
    }

    // Set if current user has already favorite the deal
    let favoriteBtnSvg = dealModal.querySelector('.favoriteBtn').querySelector('svg');
    if (isFavorite) {
        favoriteBtnSvg.classList.add('text-yellow-500', 'fill-current');
    } else {
        favoriteBtnSvg.classList.remove('text-yellow-500', 'fill-current');
    }
    const dealLink = dealModal.querySelector('.deal-link');
    if (link !== null && link !== "") {
        dealLink.classList.remove('hidden');
        dealLink.classList.add('flex');
        dealLink.addEventListener('click', () => {
            redirect(link);
        })
    } else {
        dealLink.classList.remove('flex');
        dealLink.classList.add('hidden');
    }
}

window.addEventListener('DOMContentLoaded', () => {
    const dealCards = document.querySelectorAll('.deal-card');
    if (dealCards) {
        dealCards.forEach(dealCard => {
            let dealId = dealCard.dataset.dealId;
            let dealTitle = dealCard.querySelector('.action-toolbar').dataset.dealTitle;

            dealCard.addEventListener('click', async (e) => {
                if (e.target.closest('button')) {
                    return;
                }
                await showDealModal(dealId, dealTitle);
            });
        })
    }
});