'; // Convert HTML to Blob const blob = new Blob([htmlContent], { type: 'application/vnd.ms-word;charset=utf-8' }); // Create download link and trigger download const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = `${formData.companyName || 'Affiliate-Agreement'}-${formData.affiliateName || 'Affiliate'}.doc`; document.body.appendChild(link); link.click(); document.body.removeChild(link); console.log("Document generated and download triggered"); } catch (error) { console.error("Error generating Word document:", error); alert("Error generating Word document. Please try again or use the copy option."); } }; const { useState, useEffect, useRef } = React; // Main component const AffiliateAgreementGenerator = () => { // State for form data (simplified for this example) const [formData, setFormData] = useState({ // Company Information companyName: '', companyAddress: '', companyWebsite: '', contactEmail: '', effectiveDate: '', // Affiliate Information affiliateName: '', affiliateAddress: '', affiliateWebsite: '', affiliateEmail: '', // Agreement Terms agreementTerm: '12-months', // 3-months, 6-months, 12-months, 24-months, indefinite // Commission Structure commissionType: 'percentage', // percentage, flat-fee, tiered commissionRate: 10, // percentage }); // State for tracking the current tab const [currentTab, setCurrentTab] = useState(0); // State for tracking what was last changed const [lastChanged, setLastChanged] = useState(null); // State for the generated document text const [documentText, setDocumentText] = useState(''); // Ref for preview content div const previewRef = useRef(null); // Tab configuration (simplified) const tabs = [ { id: 'company-info', label: 'Company Information' }, { id: 'affiliate-info', label: 'Affiliate Information' }, { id: 'agreement-terms', label: 'Agreement Terms' }, { id: 'commission', label: 'Commission Structure' }, { id: 'preview', label: 'Final Document' } ]; // Handle input changes const handleChange = (e) => { const { name, value, type, checked } = e.target; // Record what field was changed for highlighting setLastChanged(name); // Handle regular fields setFormData(prev => ({ ...prev, [name]: type === 'checkbox' ? checked : value })); }; // Navigation functions const nextTab = () => { if (currentTab < tabs.length - 1) { setCurrentTab(currentTab + 1); } }; const prevTab = () => { if (currentTab > 0) { setCurrentTab(currentTab - 1); } }; const goToTab = (index) => { setCurrentTab(index); }; // Generate the agreement document based on form data useEffect(() => { // Generate agreement text based on form data const generateAgreementText = () => { let agreement = ''; // Title agreement += `AFFILIATE AGREEMENT\n\n`; // Introduction agreement += `This Affiliate Agreement (the "Agreement") is entered into as of ${formData.effectiveDate || '[DATE]'} (the "Effective Date") by and between:\n\n`; agreement += `${formData.companyName || '[COMPANY NAME]'}, with its principal place of business at ${formData.companyAddress || '[COMPANY ADDRESS]'} (the "Company"),\n\n`; agreement += `and\n\n`; agreement += `${formData.affiliateName || '[AFFILIATE NAME]'}, with its principal place of business at ${formData.affiliateAddress || '[AFFILIATE ADDRESS]'} (the "Affiliate").\n\n`; agreement += `WHEREAS, Company is in the business of selling products and/or services through its website ${formData.companyWebsite || '[COMPANY WEBSITE]'};\n\n`; agreement += `WHEREAS, Affiliate operates the website ${formData.affiliateWebsite || '[AFFILIATE WEBSITE]'} and wishes to participate in Company's affiliate program;\n\n`; agreement += `NOW, THEREFORE, in consideration of the mutual covenants contained herein, and for other good and valuable consideration, the receipt and sufficiency of which are hereby acknowledged, the parties agree as follows:\n\n`; // 1. Definitions agreement += `1. DEFINITIONS\n\n`; agreement += `1.1 "Affiliate Program" means the Company's marketing program in which the Affiliate markets and promotes the Company's products or services in exchange for a Commission.\n\n`; agreement += `1.2 "Commission" means the payment made to Affiliate for Qualified Transactions as set forth in Section 3.\n\n`; agreement += `1.3 "Qualified Transaction" means a completed sale of Company's products or services to a customer referred by Affiliate through an Affiliate Link, subject to the terms of this Agreement.\n\n`; // 2. Term agreement += `2. TERM\n\n`; // Add term length based on selection let termText = ''; switch(formData.agreementTerm) { case '3-months': termText = 'three (3) months'; break; case '6-months': termText = 'six (6) months'; break; case '12-months': termText = 'twelve (12) months'; break; case '24-months': termText = 'twenty-four (24) months'; break; case 'indefinite': termText = 'an indefinite period, until terminated according to the terms of this Agreement'; break; default: termText = '[TERM PERIOD]'; } agreement += `This Agreement shall commence on the Effective Date and shall remain in effect for ${termText}.`; agreement += `\n\n`; // 3. Commission Structure agreement += `3. COMMISSION STRUCTURE\n\n`; // Add commission details based on type if (formData.commissionType === 'percentage') { agreement += `3.1 Commission Rate\nCompany shall pay Affiliate a commission of ${formData.commissionRate || '[RATE]'}% of the net sale price for each Qualified Transaction.\n\n`; } else if (formData.commissionType === 'flat-fee') { agreement += `3.1 Commission Rate\nCompany shall pay Affiliate a flat fee of $${formData.flatFeeAmount || '[AMOUNT]'} for each Qualified Transaction.\n\n`; } // Signatures agreement += `IN WITNESS WHEREOF, the parties have executed this Agreement as of the Effective Date.\n\n`; agreement += `${formData.companyName || 'COMPANY'}\n\n`; agreement += `By: ____________________________\n`; agreement += `Name: __________________________\n`; agreement += `Title: ___________________________\n`; agreement += `Date: ____________________________\n\n`; agreement += `${formData.affiliateName || 'AFFILIATE'}\n\n`; agreement += `By: ____________________________\n`; agreement += `Name: __________________________\n`; agreement += `Title: ___________________________\n`; agreement += `Date: ____________________________\n`; return agreement; }; // Update the document text const newDocumentText = generateAgreementText(); setDocumentText(newDocumentText); }, [formData]); // Create highlighted document text for preview const createHighlightedText = () => { // For simplicity, no highlighting in this version return documentText; }; // Get highlighted document text const highlightedText = createHighlightedText(); // Copy document to clipboard const copyToClipboard = () => { try { navigator.clipboard.writeText(documentText); alert('Agreement copied to clipboard!'); } catch (error) { console.error('Error copying to clipboard:', error); alert('Failed to copy to clipboard. Please try again.'); } }; // Download as Word document const downloadAsWord = () => { try { console.log("Download MS Word button clicked"); // Make sure document text is available if (!documentText) { console.error("Document text is empty"); alert("Cannot generate document - text is empty. Please check the form data."); return; } // Call the document generation function generateWordDoc(documentText, { companyName: formData.companyName || 'Affiliate-Agreement', affiliateName: formData.affiliateName || 'Affiliate' }); } catch (error) { console.error("Error in downloadAsWord:", error); alert("Error generating Word document. Please try again or use the copy option."); } }; // Render different form sections based on current tab const renderForm = () => { switch(currentTab) { case 0: // Company Information return (

