salesforce_node_pdf_api/salesforce-popup-integration.js

/**
 * Salesforce LWC Integration for PDF Download Popup
 * Add this code to your propertyTemplateSelector.js file
 */

// Add this method to your LWC component
showDownloadPopup(pdfResult) {
    // Create modal HTML
    const modalHTML = `
        <div class="pdf-download-modal" style="
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
        ">
            <div class="modal-content" style="
                background: white;
                border-radius: 12px;
                padding: 30px;
                max-width: 600px;
                width: 90%;
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
                position: relative;
            ">
                <button class="close-btn" onclick="this.closest('.pdf-download-modal').remove()" style="
                    position: absolute;
                    top: 15px;
                    right: 20px;
                    background: none;
                    border: none;
                    font-size: 24px;
                    cursor: pointer;
                    color: #666;
                ">&times;</button>
                
                <div class="modal-header" style="text-align: center; margin-bottom: 25px;">
                    <h2 style="color: #333; margin-bottom: 10px;">🎉 PDF Ready for Download!</h2>
                    <p style="color: #666;">Your PDF has been generated successfully</p>
                </div>
                
                <div class="download-info" style="
                    background: #f8f9fa;
                    border-radius: 8px;
                    padding: 20px;
                    margin: 20px 0;
                    border-left: 4px solid #28a745;
                ">
                    <h3 style="color: #28a745; margin-bottom: 15px;">📄 Download Information</h3>
                    
                    <div class="file-details" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 15px; margin: 15px 0;">
                        <div class="file-detail" style="text-align: center;">
                            <div class="label" style="font-size: 0.9rem; color: #666; margin-bottom: 5px;">File Name</div>
                            <div class="value" style="font-weight: bold; color: #333;">${pdfResult.filename || 'Unknown'}</div>
                        </div>
                        <div class="file-detail" style="text-align: center;">
                            <div class="label" style="font-size: 0.9rem; color: #666; margin-bottom: 5px;">File Size</div>
                            <div class="value" style="font-weight: bold; color: #28a745;">${pdfResult.file_size_mb ? pdfResult.file_size_mb + ' MB' : 'Unknown'}</div>
                        </div>
                        <div class="file-detail" style="text-align: center;">
                            <div class="label" style="font-size: 0.9rem; color: #666; margin-bottom: 5px;">Generated</div>
                            <div class="value" style="font-weight: bold; color: #333;">${this.formatDate(pdfResult.generated_at)}</div>
                        </div>
                        <div class="file-detail" style="text-align: center;">
                            <div class="label" style="font-size: 0.9rem; color: #666; margin-bottom: 5px;">Expires</div>
                            <div class="value" style="font-weight: bold; color: #ffc107;">${this.formatDate(pdfResult.expires_at)}</div>
                        </div>
                    </div>
                    
                    <div style="margin: 20px 0;">
                        <label style="display: block; margin-bottom: 8px; font-weight: bold; color: #333;">🔗 Download Link:</label>
                        <div class="download-link" style="
                            background: #e9ecef;
                            color: #333;
                            padding: 12px;
                            border-radius: 6px;
                            word-break: break-all;
                            font-family: monospace;
                            font-size: 12px;
                            border: 2px solid #28a745;
                            margin-bottom: 10px;
                        ">${pdfResult.download_url}</div>
                        <button class="copy-btn" onclick="navigator.clipboard.writeText('${pdfResult.download_url}').then(() => { this.textContent = '✅ Copied!'; setTimeout(() => this.textContent = '<27><> Copy Link', 2000); })" style="
                            background: #ffc107;
                            color: #333;
                            border: none;
                            padding: 8px 15px;
                            border-radius: 20px;
                            cursor: pointer;
                            font-size: 0.9rem;
                            margin-right: 10px;
                        ">📋 Copy Link</button>
                    </div>
                </div>
                
                <div class="button-group" style="text-align: center; margin-top: 25px;">
                    <a href="${pdfResult.download_url}" target="_blank" class="download-btn" style="
                        background: #28a745;
                        color: white;
                        padding: 12px 25px;
                        border-radius: 25px;
                        text-decoration: none;
                        font-weight: bold;
                        margin-right: 15px;
                        display: inline-block;
                    ">📥 Download PDF</a>
                    <button onclick="window.open('${pdfResult.download_url}', '_blank')" style="
                        background: #007bff;
                        color: white;
                        border: none;
                        padding: 12px 25px;
                        border-radius: 25px;
                        cursor: pointer;
                        font-weight: bold;
                    ">🔗 Open in New Tab</button>
                </div>
            </div>
        </div>
    `;
    
    // Add modal to page
    document.body.insertAdjacentHTML('beforeend', modalHTML);
}

// Helper method to format dates
formatDate(dateString) {
    if (!dateString) return 'Unknown';
    const date = new Date(dateString);
    return date.toLocaleString();
}

// Update your existing PDF generation method to show popup
async generatePDFWithPopup() {
    try {
        // Show loading state
        this.showLoading = true;
        this.errorMessage = '';
        
        // Call your existing PDF generation method
        const result = await PDFGenerationProxy.generatePDFFromHTML(this.htmlContent, 'A4');
        
        if (result.success) {
            // Show the download popup
            this.showDownloadPopup(result);
        } else {
            this.errorMessage = result.error || 'PDF generation failed';
        }
        
    } catch (error) {
        this.errorMessage = error.message || 'An error occurred';
    } finally {
        this.showLoading = false;
    }
}

// Add this to your LWC template to show the popup
// <template if:true={showDownloadPopup}>
//     <!-- The popup will be injected via JavaScript -->
// </template>