feat(business-report): upgrade user-facing part of the social media d…

…ata UI (BAL-2577) (#2911)

* feat(business-report): upgrade user-facing part of the social media data UI

* fix: categories icon & key prop for mapped el

* fix: minor code style correction

* chore: bump packages that depend on ui

* chore: update lockfile

* fix: hide ads section

apps/kyb-app/CHANGELOG.md

@@ -1,5 +1,12 @@
 # kyb-app
 
+## 0.3.100
+
+### Patch Changes
+
+- Updated dependencies
+  - @ballerine/ui@0.5.56
+
 ## 0.3.99
 
 ### Patch Changes

apps/kyb-app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/kyb-app",
   "private": true,
-  "version": "0.3.99",
+  "version": "0.3.100",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -17,7 +17,7 @@
   "dependencies": {
     "@ballerine/blocks": "0.2.30",
     "@ballerine/common": "^0.9.61",
-    "@ballerine/ui": "0.5.55",
+    "@ballerine/ui": "0.5.56",
     "@ballerine/workflow-browser-sdk": "0.6.80",
     "@lukemorales/query-key-factory": "^1.0.3",
     "@radix-ui/react-icons": "^1.3.0",

packages/react-pdf-toolkit/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @ballerine/react-pdf-toolkit
 
+## 1.2.56
+
+### Patch Changes
+
+- Updated dependencies
+  - @ballerine/ui@0.5.56
+
 ## 1.2.55
 
 ### Patch Changes

packages/react-pdf-toolkit/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/react-pdf-toolkit",
   "private": false,
-  "version": "1.2.55",
+  "version": "1.2.56",
   "types": "./dist/build.d.ts",
   "main": "./dist/react-pdf-toolkit.js",
   "module": "./dist/react-pdf-toolkit.mjs",
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@ballerine/config": "^1.1.28",
-    "@ballerine/ui": "0.5.55",
+    "@ballerine/ui": "0.5.56",
     "@react-pdf/renderer": "^3.1.14",
     "@sinclair/typebox": "^0.31.7",
     "ajv": "^8.12.0",

packages/ui/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ballerine/ui
 
+## 0.5.56
+
+### Patch Changes
+
+- Updated user-facing social media view
+
 ## 0.5.55
 
 ### Patch Changes

packages/ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/ui",
   "private": false,
-  "version": "0.5.55",
+  "version": "0.5.56",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -18,6 +18,7 @@
     "dev": "vite",
     "clean": "rimraf ./tsconfig.tsbuildinfo && rimraf ./dist",
     "build": "tsc && vite build",
+    "build:watch": "vite build --watch",
     "lint": "eslint . --fix",
     "format": "prettier --write .",
     "preview": "vite preview",
@@ -53,7 +54,7 @@
     "dayjs": "^1.11.6",
     "i18n-iso-countries": "^7.6.0",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.144.0",
+    "lucide-react": "^0.245.0",
     "react": "^18.0.37",
     "react-dom": "^18.0.5",
     "react-error-boundary": "^4.0.13",

packages/ui/src/components/atoms/Button/Button.tsx

@@ -15,6 +15,8 @@ const buttonVariants = cva(
         secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
+        browserLink:
+          'text-blue-600 hover:text-blue-800 visited:text-purple-600 underline-offset-4 hover:underline',
       },
       size: {
         default: 'h-9 px-4 py-2',

packages/ui/src/components/atoms/Image/interfaces.ts

@@ -4,6 +4,6 @@ import { useImageProps } from 'react-image';
 export interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'> {
   src: useImageProps['srcList'];
   useImageProps?: Omit<useImageProps, 'srcList'>;
-  width: CSSProperties['width'];
-  height: CSSProperties['height'];
+  width?: CSSProperties['width'];
+  height?: CSSProperties['height'];
 }

packages/ui/src/components/templates/report/adapters/index.ts

@@ -1,3 +1,2 @@
-export * from './ads-provider-adapter';
 export * from './create-report-adapter';
 export * from './report-adapter';

packages/ui/src/components/templates/report/adapters/report-adapter/report-adapter.ts → packages/ui/src/components/templates/report/adapters/report-adapter.ts

@@ -1,7 +1,6 @@
-import { AdsProviders, severityToDisplaySeverity } from '@/components/templates/report/constants';
-import { adsProviderAdapter } from '@/components';
+import { severityToDisplaySeverity } from '@/components/templates/report/constants';
 import { TAdsProvider } from '@/components/templates/report/types';
-import { SeverityType } from '@ballerine/common';
+import { booleanToYesOrNo, SeverityType } from '@ballerine/common';
 
 const getLabel = ({ label, provider }: { label: string; provider: string }) => {
   if (label === 'page') {
@@ -23,6 +22,47 @@ export const toRiskLabels = (riskIndicators: Array<{ name: string; riskLevel: st
   }));
 };
 
+export const toSocialMediaPresence = (data: Record<string, any>) => {
+  const { facebookData, instagramData } = data ?? {};
+
+  return {
+    facebook: {
+      page: facebookData?.pageUrl,
+      id: facebookData?.id,
+      creationDate: facebookData?.creationDate,
+      categories: facebookData?.pageCategories,
+      address: facebookData?.address,
+      phoneNumber: facebookData?.phoneNumber,
+      email: facebookData?.email,
+      likes: facebookData?.numberOfLikes,
+    },
+    instagram: {
+      page: instagramData?.pageUrl,
+      userName: instagramData?.username,
+      categories: instagramData?.pageCategories,
+      biography: instagramData?.biography,
+      followers: instagramData?.numberOfFollowers,
+      isBusinessAccount: booleanToYesOrNo(instagramData?.isBusinessAccount),
+      isVerified: booleanToYesOrNo(instagramData?.isVerified),
+    },
+  } as const satisfies Record<Lowercase<TAdsProvider>, Record<string, unknown>>;
+};
+
+export const toAdsImages = (data: Record<string, any>) => {
+  const { facebookData, instagramData } = data ?? {};
+
+  return {
+    facebook: {
+      src: facebookData?.screenshotUrl,
+      link: facebookData?.pageUrl,
+    },
+    instagram: {
+      src: instagramData?.screenshotUrl,
+      link: instagramData?.pageUrl,
+    },
+  };
+};
+
 const normalizeRiskLevel = (riskTypeLevels: Record<string, SeverityType>) => {
   return Object.entries(riskTypeLevels).reduce((acc, [riskType, riskLevel]) => {
     acc[riskType] =
@@ -41,30 +81,7 @@ export const reportAdapter = {
       adsAndSocialMediaAnalysis: toRiskLabels(
         report?.summary?.riskIndicatorsByDomain?.adsAndSocialViolations,
       ),
-      adsAndSocialMediaPresence: [
-        ...Object.entries({ facebook: report?.socialMedia?.facebookData ?? {} }),
-        ...Object.entries({ instagram: report?.socialMedia?.instagramData ?? {} }),
-      ]
-        .map(([provider, data]) => {
-          if (!AdsProviders.includes(provider.toUpperCase() as TAdsProvider)) {
-            return;
-          }
-
-          const adapter = adsProviderAdapter[provider as keyof typeof adsProviderAdapter];
-          const adaptedData = adapter(data);
-
-          return {
-            label: provider,
-            items: Object.entries(adaptedData).map(([label, value]) => ({
-              label: getLabel({
-                label,
-                provider,
-              }),
-              value,
-            })),
-          };
-        })
-        ?.filter((value): value is NonNullable<typeof value> => Boolean(value)),
+      adsAndSocialMediaPresence: toSocialMediaPresence(report?.socialMedia),
       websiteLineOfBusinessAnalysis:
         report?.summary?.riskIndicatorsByDomain?.lineOfBusinessViolations?.map(
           ({
@@ -125,16 +142,7 @@ export const reportAdapter = {
       websiteCredibilityAnalysis: toRiskLabels(
         report?.summary?.riskIndicatorsByDomain?.tldViolations,
       ),
-      adsImages: [
-        ...Object.entries({ facebook: report?.socialMedia?.facebookData ?? {} }),
-        ...Object.entries({ instagram: report?.socialMedia?.instagramData ?? {} }),
-      ]
-        .map(([provider, data]) => ({
-          provider,
-          src: data?.screenshotUrl,
-          link: data?.pageUrl,
-        }))
-        .filter(({ src }: { src: string }) => !!src),
+      adsImages: toAdsImages(report?.socialMedia),
       relatedAdsImages: report?.socialMedia?.pickedAds
         ?.map((data: { screenshotUrl: string; link: string }) => ({
           src: data?.screenshotUrl,