feat(backoffice-v2): added a component for merchant monitoring explai…

…nations (#2609)

Co-authored-by: Alon Peretz <8467965+alonp99@users.noreply.github.com>

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

@@ -0,0 +1,62 @@
+import React, { ComponentProps, FunctionComponent, ReactNode } from 'react';
+import { TooltipProvider } from '@/common/components/atoms/Tooltip/Tooltip.Provider';
+import { Tooltip } from '@/common/components/atoms/Tooltip/Tooltip';
+import { TooltipTrigger } from '@/common/components/atoms/Tooltip/Tooltip.Trigger';
+import { TooltipContent } from '@/common/components/atoms/Tooltip/Tooltip.Content';
+import { HelpCircle } from 'lucide-react';
+import { ctw } from '@/common/utils/ctw/ctw';
+
+export const HelpTooltip: FunctionComponent<{
+  title: ReactNode | ReactNode[];
+  description: ReactNode | ReactNode[];
+  props?: {
+    tooltipProvider?: ComponentProps<typeof TooltipProvider>;
+    tooltip?: ComponentProps<typeof Tooltip>;
+    tooltipTrigger?: ComponentProps<typeof TooltipTrigger>;
+    tooltipContent?: ComponentProps<typeof TooltipContent>;
+    tooltipIcon?: ComponentProps<typeof HelpCircle>;
+    contentHeading?: ComponentProps<'h4'>;
+    contentParagraph?: ComponentProps<'p'>;
+  };
+}> = ({ title, description, props }) => {
+  return (
+    <TooltipProvider delayDuration={0} {...props?.tooltipProvider}>
+      <Tooltip {...props?.tooltip}>
+        <TooltipTrigger
+          {...props?.tooltipTrigger}
+          className={ctw(`flex items-center`, props?.tooltipTrigger?.className)}
+        >
+          <HelpCircle
+            size={18}
+            {...props?.tooltipIcon}
+            className={ctw(`stroke-slate-400/70`, props?.tooltipIcon?.className)}
+          />
+        </TooltipTrigger>
+        <TooltipContent
+          align={'end'}
+          {...props?.tooltipContent}
+          className={ctw(
+            'border bg-background p-4 font-normal text-foreground shadow-sm',
+            props?.tooltipContent?.className,
+          )}
+        >
+          <h4
+            {...props?.contentHeading}
+            className={ctw('mb-4 font-bold', props?.contentHeading?.className)}
+          >
+            {title}
+          </h4>
+          <p
+            {...props?.contentParagraph}
+            className={ctw(
+              'w-[35ch] break-words leading-relaxed',
+              props?.contentParagraph?.className,
+            )}
+          >
+            {description}
+          </p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};