feat: update ScoreCircle

+ Add tooltip logic directly to component
+ Apply tooltip on locations using score circle

src/components/ProductReviewList.tsx

@@ -1,4 +1,5 @@
 'use client';
+
 import { type Product, type Review } from 'types';
 
 import { Table } from '@bigcommerce/big-design';
@@ -107,7 +108,12 @@ export const ProductReviewList = ({
                 </div>
               </>
             }
-            topRightContent={<ScoreCircle score={averageSentiment} />}
+            topRightContent={
+              <ScoreCircle
+                score={averageSentiment}
+                tooltip="Average product sentiment"
+              />
+            }
           />
         </div>
 
@@ -116,14 +122,23 @@ export const ProductReviewList = ({
             {
               header: 'Score',
               hash: 'score',
-              render: (review) => (
-                <ScoreCircle
-                  score={
-                    reviewAnalyses?.find((r) => r.id === `${review.id}`)?.data
-                      ?.score
-                  }
-                />
-              ),
+              render: (review) => {
+                const score = reviewAnalyses?.find(
+                  (r) => r.id === `${review.id}`
+                )?.data?.score;
+
+                return (
+                  <ScoreCircle
+                    score={score}
+                    tooltip={
+                      typeof score === 'number'
+                        ? 'Sentiment score'
+                        : 'Unanalyzed review'
+                    }
+                    tooltipPlacement="right"
+                  />
+                );
+              },
             },
             {
               header: 'Rating',

src/components/ReviewDetail.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Box, Button, Tooltip } from '@bigcommerce/big-design';
+import { Box, Button } from '@bigcommerce/big-design';
 import { CheckIcon, EnvelopeIcon, HeartIcon } from '@heroicons/react/24/solid';
 import clsx from 'clsx';
 import { useState } from 'react';
@@ -151,16 +151,10 @@ export const ReviewDetail = ({
             </>
           }
           topRightContent={
-            <Tooltip
-              placement="bottom"
-              trigger={
-                <div className="cursor-help">
-                  <ScoreCircle score={92} />
-                </div>
-              }
-            >
-              Overall customer sentiment score
-            </Tooltip>
+            <ScoreCircle
+              score={92}
+              tooltip="Average customer sentiment score"
+            />
           }
         />
       </div>

src/components/ScoreCircle.tsx

@@ -1,26 +1,60 @@
+import { Tooltip } from '@bigcommerce/big-design';
 import clsx from 'clsx';
+import { forwardRef, type ComponentProps } from 'react';
 import { parseScore } from '~/utils/utils';
 
-interface ScoreCircleProps {
+interface ScoreCircleBaseProps {
+  className?: string;
   score?: number;
 }
 
-export const ScoreCircle = ({ score: scoreProp }: ScoreCircleProps) => {
-  const score = parseScore(scoreProp);
+const ScoreCircleBase = forwardRef<HTMLDivElement, ScoreCircleBaseProps>(
+  ({ className, score: scoreProp, ...props }, ref) => {
+    const score = parseScore(scoreProp);
 
-  return (
-    <div
-      className={clsx(
-        'flex aspect-square w-9 items-center justify-center rounded-full font-semibold',
-        {
-          'bg-green-200/80 text-green-800': score.isPositive,
-          'bg-yellow-200/80 text-yellow-800': score.isNeutral,
-          'bg-red-200/80 text-red-800': score.isNegative,
-          'bg-gray-200/80 text-gray-500': score.isNull,
-        }
-      )}
-    >
-      {score.isNull ? '?' : scoreProp}
-    </div>
-  );
+    return (
+      <div
+        {...props}
+        className={clsx(
+          'flex aspect-square w-9 items-center justify-center rounded-full font-semibold',
+          {
+            'bg-green-200/80 text-green-800': score.isPositive,
+            'bg-yellow-200/80 text-yellow-800': score.isNeutral,
+            'bg-red-200/80 text-red-800': score.isNegative,
+            'bg-gray-200/80 text-gray-500': score.isNull,
+          },
+          className
+        )}
+        ref={ref}
+      >
+        {score.isNull ? '?' : scoreProp}
+      </div>
+    );
+  }
+);
+
+ScoreCircleBase.displayName = 'ScoreCircleBase';
+
+interface ScoreCircleProps extends Omit<ScoreCircleBaseProps, 'className'> {
+  tooltip?: React.ReactNode;
+  tooltipPlacement?: ComponentProps<typeof Tooltip>['placement'];
+}
+
+export const ScoreCircle = ({
+  score,
+  tooltip,
+  tooltipPlacement = 'bottom',
+}: ScoreCircleProps) => {
+  if (tooltip) {
+    return (
+      <Tooltip
+        placement={tooltipPlacement}
+        trigger={<ScoreCircleBase className="cursor-help" score={score} />}
+      >
+        {tooltip}
+      </Tooltip>
+    );
+  }
+
+  return <ScoreCircleBase score={score} />;
 };