Affiliate Information

Enter information about the affiliate (the party promoting your products or services).

Affiliate Name

Affiliate Address

Affiliate Website

Affiliate Email

); case 2: // Agreement Terms return (

Agreement Terms

Define the duration and renewal terms for the affiliate agreement.

Agreement Term

3 months 6 months 12 months 24 months Indefinite (until terminated)

); case 3: // Commission Structure return (

Commission Structure

Define how affiliates will be compensated for referrals.

Commission Type

Percentage of Sale Flat Fee per Sale

{formData.commissionType === 'percentage' && (

Commission Rate (%)

)} {formData.commissionType === 'flat-fee' && (

Flat Fee Amount ($)

)}

); case 4: // Final Document return (

Final Affiliate Agreement

Your affiliate agreement is ready! Review it below and use the buttons to copy or download.

Need professional legal guidance on your affiliate agreement?

Email Sergei with documents

); default: return null; } }; return (

Affiliate Agreement Generator

{/* Tab navigation */}

{tabs.map((tab, index) => ( ))}

{/* Preview container */}

{/* Form panel */} {renderForm()} {/* Preview panel */}

Live Preview

{/* Navigation buttons */}

{currentTab < tabs.length - 1 && ( <> )}

); }; // Render the app document.addEventListener("DOMContentLoaded", function() { ReactDOM.render( , document.getElementById('root') ); // Initialize Feather icons feather.replace(); });

Company Information