Update index.html

Author: PartnerProgram

index.html

@@ -45,8 +45,100 @@ <h1 class="mt-4 text-3xl font-semibold leading-tight sm:text-4xl">
         showBusinessPlanModal: false,
         showEvaluationModal: false,
         showPartnerEventsModal: false,
+        showCsvModal: false,
         activeStep: 0,
         band: 'band1',
+        roeView: 'partner', // 'partner' | 'internal'
+        defaultBandByType: { Registered:'band3', Preferred:'band2', Premier:'band1', MSP:'band1' },
+        simpleROE: {
+          Registered: {
+            summary: "You can refer and transact. Co-sell upgrades your margin; order-only stays referral.",
+            sourcing: [
+              {label:"Partner Sourced", value:"You found the opp + registered it + helped close → Full margin when you drive the sale."},
+              {label:"Recast Sourced (Co-Sell)", value:"We brought the lead; you help sell → Shared margin."},
+              {label:"Transactional/Referral", value:"Intro or PO only → Referral margin."}
+            ],
+            bands: [
+              {band:"Band 2 – Co-Sell", when:["Host/lead discovery","Own next steps/MAP","Participate in demo/validation","Coordinate quote/security"], rule:"Any 2+ qualify"},
+              {band:"Band 3 – Transactional", when:["Intro only or PO processing"], rule:"Default if <2 activities above"}
+            ],
+            renewals:[
+              "PoR keeps renewal if active (renewal plan ≥90 days out + QBR/health checks).",
+              "If inactive or customer reassigns, Recast may reassign renewal."
+            ],
+            csv: {
+              blurb:"Upload event or campaign lists for fast routing. Influence ≠ margin.",
+              required:["Partner Name","Campaign Name/ID","Account Name (and Domain)","First Name","Last Name","Email","Country","Source Type","Attribution Intent","Requested PoR (Y/N)"],
+              flow:[
+                "Create/Update Campaign Members; de-dupe by email; match Account by Domain/Name.",
+                "Stamp: Lead Source=Partner Event; Sourcing Partner; Attribution (Primary/Influence).",
+                "Option: 'Create Deal Registration' → PQL → Channel approval in 2 business days."
+              ]
+            }
+          },
+          Preferred: {
+            summary:"You co-sell with us; consistent activity earns Band 2. Own full cycle → Band 1.",
+            sourcing: [
+              {label:"Partner Sourced", value:"You found the opp + registered it + helped close → Full margin when you drive the sale."},
+              {label:"Recast Sourced (Co-Sell)", value:"We brought the lead; you help sell → Shared margin."},
+              {label:"Transactional/Referral", value:"Intro or PO only → Referral margin."}
+            ],
+            bands:[
+              {band:"Band 1 – Full-Cycle", when:["Sourced + registered","Owns qual→close with light Recast support"], rule:"Full margin"},
+              {band:"Band 2 – Co-Sell", when:["Shared discovery/demo/pricing; active MAP"], rule:"Shared margin"}
+            ],
+            renewals:["PoR retains renewal with activity compliance; else may be reassigned."],
+            csv: {
+              blurb:"Upload event or campaign lists for fast routing. Influence ≠ margin.",
+              required:["Partner Name","Campaign Name/ID","Account Name (and Domain)","First Name","Last Name","Email","Country","Source Type","Attribution Intent","Requested PoR (Y/N)"],
+              flow:[
+                "Create/Update Campaign Members; de-dupe by email; match Account by Domain/Name.",
+                "Stamp: Lead Source=Partner Event; Sourcing Partner; Attribution (Primary/Influence).",
+                "Option: 'Create Deal Registration' → PQL → Channel approval in 2 business days."
+              ]
+            }
+          },
+          Premier: {
+            summary:"Strategic partner. Default expectation is Band 1 unless co-sell is requested.",
+            sourcing: [
+              {label:"Partner Sourced", value:"You found the opp + registered it + helped close → Full margin when you drive the sale."},
+              {label:"Recast Sourced (Co-Sell)", value:"We brought the lead; you help sell → Shared margin."},
+              {label:"Transactional/Referral", value:"Intro or PO only → Referral margin."}
+            ],
+            bands:[
+              {band:"Band 1 – Full-Cycle", when:["Sourced + end-to-end ownership"], rule:"Full margin"},
+              {band:"Band 2 – Co-Sell", when:["Recast Sourced or heavier presales help"], rule:"Shared margin"}
+            ],
+            renewals:["PoR renewal protection with activity; expansions follow Bands."],
+            csv: {
+              blurb:"Upload event or campaign lists for fast routing. Influence ≠ margin.",
+              required:["Partner Name","Campaign Name/ID","Account Name (and Domain)","First Name","Last Name","Email","Country","Source Type","Attribution Intent","Requested PoR (Y/N)"],
+              flow:[
+                "Create/Update Campaign Members; de-dupe by email; match Account by Domain/Name.",
+                "Stamp: Lead Source=Partner Event; Sourcing Partner; Attribution (Primary/Influence).",
+                "Option: 'Create Deal Registration' → PQL → Channel approval in 2 business days."
+              ]
+            }
+          },
+          MSP: {
+            summary:"Managed service delivery; monthly economics; PoR protections per MSP ROE.",
+            sourcing:[{label:"MSP Motion", value:"You package Recast in services; co-sell on net-new logos."}],
+            bands:[
+              {band:"Band 1", when:["MSP drives sale and delivery"], rule:"Programmed in MSP price book"},
+              {band:"Band 2", when:["Co-sell with Recast SE/AE"], rule:"Shared margin"}
+            ],
+            renewals:["Incumbent MSP retains renewal if active in lifecycle reviews."],
+            csv: {
+              blurb:"Upload event or campaign lists for fast routing. Influence ≠ margin. Emphasize multitenant lists.",
+              required:["Partner Name","Campaign Name/ID","Account Name (and Domain)","First Name","Last Name","Email","Country","Source Type","Attribution Intent","Requested PoR (Y/N)"],
+              flow:[
+                "Create/Update Campaign Members; de-dupe by email; match Account by Domain/Name.",
+                "Stamp: Lead Source=Partner Event; Sourcing Partner; Attribution (Primary/Influence).",
+                "Option: 'Create Deal Registration' → PQL → Channel approval in 2 business days."
+              ]
+            }
+          }
+        },
         exampleACV: 100000,
         salesCycle: {
           stages: {
@@ -483,6 +575,7 @@ <h1 class="mt-4 text-3xl font-semibold leading-tight sm:text-4xl">
         if (STATE.showPartnerEventsModal) {
           html += renderPartnerEventsModal();
         }
+        if (STATE.showCsvModal) html += renderCsvModal();
         document.getElementById('app').innerHTML = html;
         lucide.createIcons();
         addEventListeners();
@@ -705,17 +798,100 @@ <h4 class="font-medium mb-2">${r.band} - Up to ${r.upTo}</h4>
         return html;
       }
       function renderROEContent() {
+        // MSP already has its own ROE block; keep that path
         if (STATE.partnerType === 'MSP') {
-          let html = '<h2 class="text-xl font-medium mb-6 flex items-center gap-3"><i data-lucide="gavel" class="h-6 w-6 stroke-[#2563eb]"></i>Rules of Engagement</h2>';
-          html += '<ol class="space-y-6 list-decimal pl-6">';
+          // Add partner/internal toggle even for MSP
+          return renderROEWithToggle(renderSimpleROE(STATE.partnerType), renderInternalROE());
+        }
+        return renderROEWithToggle(renderSimpleROE(STATE.partnerType), renderInternalROE());
+      }
+      function renderROEWithToggle(partnerHtml, internalHtml){
+        const toggle = `
+          <div class="flex items-center justify-between mb-4">
+            <h2 class="text-xl font-medium flex items-center gap-3">
+              <i data-lucide="gavel" class="h-6 w-6 stroke-[#2563eb]"></i>Rules of Engagement
+            </h2>
+            <div class="inline-flex rounded-full bg-gray-100 p-1">
+              <button data-roeview="partner" class="px-3 py-1 text-sm rounded-full ${STATE.roeView==='partner'?'bg-white shadow':''}">Partner-facing</button>
+              <button data-roeview="internal" class="px-3 py-1 text-sm rounded-full ${STATE.roeView==='internal'?'bg-white shadow':''}">Internal</button>
+            </div>
+          </div>`;
+        const body = STATE.roeView==='partner' ? partnerHtml : internalHtml;
+        return toggle + body;
+      }
+      function renderSimpleROE(type){
+        const d = STATE.simpleROE[type];
+        const defBand = STATE.defaultBandByType[type] || 'band2';
+        const bandMeta = STATE.salesCycle.bandMeta[defBand];
+
+        const card = (title, inner) => `
+          <div class="rounded-xl bg-white shadow-md hover:shadow-lg transition overflow-hidden">
+            <h3 class="text-lg font-semibold p-5 border-b border-[#E2E8F0] bg-gray-50 flex items-center gap-2">
+              <i data-lucide="file-text" class="h-5 w-5 stroke-[#2563eb]"></i>${title}
+            </h3>
+            <div class="p-5">${inner}</div>
+          </div>`;
+
+        const list = (items) => `<ul class="space-y-2">${items.map(i=>`
+          <li class="flex items-start gap-3">
+            <span class="mt-1 bg-[#2563eb] rounded-full p-1"><i data-lucide="check" class="h-3 w-3 stroke-white"></i></span>
+            <span class="text-gray-700 leading-relaxed">${typeof i==='string'?i:`<strong>${i.label}:</strong> ${i.value}`}</span>
+          </li>`).join('')}</ul>`;
+
+        const bandsTable = `
+          <div class="overflow-x-auto">
+            <table class="min-w-full divide-y divide-[#E2E8F0]">
+              <thead><tr>
+                <th class="px-4 py-2 text-left text-sm font-semibold">Band</th>
+                <th class="px-4 py-2 text-left text-sm font-semibold">When</th>
+                <th class="px-4 py-2 text-left text-sm font-semibold">Rule</th>
+              </tr></thead>
+              <tbody class="divide-y divide-[#E2E8F0]">
+                ${d.bands.map(b => `
+                  <tr>
+                    <td class="px-4 py-3 text-sm font-medium">${b.band}</td>
+                    <td class="px-4 py-3 text-sm">
+                      <ul class="list-disc pl-5 space-y-1">${(b.when||[]).map(w=>`<li>${w}</li>`).join('')}</ul>
+                    </td>
+                    <td class="px-4 py-3 text-sm">${b.rule||''}</td>
+                  </tr>`).join('')}
+              </tbody>
+            </table>
+          </div>`;
+
+        const csvBlock = `
+          <p class="text-gray-700 leading-relaxed mb-3">${d.csv.blurb}</p>
+          <div class="grid md:grid-cols-3 gap-4">
+            <div><div class="font-medium mb-1">Required Columns</div>${list(d.csv.required)}</div>
+            <div><div class="font-medium mb-1">What Happens</div>${list(d.csv.flow)}</div>
+            <div class="flex items-start">
+              <button id="csvSopBtn" class="rounded-full bg-[#2563eb] hover:bg-[#1d4ed8] px-4 py-2 text-sm text-white shadow-sm">CSV Upload SOP</button>
+            </div>
+          </div>`;
+
+        return `
+          <div class="space-y-6">
+            <div class="flex flex-wrap items-center gap-2">
+              <span class="px-3 py-1 text-xs rounded-2xl ${bandMeta.color}">${bandMeta.name}</span>
+              <span class="text-xs text-gray-600">Default expectation for ${type}</span>
+            </div>
+            ${card("Sourcing & Attribution", list(d.sourcing))}
+            ${card("Registration Bands (What You Earn)", bandsTable)}
+            ${card("Renewals", list(d.renewals))}
+            ${card("Uploading Event/Co-Marketing Leads", csvBlock)}
+          </div>`;
+      }
+      function renderInternalROE(){
+        if (STATE.partnerType === 'MSP') {
+          let html = '<ol class="space-y-6 list-decimal pl-6">';
           STATE.msp.roe.forEach(rule => {
             html += `<li class="text-gray-700 leading-relaxed">${rule.replace(/\n/g, '<br>')}</li>`;
           });
           html += '</ol>';
           return html;
         } else {
-          let html = '<h2 class="text-xl font-medium mb-6 flex items-center gap-3"><i data-lucide="gavel" class="h-6 w-6 stroke-[#2563eb]"></i>Rules of Engagement</h2>';
-          html += '<div class="space-y-6">';
+          // reuse existing blocks
+          let html = '<div class="space-y-6">';
           html += renderROESection('Rules of Engagement (ROE)', renderPrinciplesTable());
           html += renderROESection('Margin Bands & Definitions', renderBandsTable());
           html += renderROESection('Partner Margin Governance', renderGovernanceTable());
@@ -1107,6 +1283,29 @@ <h2 class="text-xl font-medium mb-6 flex items-center gap-3"><i data-lucide="sca
         html += '</section>';
         return html;
       }
+      function renderCsvModal(){
+        const sample = "Partner Name,Campaign Name,Account Name,Domain,First Name,Last Name,Email,Country,Source Type,Attribution Intent,Requested PoR\nAcme Partner,2025-03 Webinar,Contoso,contoso.com,Jane,Doe,jane@contoso.com,US,Webinar,Partner Sourced,Yes";
+        return `
+        <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4" id="csvModal">
+          <div class="relative max-w-3xl w-full bg-white rounded-xl shadow-2xl p-8 max-h-[90vh] overflow-y-auto">
+            <button class="absolute top-4 right-4 text-gray-600 hover:text-gray-900" id="closeCsvModal"><i data-lucide="x" class="h-6 w-6"></i></button>
+            <h2 class="text-xl font-medium mb-4 flex items-center gap-3"><i data-lucide="upload" class="h-6 w-6 stroke-[#2563eb]"></i>CSV Upload SOP</h2>
+            <ol class="list-decimal pl-6 space-y-2 text-gray-700">
+              <li>Download the template CSV.</li>
+              <li>Fill required columns; one row per contact.</li>
+              <li>Choose “Create Deal Registration” for qualified rows.</li>
+              <li>Channel approves within 2 business days (PoR + Band applied).</li>
+            </ol>
+            <div class="mt-4">
+              <pre class="bg-gray-50 p-3 rounded-lg text-xs overflow-auto">${sample}</pre>
+            </div>
+            <div class="mt-4 flex gap-2">
+              <button class="rounded-full bg-[#2563eb] text-white px-4 py-2 text-sm" id="downloadCsvTpl">Download Template</button>
+              <button class="rounded-full border px-4 py-2 text-sm" id="closeCsvModal2">Close</button>
+            </div>
+          </div>
+        </div>`;
+      }
       function addEventListeners() {
         document.getElementById('partnerType').addEventListener('change', (e) => {
           STATE.partnerType = e.target.value;
@@ -1210,22 +1409,52 @@ <h2 class="text-xl font-medium mb-6 flex items-center gap-3"><i data-lucide="sca
             render();
           });
         }
-        const modals = document.querySelectorAll('#businessPlanModal, #partnerEventsModal, #evaluationModal');
+        document.querySelectorAll('[data-roeview]').forEach(btn=>{
+          btn.addEventListener('click',()=>{
+            STATE.roeView = btn.dataset.roeview;
+            render();
+          });
+        });
+        const csvBtn = document.getElementById('csvSopBtn');
+        if (csvBtn){
+          csvBtn.addEventListener('click',()=>{
+            STATE.showCsvModal = true;
+            render();
+          });
+        }
+        const closeCsv = document.getElementById('closeCsvModal');
+        const closeCsv2 = document.getElementById('closeCsvModal2');
+        if (closeCsv || closeCsv2){
+          [closeCsv, closeCsv2].filter(Boolean).forEach(b=>b.addEventListener('click',()=>{ STATE.showCsvModal=false; render(); }));
+        }
+        const dl = document.getElementById('downloadCsvTpl');
+        if (dl){
+          dl.addEventListener('click',()=>{
+            const csv = `Partner Name,Campaign Name,Account Name,Domain,First Name,Last Name,Email,Country,Source Type,Attribution Intent,Requested PoR\n`;
+            const blob = new Blob([csv], {type:'text/csv'});
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a'); a.href=url; a.download='recast_partner_upload_template.csv'; a.click();
+            URL.revokeObjectURL(url);
+          });
+        }
+        const modals = document.querySelectorAll('#businessPlanModal, #partnerEventsModal, #evaluationModal, #csvModal');
         modals.forEach(modal => {
           modal.addEventListener('click', (e) => {
             if (e.target === modal) {
               STATE.showBusinessPlanModal = false;
               STATE.showPartnerEventsModal = false;
               STATE.showEvaluationModal = false;
+              STATE.showCsvModal = false;
               render();
             }
           });
         });
         document.addEventListener('keydown', (e) => {
-          if (e.key === 'Escape' && (STATE.showBusinessPlanModal || STATE.showPartnerEventsModal || STATE.showEvaluationModal)) {
+          if (e.key === 'Escape' && (STATE.showBusinessPlanModal || STATE.showPartnerEventsModal || STATE.showEvaluationModal || STATE.showCsvModal)) {
             STATE.showBusinessPlanModal = false;
             STATE.showPartnerEventsModal = false;
             STATE.showEvaluationModal = false;
+            STATE.showCsvModal = false;
             render();
           }
         });