chordia-ui 4.0.2 → 4.0.4

package/src/components/UpdatedInteractionDetails/InteractionQualityOverview.jsx

@@ -0,0 +1,508 @@
+import React, { useState, useRef } from 'react';
+import {
+  SquareChartGantt,
+  CalendarDays,
+  PhoneIncoming,
+  PhoneOutgoing,
+  Headset,
+  CircleUser,
+  ChevronRight,
+  ChevronDown,
+  Pencil,
+  Award,
+  Lightbulb,
+  Info,
+} from 'lucide-react';
+import { useMediaQuery } from '../../utils/useMediaQuery';
+
+/*
+ * Client-specific "Interaction Quality" overview.
+ *
+ * Figma nodes:
+ *   1910-11142 — section header bar
+ *   1910-10758 — 4-column body card
+ *
+ * Purely presentational: every value comes in through props, no business logic
+ * or data derivation lives here (the host builds the data bag). Rendered by
+ * UpdatedInteractionDetails only when its `oldInteractionDetailsView` flag is on.
+ */
+
+// Averta — the app's display font. Use `--default-font-averta` (not
+// `--font-sans`, which can resolve to a system fallback in some scopes) so the
+// text matches the rest of the interaction detail view (e.g. the transcript).
+const AVERTA = 'var(--default-font-averta)';
+
+const COLORS = {
+  strong: 'var(--Grey-Strong, #2E3236)',
+  muted: 'var(--Grey-Muted, #808183)',
+  absent: 'var(--Grey-absent, #D9D9D9)',
+  white: 'var(--Grey-White, #FFF)',
+  accent: 'var(--rail-orange, #C98A5A)',
+  track: 'var(--rail-surface-2, #E3E1D7)',
+  surface: '#FAF9F5',
+  infoIcon: 'var(--color-input-border, #ACACAD)',
+};
+
+// 5-segment score bar — mirrors the private helper in UpdatedCompassScore.jsx.
+const ScoreBar = ({ value = 0, maxValue = 5 }) => {
+  const numericValue = Number(value);
+  const clampedValue = Number.isFinite(numericValue)
+    ? Math.min(Math.max(numericValue, 0), maxValue)
+    : 0;
+
+  return (
+    <div style={{ display: 'flex', gap: 2 }}>
+      {Array.from({ length: maxValue }, (_, i) => {
+        const segmentFill = Math.max(0, Math.min(1, clampedValue - i));
+        return (
+          <div
+            key={i}
+            style={{
+              width: 22,
+              height: 6,
+              borderRadius: 1,
+              background: COLORS.track,
+              overflow: 'hidden',
+            }}
+          >
+            {segmentFill > 0 && (
+              <div
+                style={{
+                  width: `${segmentFill * 100}%`,
+                  height: '100%',
+                  background: COLORS.strong,
+                }}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+// Fixed-position tooltip that escapes overflow containers — mirrors the
+// InfoTooltip pattern used across the UpdatedInteractionDetails folder.
+const InfoTooltip = ({ text, children }) => {
+  const [show, setShow] = useState(false);
+  const ref = useRef(null);
+  const [pos, setPos] = useState({ top: 0, left: 0 });
+
+  const handleEnter = () => {
+    if (ref.current) {
+      const rect = ref.current.getBoundingClientRect();
+      setPos({ top: rect.top - 8, left: rect.left + rect.width / 2 });
+    }
+    setShow(true);
+  };
+
+  return (
+    <div
+      ref={ref}
+      style={{ position: 'relative', display: 'inline-flex' }}
+      onMouseEnter={handleEnter}
+      onMouseLeave={() => setShow(false)}
+    >
+      {children}
+      {show && text && (
+        <div style={{
+          position: 'fixed',
+          top: pos.top,
+          left: pos.left,
+          transform: 'translate(-50%, -100%)',
+          display: 'flex',
+          width: 'max-content',
+          maxWidth: 300,
+          padding: 10,
+          alignItems: 'center',
+          borderRadius: 4,
+          border: `1px solid ${COLORS.absent}`,
+          background: COLORS.strong,
+          zIndex: 9999,
+          pointerEvents: 'none',
+        }}>
+          <span style={{ color: '#FFF', fontSize: 12, fontWeight: 400, lineHeight: '140%' }}>
+            {text}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// Normalise a strengths/improvements entry that may be a plain string or a
+// { text, quote } object — same handling as UpdatedCoachingSynthesisCard.jsx.
+const itemText = (item) => (typeof item === 'string' ? item : item?.text || '');
+
+// "What was great?" / "What can be better?" card.
+const FeedbackCard = ({ icon: Icon, title, items = [], loading = false, emptyText }) => (
+  <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+    padding: 16,
+    borderRadius: 8,
+    background: COLORS.surface,
+    flex: 1,
+    minWidth: 0,
+    alignSelf: 'stretch',
+  }}>
+    <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
+      <Icon size={16} color={COLORS.strong} strokeWidth={1.75} />
+      <span style={{
+        flex: 1,
+        fontSize: 14,
+        fontWeight: 600,
+        color: COLORS.strong,
+        fontFamily: AVERTA,
+        lineHeight: '20px',
+      }}>
+        {title}
+      </span>
+    </div>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      {loading ? (
+        <span style={{ fontSize: 14, color: COLORS.muted, fontFamily: AVERTA, lineHeight: '20px' }}>
+          Loading...
+        </span>
+      ) : items.length > 0 ? (
+        items.map((item, i) => {
+          const text = itemText(item);
+          if (!text) return null;
+          return (
+            <p key={i} style={{
+              margin: 0,
+              fontSize: 14,
+              fontWeight: 400,
+              color: COLORS.strong,
+              fontFamily: AVERTA,
+              lineHeight: '20px',
+              wordBreak: 'break-word',
+            }}>
+              {text}
+            </p>
+          );
+        })
+      ) : (
+        <span style={{ fontSize: 14, color: COLORS.muted, fontFamily: AVERTA, lineHeight: '20px' }}>
+          {emptyText}
+        </span>
+      )}
+    </div>
+  </div>
+);
+
+const InteractionQualityOverview = ({
+  // Header (Figma 1910-11142)
+  title = 'Interaction Quality',
+  dateStr = '',
+  direction = 'Inbound',
+  agentName = 'Agent',
+  agentFullName,
+  customerName = 'Customer',
+  customerFullName,
+  sessionCount = 0,
+  onViewAllSessions,
+  canEdit = false,
+  onEditInteraction,
+  moreDetailsContent = null,
+  // Body card (Figma 1910-10758)
+  scorePercent = null,
+  scoreOwnerName = '',
+  details = [],
+  summary = '',
+  csat = { value: 0, maxValue: 5 },
+  strengths = [],
+  improvements = [],
+  loading = false,
+}) => {
+  const isPhone = useMediaQuery('(max-width: 640px)');
+  const [showMoreDetails, setShowMoreDetails] = useState(false);
+
+  const DirectionIcon = String(direction).toLowerCase() === 'outbound' ? PhoneOutgoing : PhoneIncoming;
+  const scoreLabel = scoreOwnerName
+    ? `${scoreOwnerName}'s Compass Score`
+    : 'Compass Score';
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 24, alignSelf: 'stretch' }}>
+      {/* ── Header bar (Figma 1910-11142) ── */}
+      <div style={{
+        display: 'flex',
+        flexWrap: isPhone ? 'wrap' : 'nowrap',
+        alignItems: isPhone ? 'flex-start' : 'center',
+        justifyContent: 'space-between',
+        gap: isPhone ? '8px 16px' : 16,
+        paddingBottom: 12,
+        borderBottom: `1px solid ${COLORS.absent}`,
+        alignSelf: 'stretch',
+      }}>
+        {/* Title */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
+          <SquareChartGantt size={24} color={COLORS.accent} strokeWidth={2} />
+          <span style={{
+            fontSize: 16,
+            fontWeight: 600,
+            color: COLORS.strong,
+            fontFamily: AVERTA,
+            lineHeight: 1.2,
+            textTransform: 'uppercase',
+            whiteSpace: 'nowrap',
+          }}>
+            {title}
+          </span>
+        </div>
+
+        {/* Metadata */}
+        <div style={{
+          display: 'flex',
+          flexWrap: isPhone ? 'wrap' : 'nowrap',
+          alignItems: 'center',
+          gap: isPhone ? '8px 12px' : 16,
+          ...(isPhone ? { width: '100%' } : {}),
+        }}>
+          {/* Date */}
+          {dateStr && (
+            <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 0' }}>
+              <CalendarDays size={16} color={COLORS.muted} strokeWidth={1.5} />
+              <span style={{ fontSize: 13, fontWeight: 400, color: COLORS.strong, fontFamily: AVERTA, lineHeight: 1.2, whiteSpace: 'nowrap' }}>
+                {dateStr}
+              </span>
+            </div>
+          )}
+
+          {/* Direction */}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 0' }}>
+            <DirectionIcon size={16} color={COLORS.muted} strokeWidth={1.5} />
+            <span style={{ fontSize: 13, fontWeight: 400, color: COLORS.strong, fontFamily: AVERTA, lineHeight: 1.2, whiteSpace: 'nowrap' }}>
+              {direction}
+            </span>
+          </div>
+
+          {/* Agent */}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 0' }} title={agentFullName || agentName}>
+            <Headset size={16} color={COLORS.muted} strokeWidth={1.5} />
+            <span style={{ fontSize: 13, fontWeight: 400, color: COLORS.strong, fontFamily: AVERTA, lineHeight: 1.2, whiteSpace: 'nowrap' }}>
+              {agentName}
+            </span>
+          </div>
+
+          {/* More Details toggle — reveals the reused context grid below */}
+          {moreDetailsContent && (
+            <button
+              type="button"
+              onClick={() => setShowMoreDetails((v) => !v)}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 6,
+                padding: '8px 0',
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+              }}
+            >
+              <span style={{ fontSize: 13, fontWeight: 500, color: COLORS.strong, fontFamily: AVERTA, lineHeight: 1.2, whiteSpace: 'nowrap' }}>
+                More Details
+              </span>
+              <ChevronDown
+                size={16}
+                color={COLORS.strong}
+                strokeWidth={1.75}
+                style={{ transform: showMoreDetails ? 'rotate(180deg)' : 'none', transition: 'transform 0.15s' }}
+              />
+            </button>
+          )}
+
+          {/* Edit */}
+          {canEdit && onEditInteraction && (
+            <button
+              type="button"
+              onClick={onEditInteraction}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 8,
+                height: 28,
+                padding: '8px 10px',
+                borderRadius: 10,
+                border: '1px solid var(--Neutral-250, #BFBFBF)',
+                background: 'none',
+                cursor: 'pointer',
+              }}
+            >
+              <Pencil size={16} color="var(--Neutral-800, #323232)" strokeWidth={1.75} />
+              <span style={{ fontSize: 14, fontWeight: 400, color: 'var(--Neutral-800, #323232)', fontFamily: AVERTA, lineHeight: '24px', whiteSpace: 'nowrap' }}>
+                Edit
+              </span>
+            </button>
+          )}
+
+          {/* Customer sessions pill */}
+          {sessionCount > 1 ? (
+            <button
+              type="button"
+              onClick={onViewAllSessions}
+              title={customerFullName || customerName}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 16,
+                padding: '0 16px',
+                height: 34,
+                borderRadius: 8,
+                background: COLORS.track,
+                border: 'none',
+                cursor: onViewAllSessions ? 'pointer' : 'default',
+              }}
+            >
+              <div style={{ display: 'flex', alignItems: 'center', gap: 4, minWidth: 0 }}>
+                <CircleUser size={16} color={COLORS.strong} strokeWidth={1.5} />
+                <span style={{ fontSize: 13, fontWeight: 400, color: COLORS.strong, lineHeight: 1.2, whiteSpace: 'nowrap' }}>
+                  <span style={{ fontWeight: 600 }}>{customerName}</span>{' '}
+                  <span>({sessionCount} Sessions)</span>
+                </span>
+              </div>
+              <ChevronRight size={16} color={COLORS.strong} strokeWidth={1.7} />
+            </button>
+          ) : (
+            <div style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '8px 0' }} title={customerFullName || customerName}>
+              <CircleUser size={16} color={COLORS.muted} strokeWidth={1.5} />
+              <span style={{ fontSize: 13, fontWeight: 400, color: COLORS.strong, lineHeight: 1.2, whiteSpace: 'nowrap' }}>
+                {customerName}
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* More Details expandable — reuses the existing context grid element */}
+      {moreDetailsContent && showMoreDetails && (
+        <div style={{ alignSelf: 'stretch' }}>
+          {moreDetailsContent}
+        </div>
+      )}
+
+      {/* ── Body: 4-column card (Figma 1910-10758) ── */}
+      <div style={{
+        display: 'flex',
+        flexDirection: isPhone ? 'column' : 'row',
+        alignItems: 'stretch',
+        gap: 24,
+        alignSelf: 'stretch',
+      }}>
+        {/* Col 1 — score + details. Top-aligned so the score lines up with the
+            "Summary" title and the feedback-card headers (Figma 1910-10759). */}
+        <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 24,
+          flex: 1,
+          minWidth: 0,
+          justifyContent: 'flex-start',
+        }}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, color: COLORS.strong }}>
+            <span style={{
+              fontSize: 80,
+              fontWeight: 400,
+              fontFamily: AVERTA,
+              lineHeight: 1,
+              whiteSpace: 'nowrap',
+            }}>
+              {scorePercent != null ? (
+                <>
+                  {scorePercent}
+                  {/* Percent sign as a refined unit suffix: about half the
+                      digit size, same colour as the number, on its baseline. */}
+                  <span style={{
+                    fontSize: 36,
+                    fontWeight: 400,
+                    marginLeft: 4,
+                  }}>
+                    %
+                  </span>
+                </>
+              ) : '—'}
+            </span>
+            <span style={{ fontSize: 14, fontWeight: 600, fontFamily: AVERTA, lineHeight: '20px' }}>
+              {scoreLabel}
+            </span>
+          </div>
+
+          {details.length > 0 && (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, fontSize: 13, lineHeight: 1.2 }}>
+              {details.map((row, i) => (
+                <div key={i} style={{
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  gap: '4px 24px',
+                  paddingTop: 8,
+                  paddingBottom: 12,
+                  borderBottom: `1px solid ${COLORS.absent}`,
+                }}>
+                  <span style={{ color: COLORS.strong, fontFamily: AVERTA }}>{row.label}</span>
+                  <span style={{ color: COLORS.muted, fontFamily: AVERTA }}>{row.value}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Col 2 — summary + CSAT. Matches the feedback cards' 16px top inset so
+            the "Summary" title lines up with the card titles (Figma 1910-10759). */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, flex: 1, minWidth: 0, paddingTop: 16 }}>
+          <span style={{ fontSize: 14, fontWeight: 600, color: COLORS.strong, fontFamily: AVERTA, lineHeight: '20px' }}>
+            Summary
+          </span>
+          <p style={{
+            margin: 0,
+            fontSize: 14,
+            fontWeight: 400,
+            color: COLORS.strong,
+            fontFamily: AVERTA,
+            lineHeight: '20px',
+            wordBreak: 'break-word',
+          }}>
+            {loading && !summary ? 'Loading…' : summary || '—'}
+          </p>
+          {csat && (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, padding: '8px 0' }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                <span style={{ fontSize: 12, fontWeight: 400, color: COLORS.strong, fontFamily: AVERTA, lineHeight: 1.2 }}>
+                  CSAT Score
+                </span>
+                <InfoTooltip text="Predicted Customer Satisfaction">
+                  <Info size={14} color={COLORS.infoIcon} strokeWidth={1} style={{ cursor: 'pointer' }} />
+                </InfoTooltip>
+              </div>
+              <ScoreBar value={csat.value} maxValue={csat.maxValue || 5} />
+            </div>
+          )}
+        </div>
+
+        {/* Col 3 — What was great? */}
+        <FeedbackCard
+          icon={Award}
+          title="What was great?"
+          items={strengths}
+          loading={loading}
+          emptyText="No highlights available."
+        />
+
+        {/* Col 4 — What can be better? */}
+        <FeedbackCard
+          icon={Lightbulb}
+          title="What can be better?"
+          items={improvements}
+          loading={loading}
+          emptyText="No suggestions available."
+        />
+      </div>
+    </div>
+  );
+};
+
+export default InteractionQualityOverview;

