vibespot 1.2.0 → 1.3.0

package/ui/upload-panel.js

@@ -8,6 +8,7 @@ let lastUploadErrors = [];
 let lastUploadPortalId = "";
 let lastUploadDataCenter = "na1";
 let lastUploadThemeName = "";
+let lastUploadContentMode = "page";
 const MAX_UPLOAD_ATTEMPTS = 3;
 
 async function startUpload() {
@@ -249,7 +250,7 @@ function confirmUpload(portalName, portalId) {
         let html = '<div style="display:flex;flex-direction:column;gap:6px">';
         for (const acct of accounts) {
           const isActive = acct.portalId === activeId;
-          html += `<button class="btn btn--${isActive ? "primary" : "secondary"} confirm-acct-btn" data-portal="${esc(acct.portalId)}" style="text-align:left;padding:6px 12px;font-size:13px">${esc(acct.portalName || acct.portalId)} (${esc(acct.portalId)})${isActive ? " ✓" : ""}</button>`;
+          html += `<button class="btn btn--${isActive ? "primary" : "secondary"} confirm-acct-btn" data-portal="${esc(acct.portalId)}" style="text-align:left;padding:6px 12px;font-size:13px">${esc(acct.portalName || acct.portalId)} (${esc(acct.portalId)})${isActive ? ' <span class="vs-icon-inline">' + vsIcon("check", {size: "sm"}) + '</span>' : ""}</button>`;
         }
         html += `<button class="btn btn--secondary confirm-acct-btn" data-portal="__new" style="text-align:left;padding:6px 12px;font-size:13px">+ Add another account</button>`;
         html += '</div>';
@@ -326,10 +327,10 @@ function setUploadState(state, data) {
 
     case "success":
       panel.classList.add("upload-panel--success");
-      statusEl.innerHTML = '<span class="upload-status-icon">&#10003;</span> Upload complete!';
+      statusEl.innerHTML = '<span class="upload-status-icon">' + vsIcon("check-circle", {size: "sm"}) + '</span> Upload complete!';
       if (uploadBtn) {
         uploadBtn.textContent = "Deploy";
-        uploadBtn.disabled = false;
+        uploadBtn.disabled = true;
       }
       const dismissBtn = document.createElement("button");
       dismissBtn.className = "upload-action-btn";
@@ -337,13 +338,16 @@ function setUploadState(state, data) {
       dismissBtn.addEventListener("click", () => setUploadState("idle"));
       actions.appendChild(dismissBtn);
 
-      // Show the Create Page button
       if (lastUploadPortalId) {
+        const isEmail = lastUploadContentMode === "email";
         const createBtn = document.createElement("button");
         createBtn.className = "upload-action-btn upload-action-btn--primary";
-        createBtn.textContent = "Create Page in HubSpot";
+        createBtn.textContent = isEmail ? "Create Email in HubSpot" : "Create Page in HubSpot";
         createBtn.addEventListener("click", () => {
-          window.open(buildHubSpotPagesUrl(lastUploadPortalId, lastUploadDataCenter), "_blank");
+          const url = isEmail
+            ? buildHubSpotEmailUrl(lastUploadPortalId, lastUploadDataCenter)
+            : buildHubSpotPagesUrl(lastUploadPortalId, lastUploadDataCenter);
+          window.open(url, "_blank");
         });
         actions.insertBefore(createBtn, dismissBtn);
       }
@@ -351,10 +355,10 @@ function setUploadState(state, data) {
 
     case "failed":
       panel.classList.add("upload-panel--error");
-      statusEl.innerHTML = '<span class="upload-status-icon">&#10007;</span> Upload failed';
+      statusEl.innerHTML = '<span class="upload-status-icon">' + vsIcon("x-circle", {size: "sm"}) + '</span> Upload failed';
       if (uploadBtn) {
         uploadBtn.textContent = "Deploy";
-        uploadBtn.disabled = false;
+        uploadBtn.disabled = true;
       }
 
       const retryBtn = document.createElement("button");
@@ -387,10 +391,10 @@ function setUploadState(state, data) {
 
     case "fix_done":
       panel.classList.add("upload-panel--fixing");
-      statusEl.innerHTML = '<span class="upload-status-icon">&#10003;</span> AI fixes applied';
+      statusEl.innerHTML = '<span class="upload-status-icon">' + vsIcon("check-circle", {size: "sm"}) + '</span> AI fixes applied';
       if (uploadBtn) {
         uploadBtn.textContent = "Deploy";
-        uploadBtn.disabled = false;
+        uploadBtn.disabled = true;
       }
 
       const redeployBtn = document.createElement("button");
@@ -490,12 +494,13 @@ function handleUploadWsMessage(msg) {
       break;
 
     case "upload_complete":
+      lastUploadContentMode = msg.contentMode || "page";
       setUploadState("success");
       // Update status bar
       const statusText = document.getElementById("status-text");
       if (statusText) statusText.textContent = "Upload complete!";
       // Show celebration popup
-      showDeploySuccessPopup(msg.portalId, msg.dataCenter || "na1", msg.themeName);
+      showDeploySuccessPopup(msg.portalId, msg.dataCenter || "na1", msg.themeName, lastUploadContentMode);
       break;
 
     case "upload_failed":
@@ -538,32 +543,54 @@ function buildHubSpotPagesUrl(portalId, dataCenter) {
   return `https://${host}/page-ui/${portalId}/management/pages/landing`;
 }
 
-function showDeploySuccessPopup(portalId, dataCenter, themeName) {
+function buildHubSpotEmailUrl(portalId, dataCenter) {
+  const host = dataCenter === "eu1" ? "app-eu1.hubspot.com" : "app.hubspot.com";
+  return `https://${host}/email/${portalId}`;
+}
+
+function showDeploySuccessPopup(portalId, dataCenter, themeName, contentMode) {
   lastUploadPortalId = portalId || "";
   lastUploadDataCenter = dataCenter || "na1";
   lastUploadThemeName = themeName || "";
 
   const name = themeName || "your theme";
-  const lpLabel = `${name} Landing Page`;
-  const pagesUrl = portalId ? buildHubSpotPagesUrl(portalId, dataCenter) : "";
+  const isEmail = contentMode === "email";
 
   // Spawn confetti
   spawnConfetti();
 
+  let stepsHtml, actionUrl, actionLabel;
+  if (isEmail) {
+    actionUrl = portalId ? buildHubSpotEmailUrl(portalId, dataCenter) : "";
+    actionLabel = "Create Email in HubSpot";
+    stepsHtml = `
+      <div class="deploy-success__step"><span class="deploy-success__num">1</span> Go to <strong>Marketing &rarr; Email</strong></div>
+      <div class="deploy-success__step"><span class="deploy-success__num">2</span> Click <strong>"Create email"</strong></div>
+      <div class="deploy-success__step"><span class="deploy-success__num">3</span> Select your <strong>"${esc(name)}"</strong> template</div>
+    `;
+  } else {
+    const lpLabel = `${name} Landing Page`;
+    actionUrl = portalId ? buildHubSpotPagesUrl(portalId, dataCenter) : "";
+    actionLabel = "Create Page in HubSpot";
+    stepsHtml = `
+      <div class="deploy-success__step"><span class="deploy-success__num">1</span> Go to <strong>Content &rarr; Landing Pages</strong></div>
+      <div class="deploy-success__step"><span class="deploy-success__num">2</span> Click <strong>"Create" &rarr; "Landing page"</strong></div>
+      <div class="deploy-success__step"><span class="deploy-success__num">3</span> Select the <strong>"${esc(lpLabel)}"</strong> template</div>
+    `;
+  }
+
   const overlay = document.createElement("div");
   overlay.className = "confirm-overlay";
   overlay.innerHTML = `
     <div class="deploy-success">
-      <div class="deploy-success__icon">&#127881;</div>
-      <h2 class="deploy-success__title">Theme deployed!</h2>
+      <div class="deploy-success__icon">${vsIcon("rocket", {size: "md"})}</div>
+      <h2 class="deploy-success__title">${isEmail ? "Email template deployed!" : "Theme deployed!"}</h2>
       <p class="deploy-success__subtitle">"${esc(name)}" is now live on HubSpot.</p>
       <div class="deploy-success__steps">
-        <div class="deploy-success__step"><span class="deploy-success__num">1</span> Go to <strong>Content &rarr; Landing Pages</strong></div>
-        <div class="deploy-success__step"><span class="deploy-success__num">2</span> Click <strong>"Create" &rarr; "Landing page"</strong></div>
-        <div class="deploy-success__step"><span class="deploy-success__num">3</span> Select the <strong>"${esc(lpLabel)}"</strong> template</div>
+        ${stepsHtml}
       </div>
       <div class="deploy-success__actions">
-        ${pagesUrl ? `<a href="${pagesUrl}" target="_blank" class="btn btn--primary deploy-success__link">Create Page in HubSpot &rarr;</a>` : ""}
+        ${actionUrl ? `<a href="${actionUrl}" target="_blank" class="btn btn--primary deploy-success__link">${actionLabel} &rarr;</a>` : ""}
         <button class="btn btn--secondary" id="deploy-success-dismiss">Close</button>
       </div>
     </div>