chordia-ui 4.0.3 → 4.0.4

package/src/components/UpdatedInteractionDetails/UpdatedInteractionDetails.jsx

@@ -5,6 +5,7 @@ import UpdatedInteractionRecording from './UpdatedInteractionRecording';
 import UpdatedCoachingSynthesisCard from './UpdatedCoachingSynthesisCard';
 import UpdatedInteractionSignals from './UpdatedInteractionSignals';
 import UpdatedCompassScore from './UpdatedCompassScore';
+import InteractionQualityOverview from './InteractionQualityOverview';
 import UpdatedThreads from './UpdatedThreads';
 import UpdatedGuidance from './UpdatedGuidance';
 import UpdatedTalkPatterns from './UpdatedTalkPatterns';
@@ -200,6 +201,13 @@ const UpdatedInteractionDetails = ({
   onMenuClick,
   onMarkResolved,
   commentsResolved,
+  // Temporary client-specific flag (host-controlled, later backend-driven).
+  // When true, the OVERVIEW section renders the new InteractionQualityOverview
+  // card instead of the gauge / context grid / lift-analysis row.
+  oldInteractionDetailsView = false,
+  // Host-built data bag consumed by InteractionQualityOverview when
+  // `oldInteractionDetailsView` is on. See that component for the prop shape.
+  qualityOverview = {},
 }) => {
   const [activeTab, setActiveTab] = useState('overview');
   const [expandedSignals, setExpandedSignals] = useState(new Set());
@@ -243,16 +251,22 @@ const UpdatedInteractionDetails = ({
   // when data is present. Stays in sync with the section order below so the
   // scroll-spy reads top-to-bottom.
   const tabs = useMemo(() => {
-    if (!hasProductsServices) return BASE_TABS;
+    // In the new client view the coaching strengths/improvements are surfaced
+    // in the top "Interaction Quality" card, so the dedicated Coaching Summary
+    // section (and its tab) is dropped.
+    const base = oldInteractionDetailsView
+      ? BASE_TABS.filter((t) => t.key !== 'coaching')
+      : BASE_TABS;
+    if (!hasProductsServices) return base;
     const out = [];
-    for (const t of BASE_TABS) {
+    for (const t of base) {
       if (t.key === 'comments') {
         out.push({ key: 'products', label: 'Products & Services' });
       }
       out.push(t);
     }
     return out;
-  }, [hasProductsServices]);
+  }, [hasProductsServices, oldInteractionDetailsView]);
 
   // Scroll-spy: update active tab based on which section's top is nearest the viewport
   useEffect(() => {
@@ -760,6 +774,48 @@ const UpdatedInteractionDetails = ({
           gap: 24,
           alignSelf: 'stretch',
         }}>
+            {oldInteractionDetailsView ? (
+              <InteractionQualityOverview
+                title="Interaction Quality"
+                dateStr={dateStr}
+                direction={direction}
+                agentName={agentName}
+                agentFullName={agentFullName}
+                customerName={customerName}
+                customerFullName={customerFullName}
+                sessionCount={sessionCount}
+                onViewAllSessions={() => setShowSessionDrawer(true)}
+                canEdit={canEditInteraction}
+                onEditInteraction={onEditInteraction}
+                // Reuse the existing context grid behind the "More Details"
+                // toggle so nothing is duplicated and no context data is lost.
+                moreDetailsContent={
+                  <UpdatedInteractionContext
+                    meta={resolvedMeta}
+                    callPurpose={resolvedCallPurpose}
+                    classification={resolvedClassification}
+                    outcomeQuality={externalOutcomeQuality || 'Neutral'}
+                    dimensions={blockDimensions}
+                    resolutionOutcome={resolutionOutcome}
+                    customerIntent={customerIntent}
+                    location={location ?? meta.location ?? meta.location_name ?? ctx.location}
+                    interactionId={interactionId ?? meta.interaction_id}
+                    moreDetails={moreDetails}
+                    canShowEditButton={false}
+                    flatView
+                  />
+                }
+                scorePercent={qualityOverview.scorePercent}
+                scoreOwnerName={qualityOverview.scoreOwnerName}
+                details={qualityOverview.details}
+                summary={qualityOverview.summary}
+                csat={qualityOverview.csat}
+                strengths={qualityOverview.strengths}
+                improvements={qualityOverview.improvements}
+                loading={qualityOverview.loading}
+              />
+            ) : (
+            <>
             {/* Figma node 106-3508: Section Header — horizontal, gap: 16, height: 40, center */}
             <div style={{
               display: 'flex',
@@ -1086,13 +1142,19 @@ const UpdatedInteractionDetails = ({
                 })()}
               </div>
             </div>
+            </>
+            )}
 
           </div>
 
         {/* ═══ COACHING SUMMARY SECTION ═══ */}
-        <div ref={coachingRef} style={{ paddingTop: 24 }}>
-          <UpdatedCoachingSynthesisCard data={coachingLoading ? null : resolvedCoaching} loading={coachingLoading} />
-        </div>
+        {/* Hidden in the new client view — its strengths/improvements are
+            already shown in the top "Interaction Quality" card. */}
+        {!oldInteractionDetailsView && (
+          <div ref={coachingRef} style={{ paddingTop: 24 }}>
+            <UpdatedCoachingSynthesisCard data={coachingLoading ? null : resolvedCoaching} loading={coachingLoading} />
+          </div>
+        )}
 
         {/* ═══ SIGNALS & RECORDING SECTION ═══ */}
         <div ref={signalsRef} style={{

package/src/components/UpdatedInteractionDetails/index.js

@@ -5,6 +5,7 @@ export { default as UpdatedInteractionScores } from './UpdatedInteractionScores.
 export { default as UpdatedInteractionSignals } from './UpdatedInteractionSignals.jsx';
 export { default as UpdatedInteractionRecording } from './UpdatedInteractionRecording.jsx';
 export { default as UpdatedCompassScore } from './UpdatedCompassScore.jsx';
+export { default as InteractionQualityOverview } from './InteractionQualityOverview.jsx';
 export { default as UpdatedThreads } from './UpdatedThreads.jsx';
 export { default as UpdatedGuidance } from './UpdatedGuidance.jsx';
 export { default as UpdatedProductsServices } from './UpdatedProductsServices.jsx';

package/src/components/index.js

@@ -85,6 +85,7 @@ export {
   UpdatedInteractionRecording,
   UpdatedCoachingSynthesisCard,
   UpdatedCompassScore,
+  InteractionQualityOverview,
   UpdatedGuidance,
   UpdatedProductsServices,
 } from './UpdatedInteractionDetails';