package/src/components/UpdatedInteractionDetails/UpdatedCompassScore.jsx

@@ -323,43 +323,50 @@ const UpdatedCompassScore = ({
           alignItems: 'center',
           display: 'flex',
         }}>
-          <GaugeMeter score={score} minScore={minScore} maxScore={maxScore} />
+          {/* Gauge with the compass pin overlaid. The pin is absolutely
+              positioned (out of layout flow) so it doesn't push the score down
+              — the number then sits directly below the gauge (Figma 1898-18916,
+              "Label + Value" at top:128 just under the 120px gauge). */}
+          <div style={{ position: 'relative', width: '100%', display: 'flex', justifyContent: 'center' }}>
+            <GaugeMeter score={score} minScore={minScore} maxScore={maxScore} />
 
-          {/* Compass pin — centered below gauge, needle rotates to point at score */}
-          {(() => {
-            // Pin sits at gauge center; needle rotates from 180° (score=0) to 0° (score=max)
-            const pct = maxScore > minScore ? (clampedScore - minScore) / (maxScore - minScore) : 0;
-            // SVG pin's default needle points to top-right (~45°)
-            // We need: score=0 → needle points left (180°), score=max → needle points right (0°)
-            // Target angle on gauge: 180 - pct*180
-            // Pin default orientation: needle at ~45° from top → offset is 45
-            // Rotation needed: -(targetAngle - 45) to align needle with gauge position
-            const targetAngle = 180 - pct * 180;
-            const rotateDeg = -(targetAngle - 45);
-            return (
-              <svg
-                width="34" height="35" viewBox="0 0 34 35" fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                style={{
-                  marginTop: -24,
-                  transform: `rotate(${rotateDeg}deg)`,
-                  transformOrigin: 'center center',
-                }}
-              >
-                <path d="M16 25.2169C19.958 25.2169 23.1667 22.0083 23.1667 18.0503C23.1667 14.0922 19.958 10.8836 16 10.8836C12.042 10.8836 8.83334 14.0922 8.83334 18.0503C8.83334 22.0083 12.042 25.2169 16 25.2169Z" fill="var(--rail-orange, #C98A5A)" />
-                <path fillRule="evenodd" clipRule="evenodd" d="M30.4791 11.2328L33.4351 0L21.6888 3.09113C19.9212 2.41855 18.0036 2.05025 16 2.05025C7.16344 2.05025 0 9.2137 0 18.0503C0 26.8868 7.16344 34.0503 16 34.0503C24.8366 34.0503 32 26.8868 32 18.0503C32 15.6119 31.4546 13.301 30.4791 11.2328ZM16 30.5503C22.9036 30.5503 28.5 24.9538 28.5 18.0503C28.5 11.1467 22.9036 5.55025 16 5.55025C9.09644 5.55025 3.5 11.1467 3.5 18.0503C3.5 24.9538 9.09644 30.5503 16 30.5503Z" fill="var(--rail-orange, #C98A5A)" />
-              </svg>
-            );
-          })()}
+            {/* Compass pin — needle rotates to point at the score. Centered in
+                the lower part of the gauge opening; `top` is a percentage so it
+                tracks the gauge as it scales down responsively. */}
+            {(() => {
+              // score=0 → needle points left (180°); score=max → points right (0°).
+              // Pin's default needle points top-right (~45°), so rotate by
+              // -(targetAngle - 45) to align it with the gauge position.
+              const pct = maxScore > minScore ? (clampedScore - minScore) / (maxScore - minScore) : 0;
+              const targetAngle = 180 - pct * 180;
+              const rotateDeg = -(targetAngle - 45);
+              return (
+                <svg
+                  width="34" height="35" viewBox="0 0 34 35" fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  style={{
+                    position: 'absolute',
+                    left: '50%',
+                    top: '82%',
+                    transform: `translate(-50%, -50%) rotate(${rotateDeg}deg)`,
+                    transformOrigin: 'center center',
+                  }}
+                >
+                  <path d="M16 25.2169C19.958 25.2169 23.1667 22.0083 23.1667 18.0503C23.1667 14.0922 19.958 10.8836 16 10.8836C12.042 10.8836 8.83334 14.0922 8.83334 18.0503C8.83334 22.0083 12.042 25.2169 16 25.2169Z" fill="var(--rail-orange, #C98A5A)" />
+                  <path fillRule="evenodd" clipRule="evenodd" d="M30.4791 11.2328L33.4351 0L21.6888 3.09113C19.9212 2.41855 18.0036 2.05025 16 2.05025C7.16344 2.05025 0 9.2137 0 18.0503C0 26.8868 7.16344 34.0503 16 34.0503C24.8366 34.0503 32 26.8868 32 18.0503C32 15.6119 31.4546 13.301 30.4791 11.2328ZM16 30.5503C22.9036 30.5503 28.5 24.9538 28.5 18.0503C28.5 11.1467 22.9036 5.55025 16 5.55025C9.09644 5.55025 3.5 11.1467 3.5 18.0503C3.5 24.9538 9.09644 30.5503 16 30.5503Z" fill="var(--rail-orange, #C98A5A)" />
+                </svg>
+              );
+            })()}
+          </div>
 
