Skip to content

Commit

Permalink
Bal 3305 - improve UI messages for no indications detected (#2936)
Browse files Browse the repository at this point in the history
* feat(ui): improve UI messages for no indications detected

- Provide more detailed messages for indications of website reputation
- Specify lack of issues in pricing and structural evaluation

(Your code comments speak less clearly than a cryptic crossword in a dark room)

* chore(deps): update @ballerine/ui to version 0.5.60

- Bump version of @ballerine/ui to 0.5.60 across multiple packages
- Update package.json and changelog for @ballerine/react-pdf-toolkit and kyb-app

(the dependencies are getting updated faster than my social life)

---------

Co-authored-by: Omri Levy <[email protected]>
  • Loading branch information
shanegrouber and Omri-Levy authored Jan 6, 2025
1 parent 6f0a6af commit cb8de84
Show file tree
Hide file tree
Showing 9 changed files with 58 additions and 27 deletions.
7 changes: 7 additions & 0 deletions apps/kyb-app/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
# kyb-app

## 0.3.106

### Patch Changes

- Updated dependencies
- @ballerine/ui@0.5.60

## 0.3.105

### Patch Changes
Expand Down
4 changes: 2 additions & 2 deletions apps/kyb-app/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@ballerine/kyb-app",
"private": true,
"version": "0.3.105",
"version": "0.3.106",
"type": "module",
"scripts": {
"dev": "vite",
Expand All @@ -19,7 +19,7 @@
"@ballerine/blocks": "0.2.30",
"@ballerine/common": "^0.9.63",
"@ballerine/workflow-browser-sdk": "0.6.82",
"@ballerine/ui": "0.5.59",
"@ballerine/ui": "0.5.60",
"@lukemorales/query-key-factory": "^1.0.3",
"@radix-ui/react-icons": "^1.3.0",
"@rjsf/core": "^5.9.0",
Expand Down
7 changes: 7 additions & 0 deletions packages/react-pdf-toolkit/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
# @ballerine/react-pdf-toolkit

## 1.2.60

### Patch Changes

- Updated dependencies
- @ballerine/ui@0.5.60

## 1.2.59

### Patch Changes
Expand Down
4 changes: 2 additions & 2 deletions packages/react-pdf-toolkit/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@ballerine/react-pdf-toolkit",
"private": false,
"version": "1.2.59",
"version": "1.2.60",
"types": "./dist/build.d.ts",
"main": "./dist/react-pdf-toolkit.js",
"module": "./dist/react-pdf-toolkit.mjs",
Expand All @@ -27,7 +27,7 @@
},
"dependencies": {
"@ballerine/config": "^1.1.28",
"@ballerine/ui": "0.5.59",
"@ballerine/ui": "0.5.60",
"@react-pdf/renderer": "^3.1.14",
"@sinclair/typebox": "^0.31.7",
"ajv": "^8.12.0",
Expand Down
6 changes: 6 additions & 0 deletions packages/ui/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
# @ballerine/ui

## 0.5.60

### Patch Changes

- version bump

## 0.5.59

### Patch Changes
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@ballerine/ui",
"private": false,
"version": "0.5.59",
"version": "0.5.60",
"type": "module",
"main": "dist/index.js",
"types": "dist/index.d.ts",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,9 @@ export const WebsiteCredibility: FunctionComponent<{
)}
</li>
))}
{!onlineReputationAnalysis?.length && <li>No Indications Detected.</li>}
{!onlineReputationAnalysis?.length && (
<li>No indications of negative website reputation were detected.</li>
)}
</ol>
</CardContent>
</Card>
Expand All @@ -120,7 +122,12 @@ export const WebsiteCredibility: FunctionComponent<{
{warning}
</li>
))}
{!pricingAnalysis?.length && <li>No Indications Detected.</li>}
{!pricingAnalysis?.length && (
<li>
No indications of suspicious pricing or anomalies in the website’s pricing were
detected.
</li>
)}
</ol>
</CardContent>
</Card>
Expand All @@ -138,7 +145,9 @@ export const WebsiteCredibility: FunctionComponent<{
{warning}
</li>
))}
{!websiteStructureAndContentEvaluation?.length && <li>No Indications Detected.</li>}
{!websiteStructureAndContentEvaluation?.length && (
<li>No structural issues or missing compliance pages were detected.</li>
)}
</ol>
</CardContent>
</Card>
Expand All @@ -147,11 +156,11 @@ export const WebsiteCredibility: FunctionComponent<{

{/* <div className="flex flex-col 2xl:flex-row gap-4 w-full h-auto 2xl:h-96">
<div className="h-[24rem] 2xl:h-full w-full 2xl:w-3/5"> */}
<div className="flex gap-4 h-[30rem] w-full">
<div className="flex h-[30rem] w-full gap-4">
<Card className="h-full w-3/5">
<CardHeader className="pt-4 font-bold">Estimated Monthly Visitors</CardHeader>

<CardContent className="h-4/5 w-full pb-0 mt-auto">
<CardContent className="mt-auto h-4/5 w-full pb-0">
{trafficAnalysis.montlyVisitsIndicators.length > 0 ? (
<ResponsiveContainer width="100%" height="100%">
<LineChart data={trafficAnalysis.montlyVisitsIndicators}>
Expand All @@ -165,7 +174,7 @@ export const WebsiteCredibility: FunctionComponent<{
content={({ active, payload, label }) => {
if (active && payload && payload.length) {
return (
<div className="bg-white border border-gray-400 rounded-md px-4 py-2 text-gray-600">
<div className="rounded-md border border-gray-400 bg-white px-4 py-2 text-gray-600">
<p className="max-w-xs">{`On ${label} the company's website had approx. ${Intl.NumberFormat(
'en',
).format(parseInt(String(payload.at(0)?.value)))} visitors`}</p>
Expand All @@ -180,7 +189,7 @@ export const WebsiteCredibility: FunctionComponent<{
</LineChart>
</ResponsiveContainer>
) : (
<div className="flex justify-center items-center h-full w-full">
<div className="flex h-full w-full items-center justify-center">
<p>No Monthly Visitors Data Available</p>
</div>
)}
Expand All @@ -189,11 +198,11 @@ export const WebsiteCredibility: FunctionComponent<{

{/* <div className="flex 2xl:flex-col gap-4 h-[12rem] 2xl:h-full w-full 2xl:w-2/5">
<div className="h-full 2xl:h-1/2 w-1/2 2xl:w-full"> */}
<div className="flex flex-col gap-4 h-full w-2/5">
<Card className="w-full h-1/2">
<CardHeader className="pt-4 pb-0 font-bold">Traffic Sources</CardHeader>
<div className="flex h-full w-2/5 flex-col gap-4">
<Card className="h-1/2 w-full">
<CardHeader className="pb-0 pt-4 font-bold">Traffic Sources</CardHeader>

<CardContent className="h-4/5 w-full pb-0 mt-auto">
<CardContent className="mt-auto h-4/5 w-full pb-0">
{trafficSources.length > 0 ? (
<ResponsiveContainer width="100%" height="100%">
<PieChart>
Expand Down Expand Up @@ -228,10 +237,10 @@ export const WebsiteCredibility: FunctionComponent<{
{payload?.map((entry, index) => (
<div key={`item-${index}`} className="flex items-center space-x-2">
<span
className="block w-2 h-2 rounded-full"
className="block h-2 w-2 rounded-full"
style={{ backgroundColor: PIE_COLORS[index % PIE_COLORS.length] }}
/>
<div className="flex justify-between w-full">
<div className="flex w-full justify-between">
<span className="text-gray-500">{capitalize(entry.value)}</span>
<span className="font-semibold">{entry.payload?.value}%</span>
</div>
Expand All @@ -243,7 +252,7 @@ export const WebsiteCredibility: FunctionComponent<{
</PieChart>
</ResponsiveContainer>
) : (
<div className="flex justify-center items-center h-full w-full">
<div className="flex h-full w-full items-center justify-center">
<p>No Traffic Sources Data Available</p>
</div>
)}
Expand All @@ -254,7 +263,7 @@ export const WebsiteCredibility: FunctionComponent<{
<Card className="h-1/2 w-full">
<CardHeader className="pt-4 font-bold">Engagement</CardHeader>

<CardContent className="h-3/5 flex items-center gap-6">
<CardContent className="flex h-3/5 items-center gap-6">
{trafficAnalysis.engagements.length > 0 ? (
trafficAnalysis?.engagements.map(({ label, value }) => {
const { suffix, description, shouldRound } =
Expand All @@ -269,15 +278,15 @@ export const WebsiteCredibility: FunctionComponent<{
<TooltipProvider>
<Tooltip>
<TooltipTrigger className="cursor-help">
<InfoIcon className="text-gray-500 w-4 h-4" />
<InfoIcon className="h-4 w-4 text-gray-500" />
</TooltipTrigger>

<TooltipContent
side="right"
align="center"
className="bg-gray-50 border border-gray-400 text-primary text-sm max-w-[12rem]"
className="text-primary max-w-[12rem] border border-gray-400 bg-gray-50 text-sm"
>
<p className="text-gray-500 text-sm">{description}</p>
<p className="text-sm text-gray-500">{description}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
Expand All @@ -293,7 +302,7 @@ export const WebsiteCredibility: FunctionComponent<{
);
})
) : (
<div className="flex justify-center items-center h-full w-full">
<div className="flex h-full w-full items-center justify-center">
<p>No Engagement Data Available</p>
</div>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,9 @@ export const WebsitesCompany: FunctionComponent<{
)}
</li>
))}
{!companyReputationAnalysis?.length && <li>No Indications Detected.</li>}
{!companyReputationAnalysis?.length && (
<li>No indications of negative company reputation were detected.</li>
)}
</ol>
</CardContent>
</Card>
Expand Down
4 changes: 2 additions & 2 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit cb8de84

Please sign in to comment.