Merchant Monitoring (#2054)

* feat: added CountryPicker to UI & ui bump

* feat: added RadioGroup to ui

* feat: added radio group input adapter & updated storybook

* feat: ui bump

* fix: build fix

* feat: added support of htmlRaw descriptions in dynamic form

* feat: added report-creation callback name

* feat: new icons & style changes & bump

* feat: added icon position to list & font changes

* feat: added report templates & added storybook

* feat: type export & bump

* merged with master

* fix: updated exports & bump

* feat: added initial report rendering to backoffice

* feat: added initial case actions variants

* feat: refactored code

* feat: refactored process tracker logic

* feat: implemented process tracking logic for merchant monitoring

* feat: states adjustments & css fixes

* feat: added validation schemas & hoc validator & updated website analysis

* feat: bump

* feat: added empty state to website analysis & upd storybook

* feat: added empty states handling to social media & updated storybook

* feat: render of social media & website analysis report

* fix: fixed import

* feat: added base64 file service provider & added website monitoring callback handler

* feat: common bump

* feat: removed reports from pdf-toolkit & bump

* draft1

* feat: replaced pdf viewer with iframe & added rendering of report out of base64

* feat: added new icons

* fix: fixed pdf blocks types & useMemo rendering bug

* feat: bump

* fix: lock fix

* feat: added date formatting & bump

* fix: fixed website monitoring hook hanlding & backoffice fixes

* feat: bump

* fix: fixed actions variant & base pdf format

* fix: reverted prisma timeouts & removed logging of base64 filenames

* fix: added mime type to pdf block & fixed callback

* feat: added string-ts re-export & fixed hook name

* feat: code refactoring

* fix: renamed PDFRevision to WebsiteMonitoring

* fix: renamed files & added toast to handle unsupported actions

* fix: fixed build

* feat: bump

---------

Co-authored-by: Alon Peretz <Alonp99@gmail.com>

.changeset/early-hairs-itch.md

@@ -0,0 +1,6 @@
+---
+'@ballerine/react-pdf-toolkit': patch
+'@ballerine/common': patch
+---
+
+bump

.changeset/five-wombats-thank.md

@@ -0,0 +1,5 @@
+---
+'@ballerine/react-pdf-toolkit': patch
+---
+
+Updated exports & bump

.changeset/heavy-apes-double.md

@@ -0,0 +1,12 @@
+---
+'@ballerine/report-generation-example': minor
+'@ballerine/react-pdf-toolkit': minor
+'@ballerine/workflows-service': minor
+'@ballerine/headless-example': minor
+'@ballerine/backoffice-v2': minor
+'@ballerine/common': minor
+'@ballerine/kyb-app': minor
+'@ballerine/ui': minor
+---
+
+Bump

.changeset/kind-melons-hammer.md

@@ -0,0 +1,5 @@
+---
+'@ballerine/react-pdf-toolkit': patch
+---
+
+Added report templates & storybook stories

.changeset/loud-hornets-switch.md

@@ -0,0 +1,7 @@
+---
+'@ballerine/react-pdf-toolkit': patch
+'@ballerine/workflows-service': patch
+'@ballerine/backoffice-v2': patch
+---
+
+bump alpha

.changeset/pre.json

@@ -0,0 +1,39 @@
+{
+  "mode": "pre",
+  "tag": "11210907c",
+  "initialVersions": {
+    "@ballerine/backoffice-v2": "0.5.44",
+    "@ballerine/kyb-app": "0.1.39",
+    "@ballerine/workflows-dashboard": "0.1.11",
+    "@ballerine/headless-example": "0.1.39",
+    "@ballerine/report-generation-example": "0.0.1",
+    "@ballerine/blocks": "0.1.24",
+    "@ballerine/common": "0.7.39",
+    "@ballerine/config": "1.0.4",
+    "@ballerine/eslint-config": "1.0.4",
+    "@ballerine/eslint-config-react": "1.0.5",
+    "@ballerine/react-pdf-toolkit": "1.0.12",
+    "@ballerine/rules-engine-lib": "0.4.24",
+    "@ballerine/ui": "0.3.26",
+    "@ballerine/workflow-core": "0.5.39",
+    "@ballerine/web-ui-sdk": "1.4.36",
+    "@ballerine/workflow-browser-sdk": "0.5.39",
+    "@ballerine/workflow-node-sdk": "0.5.39",
+    "@ballerine/websocket-service": "0.0.16",
+    "@ballerine/workflows-service": "0.5.39",
+    "@ballerine/docs-site": "0.0.1"
+  },
+  "changesets": [
+    "early-hairs-itch",
+    "five-wombats-thank",
+    "heavy-apes-double",
+    "kind-melons-hammer",
+    "loud-hornets-switch",
+    "rare-eels-tan",
+    "rotten-owls-invent",
+    "shiny-rocks-suffer",
+    "tough-nails-teach",
+    "wicked-ducks-act",
+    "young-jeans-fail"
+  ]
+}

.changeset/rare-eels-tan.md

@@ -0,0 +1,5 @@
+---
+'@ballerine/common': patch
+---
+
+Added base64 provider type

.changeset/rotten-owls-invent.md

@@ -0,0 +1,17 @@
+---
+'@ballerine/report-generation-example': patch
+'@ballerine/react-pdf-toolkit': patch
+'@ballerine/workflows-service': patch
+'@ballerine/headless-example': patch
+'@ballerine/workflow-browser-sdk': patch
+'@ballerine/workflow-core': patch
+'@ballerine/workflow-node-sdk': patch
+'@ballerine/backoffice-v2': patch
+'@ballerine/blocks': patch
+'@ballerine/common': patch
+'@ballerine/web-ui-sdk': patch
+'@ballerine/kyb-app': patch
+'@ballerine/ui': patch
+---
+
+bump

.changeset/shiny-rocks-suffer.md

@@ -0,0 +1,11 @@
+---
+'@ballerine/react-pdf-toolkit': patch
+'@ballerine/workflows-service': patch
+'@ballerine/headless-example': patch
+'@ballerine/backoffice-v2': patch
+'@ballerine/common': patch
+'@ballerine/kyb-app': patch
+'@ballerine/ui': patch
+---
+
+Version bump

.changeset/tough-nails-teach.md

@@ -0,0 +1,5 @@
+---
+'@ballerine/react-pdf-toolkit': patch
+---
+
+Updated Header date formatting

.changeset/wicked-ducks-act.md

@@ -0,0 +1,5 @@
+---
+'@ballerine/react-pdf-toolkit': patch
+---
+
+bump

.changeset/young-jeans-fail.md

@@ -0,0 +1,5 @@
+---
+'@ballerine/react-pdf-toolkit': patch
+---
+
+Cleanup & Bump

apps/backoffice-v2/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @ballerine/backoffice-v2
 
+## 0.7.0-11210907c.0
+
+### Minor Changes
+
+- Bump
+
+### Patch Changes
+
+- Updated dependencies
+  - @ballerine/common@0.9.0-11210907c.0
+  - @ballerine/ui@0.5.0-11210907c.0
+  - @ballerine/blocks@0.2.1-11210907c.0
+  - @ballerine/workflow-browser-sdk@0.6.1-11210907c.0
+  - @ballerine/workflow-node-sdk@0.6.1-11210907c.0
+
 ## 0.6.0
 
 ### Minor Changes
@@ -113,6 +128,11 @@
 ### Patch Changes
 
 - Updated dependencies
+  - @ballerine/common@0.7.42-11210907c.0
+  - @ballerine/blocks@0.1.27-11210907c.0
+  - @ballerine/ui@0.3.29-11210907c.0
+  - @ballerine/workflow-browser-sdk@0.5.42-11210907c.0
+  - @ballerine/workflow-node-sdk@0.5.42-11210907c.0
   - @ballerine/common@0.7.42
   - @ballerine/workflow-browser-sdk@0.5.42
   - @ballerine/workflow-node-sdk@0.5.42
@@ -165,6 +185,8 @@
   - @ballerine/common@0.7.38
   - @ballerine/workflow-browser-sdk@0.5.38
   - @ballerine/workflow-node-sdk@0.5.38
+- Updated dependencies
+  - @ballerine/ui@0.3.27
 
 ## 0.5.42
 

apps/backoffice-v2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ballerine/backoffice-v2",
-  "version": "0.6.0",
+  "version": "0.7.0-11210907c.0",
   "description": "Ballerine - Backoffice",
   "homepage": "https://github.com/ballerine-io/ballerine",
   "repository": {
@@ -50,11 +50,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ballerine/blocks": "0.2.0",
-    "@ballerine/common": "0.8.0",
-    "@ballerine/ui": "^0.4.0",
-    "@ballerine/workflow-browser-sdk": "0.6.0",
-    "@ballerine/workflow-node-sdk": "0.6.0",
+    "@ballerine/blocks": "0.2.1-11210907c.0",
+    "@ballerine/common": "0.9.0-11210907c.0",
+    "@ballerine/ui": "^0.5.0-11210907c.0",
+    "@ballerine/workflow-browser-sdk": "0.6.1-11210907c.0",
+    "@ballerine/workflow-node-sdk": "0.6.1-11210907c.0",
     "@fontsource/inter": "^4.5.15",
     "@formkit/auto-animate": "1.0.0-beta.5",
     "@hookform/resolvers": "^3.1.0",

apps/backoffice-v2/src/common/components/atoms/Select/Select.Content.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
+import * as React from 'react';
 import { ctw } from '../../../utils/ctw/ctw';
 
 export const SelectContent = React.forwardRef<

apps/backoffice-v2/src/common/components/molecules/ProcessTracker/ProcessTracker.tsx

@@ -1,28 +1,20 @@
-import { FunctionComponent } from 'react';
 import { AccordionCard, HoverCard, HoverCardContent, HoverCardTrigger } from '@ballerine/ui';
+import { FunctionComponent } from 'react';
 
+import { Icon } from '@/common/components/molecules/ProcessTracker/constants';
 import { useProcessTrackerLogic } from '@/common/components/molecules/ProcessTracker/hooks/useProcessTrackerLogic/useProcessTrackerLogic';
 import { IProcessTrackerProps } from '@/common/components/molecules/ProcessTracker/interfaces';
 import { HelpCircle } from 'lucide-react';
-import { Icon } from '@/common/components/molecules/ProcessTracker/constants';
 
 export const ProcessTracker: FunctionComponent<IProcessTrackerProps> = ({
-  tags,
   plugins,
-  context,
-  childWorkflows,
+  workflow,
+  processes,
 }) => {
-  const {
-    uncollapsedItemValue,
-    onValueChange,
-    thirdPartyProcessesSubitems,
-    collectionFlowSubitems,
-    uboFlowsSubitems,
-  } = useProcessTrackerLogic({
-    tags,
+  const { uncollapsedItemValue, onValueChange, trackedProcesses } = useProcessTrackerLogic({
     plugins,
-    context,
-    childWorkflows,
+    workflow,
+    processes,
   });
 
   return (
@@ -69,17 +61,9 @@ export const ProcessTracker: FunctionComponent<IProcessTrackerProps> = ({
           Processes
         </AccordionCard.Title>
         <AccordionCard.Content>
-          <AccordionCard.Item
-            title={`Collection flow`}
-            value={`Collection flow`}
-            subitems={collectionFlowSubitems}
-          />
-          <AccordionCard.Item
-            title={`3rd party processes`}
-            value={`3rd party processes`}
-            subitems={thirdPartyProcessesSubitems}
-          />
-          <AccordionCard.Item title={`UBO flows`} value={`UBO flows`} subitems={uboFlowsSubitems} />
+          {trackedProcesses.map(({ name, title, subitems }) => (
+            <AccordionCard.Item key={name} title={title} value={name} subitems={subitems} />
+          ))}
         </AccordionCard.Content>
       </AccordionCard>
     </div>

apps/backoffice-v2/src/common/components/molecules/ProcessTracker/constants.tsx

@@ -1,10 +1,10 @@
-import { ProcessStatus, StateTag } from '@ballerine/common';
-import { RefreshCircle } from '@/common/components/atoms/RefreshCircle/RefreshCircle';
-import { ClockCircle } from '@/common/components/atoms/ClockCircle/ClockCircle';
-import { XCircle } from '@/common/components/atoms/XCircle/XCircle';
-import { MinusCircle } from '@/common/components/atoms/MinusCircle/MinusCircle';
 import { CheckCircle } from '@/common/components/atoms/CheckCircle/CheckCircle';
+import { ClockCircle } from '@/common/components/atoms/ClockCircle/ClockCircle';
 import { IndicatorCircle } from '@/common/components/atoms/IndicatorCircle/IndicatorCircle';
+import { MinusCircle } from '@/common/components/atoms/MinusCircle/MinusCircle';
+import { RefreshCircle } from '@/common/components/atoms/RefreshCircle/RefreshCircle';
+import { XCircle } from '@/common/components/atoms/XCircle/XCircle';
+import { ProcessStatus, StateTag } from '@ballerine/common';
 
 export const tagToAccordionCardItem = {
   [StateTag.COLLECTION_FLOW]: 'Collection flow',

apps/backoffice-v2/src/common/components/molecules/ProcessTracker/hooks/useProcessTrackerLogic/interfaces.ts

@@ -1,15 +1,14 @@
-import { TWorkflowById } from '@/domains/workflows/fetchers';
 import { TWorkflowDefinitionById } from '@/domains/workflow-definitions/fetchers';
+import { TWorkflowById } from '@/domains/workflows/fetchers';
 
 export interface IUseProcessTrackerLogicParams {
-  tags: TWorkflowById['tags'];
   plugins: Array<
     | NonNullable<NonNullable<TWorkflowDefinitionById['extensions']>['apiPlugins']>[number]
     | NonNullable<
         NonNullable<TWorkflowDefinitionById['extensions']>['childWorkflowPlugins']
       >[number]
     | NonNullable<NonNullable<TWorkflowDefinitionById['extensions']>['commonPlugins']>[number]
   >;
-  context: TWorkflowById['context'];
-  childWorkflows: TWorkflowById['childWorkflows'];
+  workflow: TWorkflowById;
+  processes?: string[];
 }

apps/backoffice-v2/src/common/components/molecules/ProcessTracker/hooks/useProcessTrackerLogic/process-tracker-adapters/collection-flow.process-tracker.ts

@@ -0,0 +1,46 @@
+import { processStatusToIcon } from '@/common/components/molecules/ProcessTracker/constants';
+import {
+  IProcessTracker,
+  ProcessTrackerItem,
+} from '@/common/components/molecules/ProcessTracker/hooks/useProcessTrackerLogic/process-tracker-adapters/process-tracker.abstract';
+import { TWorkflowById } from '@/domains/workflows/fetchers';
+import { ProcessStatus } from '@ballerine/common';
+import { titleCase } from 'string-ts';
+
+export class CollectionFlowProcessTracker implements IProcessTracker {
+  PROCESS_NAME = 'collection-flow';
+
+  constructor(readonly workflow: TWorkflowById) {}
+
+  buildItems(): ProcessTrackerItem[] {
+    return (
+      this.getSteps()?.map(step => {
+        return {
+          text: titleCase(step),
+          leftIcon: this.getCollectionFlowStatus(step),
+        };
+      }) || []
+    );
+  }
+
+  getReadableName(): string {
+    return 'Collection Flow';
+  }
+
+  private getSteps() {
+    return Object.keys(this.workflow?.context?.flowConfig?.stepsProgress ?? {})?.sort((a, b) => {
+      return (
+        (this.workflow?.context?.flowConfig?.stepsProgress?.[a]?.number ?? 0) -
+        (this.workflow?.context?.flowConfig?.stepsProgress?.[b]?.number ?? 0)
+      );
+    });
+  }
+
+  private getCollectionFlowStatus(step: string) {
+    if (this.workflow?.context?.flowConfig?.stepsProgress?.[step]?.isCompleted) {
+      return processStatusToIcon[ProcessStatus.SUCCESS];
+    }
+
+    return processStatusToIcon[ProcessStatus.IDLE];
+  }
+}

apps/backoffice-v2/src/common/components/molecules/ProcessTracker/hooks/useProcessTrackerLogic/process-tracker-adapters/index.ts

@@ -0,0 +1,11 @@
+import { CollectionFlowProcessTracker } from '@/common/components/molecules/ProcessTracker/hooks/useProcessTrackerLogic/process-tracker-adapters/collection-flow.process-tracker';
+import { MerchantMonitoringProcessTracker } from '@/common/components/molecules/ProcessTracker/hooks/useProcessTrackerLogic/process-tracker-adapters/merchant-monitoring.process-tracker';
+import { ThirdPartyProcessTracker } from '@/common/components/molecules/ProcessTracker/hooks/useProcessTrackerLogic/process-tracker-adapters/third-party.proces-tracker';
+import { UBOFlowsProcessTracker } from '@/common/components/molecules/ProcessTracker/hooks/useProcessTrackerLogic/process-tracker-adapters/ubo-flows.process-tracker';
+
+export const processTrackersMap = {
+  'collection-flow': CollectionFlowProcessTracker,
+  ubos: UBOFlowsProcessTracker,
+  'third-party': ThirdPartyProcessTracker,
+  'merchant-monitoring': MerchantMonitoringProcessTracker,
+} as const;