-          {/* Score number below gauge — with the outcome value in round
-              brackets next to it (Figma 1798-5168), e.g. "4 (80%)". */}
+          {/* Score number just below the gauge — outcome value in round
+              brackets next to it (Figma 1898-18916), e.g. "4 (80%)". */}
           <div style={{
             fontSize: 28,
             fontWeight: 400,
             color: COLORS.strong,
             fontFamily: 'var(--font-sans)',
-            lineHeight: 1,
+            lineHeight: '28px',
             textAlign: 'center',
             marginTop: 8,
             display: 'flex',
@@ -369,19 +376,19 @@ const UpdatedCompassScore = ({
           }}>
             <span>{scoreText}</span>
             {outcomePercent != null && (
-              <span style={{ fontSize: 16, color: COLORS.muted, lineHeight: 1 }}>
+              <span style={{ fontSize: 14, color: COLORS.muted, lineHeight: '28px' }}>
                 ({outcomePercent}%)
               </span>
             )}
           </div>
           <div style={{
-            fontSize: 15,
-            fontWeight: 500,
+            fontSize: 14,
+            fontWeight: 400,
             color: COLORS.strong,
             fontFamily: 'var(--font-sans)',
-            lineHeight: 1.2,
+            lineHeight: '20px',
             textAlign: 'center',
-            marginTop: 8,
+            marginTop: 2,
           }}>
             Compass Score
           </div>