'; // 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?

{ Calendly.initPopupWidget({url: 'https://calendly.com/sergei-tokmakov/30-minute-zoom-meeting?hide_gdpr_banner=1'}); return false; }}> Schedule a consultation

); 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