kyd-shared-badge 0.3.134 → 0.3.136

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.134",
+  "version": "0.3.136",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/SharedBadgeDisplay.tsx

@@ -497,66 +497,92 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless, selfCheck = false,
     </div>
   );
 
-  const RiskSection = () => (
-    <div className={`${wrapperMaxWidth} mx-auto`}>
-      <div className={'rounded-xl shadow-xl p-6 sm:p-8 mt-6 border'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
-        <Reveal headless={isHeadless} as={'h3'} offsetY={8} className={'text-2xl font-bold'} style={{ color: 'var(--text-main)' }}>KYD Risk</Reveal>
-        <Reveal headless={isHeadless}>
-          <div className="mt-4">
-            <GraphInsights
-              graphInsights={graphInsights}
-              categories={genreMapping?.['Risk'] as string[]}
-              genre={'Risk'}
-              scoringSummary={scoringSummary}
-              headless={isHeadless}
-            />
-          </div>
-        </Reveal>
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 w-full items-stretch py-8 kyd-avoid-break" style={{ borderColor: 'var(--icon-button-secondary)' }}>
-          <Reveal headless={isHeadless} className="lg:col-span-8 h-full">
-            <CategoryBars
-              title={'KYD Risk - Category Insights'}
-              categories={genreMapping?.['Risk'] as string[]}
-              categoryScores={categoryScores}
-              barColor={barColor}
-              getCategoryTooltipCopy={getCategoryTooltipCopy}
-              barHeight={16}
-              categoryTargets={roleTargets}
-            />
-          </Reveal>
-          <Reveal headless={isHeadless} className="lg:col-span-4 w-full ml-0 lg:ml-20 hidden lg:flex flex-col items-start justify-start" delayMs={80}>
-            <div className={'text-sm font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Top Contributing Factors</div>
-            <TopContributingFactors categories={genreMapping?.['Risk'] as string[] || []} categoryTopByGraph={categoryTopByGraph as any} />
-          </Reveal>
-        </div>
-        {badgeData.optOutScreening ? (
-          <Reveal headless={isHeadless} className={'p-4 rounded-lg border mt-6'} style={{ backgroundColor: 'var(--icon-button-secondary)', borderColor: 'var(--icon-button-secondary)' }}>
-            <div className="flex items-start">
-              <span className="h-5 w-5 mr-3 mt-0.5 flex-shrink-0" style={{ color: yellow }}>
-                <FiAlertTriangle size={20} />
-              </span>
-              <div>
-                <h4 className={'font-bold'} style={{ color: 'var(--text-main)' }}>User Opted Out of Screening</h4>
-                <p className={'text-sm mt-1'} style={{ color: 'var(--text-secondary)' }}>
-                  The user chose not to participate in the automated sanctions and risk screening process. The risk score reflects this decision and is for informational purposes only.
-                </p>
-              </div>
+  const RiskSection = () => {
+    const adjustedCategoryScores = (() => {
+      if (!badgeData.optOutScreening) return categoryScores;
+      try {
+        const copy = { ...categoryScores } as Record<string, any>;
+        const key = Object.keys(copy).find(k => /sanctions?.*criminal|sanction|criminal/i.test(k));
+        if (key) {
+          const prev = copy[key] || {};
+          const business = { ...(prev.business || {}), percent_progress_signed: 0, percent_progress: 0 };
+          const combined = { ...(prev.combined || {}), percent_progress_signed: 0, percent_progress: 0 };
+          copy[key] = { ...prev, business, combined };
+        }
+        return copy;
+      } catch {
+        return categoryScores;
+      }
+    })();
+
+    const getRiskTooltipCopy = (category: string) => {
+      if (badgeData.optOutScreening && /sanction|criminal/i.test(category)) {
+        return 'User opted out of screening; score shown as 0.';
+      }
+      return getCategoryTooltipCopy(category);
+    };
+
+    return (
+      <div className={`${wrapperMaxWidth} mx-auto`}>
+        <div className={'rounded-xl shadow-xl p-6 sm:p-8 mt-6 border'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
+          <Reveal headless={isHeadless} as={'h3'} offsetY={8} className={'text-2xl font-bold'} style={{ color: 'var(--text-main)' }}>KYD Risk</Reveal>
+          <Reveal headless={isHeadless}>
+            <div className="mt-4">
+              <GraphInsights
+                graphInsights={graphInsights}
+                categories={genreMapping?.['Risk'] as string[]}
+                genre={'Risk'}
+                scoringSummary={scoringSummary}
+                headless={isHeadless}
+              />
             </div>
           </Reveal>
-        ) : (
-
-          <>
-            <Reveal headless={isHeadless} className={'mb-0 mt-6'}>
-              <SanctionsMatches ss={assessmentResult?.screening_sources} />
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 w-full items-stretch py-8 kyd-avoid-break" style={{ borderColor: 'var(--icon-button-secondary)' }}>
+            <Reveal headless={isHeadless} className="lg:col-span-8 h-full">
+              <CategoryBars
+                title={'KYD Risk - Category Insights'}
+                categories={genreMapping?.['Risk'] as string[]}
+                categoryScores={adjustedCategoryScores}
+                barColor={barColor}
+                getCategoryTooltipCopy={getRiskTooltipCopy}
+                barHeight={16}
+                categoryTargets={roleTargets}
+              />
             </Reveal>
-            <Reveal headless={isHeadless}>
-              <IpRiskAnalysisDisplay ipRiskAnalysis={screening_sources?.ip_risk_analysis} />
+            <Reveal headless={isHeadless} className="lg:col-span-4 w-full ml-0 lg:ml-20 hidden lg:flex flex-col items-start justify-start" delayMs={80}>
+              <div className={'text-sm font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Top Contributing Factors</div>
+              <TopContributingFactors categories={genreMapping?.['Risk'] as string[] || []} categoryTopByGraph={categoryTopByGraph as any} />
             </Reveal>
-          </>
-        )}
+          </div>
+          {badgeData.optOutScreening ? (
+            <Reveal headless={isHeadless} className={'p-4 rounded-lg border mt-6'} style={{ backgroundColor: 'var(--icon-button-secondary)', borderColor: 'var(--icon-button-secondary)' }}>
+              <div className="flex items-start">
+                <span className="h-5 w-5 mr-3 mt-0.5 flex-shrink-0" style={{ color: yellow }}>
+                  <FiAlertTriangle size={20} />
+                </span>
+                <div>
+                  <h4 className={'font-bold'} style={{ color: 'var(--text-main)' }}>User Opted Out of Screening</h4>
+                  <p className={'text-sm mt-1'} style={{ color: 'var(--text-secondary)' }}>
+                    The user chose not to participate in the automated sanctions and risk screening process. The risk score reflects this decision and is for informational purposes only.
+                  </p>
+                </div>
+              </div>
+            </Reveal>
+          ) : (
+            
+            <>
+              <Reveal headless={isHeadless} className={'mb-0 mt-6'}>
+                <SanctionsMatches ss={assessmentResult?.screening_sources} />
+              </Reveal>
+              <Reveal headless={isHeadless}>
+                <IpRiskAnalysisDisplay ipRiskAnalysis={screening_sources?.ip_risk_analysis} />
+              </Reveal>
+            </>
+          )}
+        </div>
       </div>
-    </div>
-  );
+    );
+  };
 
   // const AiSection = () => (
   //   <div className={`${wrapperMaxWidth} mx-auto`}>