@sphoro/bugcatch-web-sdk 0.18.0 → 0.20.0

package/src/panel/rating.js

@@ -0,0 +1,87 @@
+// "How did we do?" — five stars and, after them, an optional note. Drawn under
+// a settled report's conversation (thread.js) and above the form on the first
+// screen (rate-due.js), so both ask the same question the same way.
+
+import * as ICONS from './icons.js';
+import { escapeHtml } from './render.js';
+
+/** What a drawn rating box was drawn from, so a refresh can tell if it moved. */
+export function ratingKey(rating) {
+  return JSON.stringify(rating ? [rating.score, rating.current, rating.comment || null] : null);
+}
+
+/**
+ * Draw the stars into `box` for `report`, with the reader's `rating` so far.
+ *
+ * One tap sends the score; a note is offered after it rather than before,
+ * because a form that asks for a sentence first is a form people close, and
+ * the score is the part that counts. `onRated` hears each saved rating and
+ * `onError` each refusal, for a caller that holds something until it lands.
+ */
+export function drawRating(box, {
+  client, report, rating, justRated = false, question = null, onRated = null, onError = null,
+}) {
+  box.dataset.key = ratingKey(rating);
+  // A rating given for an earlier fix stands, but it is not this fix's: the
+  // stars start empty and the sentence says what the old score was.
+  const shown = rating?.current ? rating.score : 0;
+  const asked = !rating
+    ? (question || 'How did we do?')
+    : !rating.current
+      ? `You rated an earlier fix ${rating.score} out of 5. How did this one go?`
+      : justRated
+        ? 'Thanks — the team will see that.'
+        : `You rated this ${rating.score} out of 5.`;
+  const askNote = justRated && rating?.current && !rating.comment;
+  box.innerHTML = `
+      <p class="fr-q">${escapeHtml(asked)}</p>
+      <div class="stars" role="group" aria-label="Rate how this was handled, 1 to 5">${[1, 2, 3, 4, 5].map((n) => `
+        <button type="button" data-score="${n}" aria-pressed="${n === shown}" aria-label="${n} out of 5${n === 1 ? ', poor' : n === 5 ? ', great' : ''}" class="${n <= shown ? 'on' : ''}">${ICONS.star}</button>`).join('')}
+      </div>
+      ${rating?.current && rating.comment ? `<p class="fr-said">“${escapeHtml(rating.comment)}”</p>` : ''}
+      ${askNote ? `
+      <div class="fr-note">
+        <textarea maxlength="2000" aria-label="Add a note to your rating" placeholder="${rating.score <= 2 ? 'What went wrong? (optional)' : 'Anything to add? (optional)'}"></textarea>
+        <button type="button" data-act="rating-note">Add note</button>
+      </div>` : ''}
+      ${rating ? '' : '<p class="fr-hint">1 is poor, 5 is great.</p>'}
+      <p class="feedback-status" role="status"></p>`;
+
+  const stars = [...box.querySelectorAll('[data-score]')];
+  const paint = (upTo) => stars.forEach((b) => b.classList.toggle('on', Number(b.dataset.score) <= upTo));
+  const lock = (on) => box.querySelectorAll('button, textarea').forEach((el) => { el.disabled = on; });
+  const status = box.querySelector('.feedback-status');
+
+  async function send(score, comment) {
+    lock(true);
+    status.textContent = '';
+    try {
+      const saved = await client.rate(report.id, { score, comment });
+      drawRating(box, {
+        client, report, rating: saved, justRated: true, question, onRated, onError,
+      });
+      box.querySelector('.fr-note textarea')?.focus();
+      onRated?.(saved);
+    } catch (err) {
+      status.textContent = err.message;
+      lock(false);
+      paint(shown);
+      onError?.(err);
+    }
+  }
+
+  for (const btn of stars) {
+    const n = Number(btn.dataset.score);
+    btn.addEventListener('mouseenter', () => paint(n));
+    btn.addEventListener('focus', () => paint(n));
+    btn.addEventListener('blur', () => paint(shown));
+    btn.addEventListener('click', () => send(n));
+  }
+  box.querySelector('.stars').addEventListener('mouseleave', () => paint(shown));
+
+  box.querySelector('[data-act="rating-note"]')?.addEventListener('click', () => {
+    const note = box.querySelector('.fr-note textarea').value.trim();
+    if (!note) { box.querySelector('.fr-note')?.remove(); return; }
+    send(rating.score, note);
+  });
+}

package/src/panel/refs.js

@@ -137,7 +137,7 @@ export function mountReferences(ctx) {
     const many = kinds.length > 6;
     refsBox.innerHTML = `
       <div class="ask-head">
-        <span class="avatar" aria-hidden="true">${ICONS.sparkle}</span>
+        <span class="avatar orb" aria-hidden="true"></span>
         <div>
           <strong>${escapeHtml(head[0])}</strong>
           <p class="why">${escapeHtml(head[1])}</p>

package/src/panel/render.js

@@ -6,18 +6,26 @@
 import * as ICONS from './icons.js';
 
 /**
- * The panel's header, on every screen. The assistant's avatar carries the
+ * The panel's header, on every screen. The assistant's orb carries the
  * identity; `back` adds the way out of a report to the list of them.
+ *
+ * `theme` is the name of the theme in force ("Light", "Dark", "System
+ * default"); given one, the header carries the button that moves to the next.
+ * The button holds all three glyphs and the stylesheet shows the one matching
+ * the host element's class, so it is right on every screen without anyone
+ * redrawing it. Its press is handled once, on the scrim (index.js).
  */
-export function headHtml({ title, sub, id = '', back = false }) {
+export function headHtml({ title, sub, id = '', back = false, theme = '' }) {
   return `
     <div class="head">
       ${back ? `<button class="icon-btn back" type="button" data-act="back" aria-label="Back to your reports">${ICONS.back}</button>` : ''}
-      <div class="mark" aria-hidden="true">${ICONS.sparkle}</div>
+      <span class="orb mark" aria-hidden="true"></span>
       <div class="titles">
         <h2${id ? ` id="${id}"` : ''}>${escapeHtml(title)}</h2>
         <p>${escapeHtml(sub)}</p>
       </div>
+      ${theme ? `<button class="icon-btn theme" type="button" data-act="theme" title="Theme: ${escapeHtml(theme)}"
+        aria-label="Theme: ${escapeHtml(theme)}. Change theme"><span class="m-light">${ICONS.sun}</span><span class="m-dark">${ICONS.moon}</span><span class="m-auto">${ICONS.auto}</span></button>` : ''}
       <button class="icon-btn" type="button" data-act="close" aria-label="Close">${ICONS.close}</button>
     </div>`;
 }

package/src/panel/signin.js

@@ -37,7 +37,7 @@ export function mountSignIn(ctx) {
     // The call offer is the same errand as the form, so it goes with it — and
     // comes back only if the API had already said this project can take one.
     if (shut) callBtn.hidden = true;
-    else if (ctx.callOffered()) callBtn.hidden = false;
+    else if (ctx.callOffered() && !ctx.mustRate()) callBtn.hidden = false;
   }
 
   function drawWhoami() {