From 87ea2590982bae6f27db653c06286e6485e8be54 Mon Sep 17 00:00:00 2001
From: Ben Pearey <bpearey@amplience.com>
Date: Mon, 27 Nov 2023 16:43:28 +0000
Subject: [PATCH] feat(shoppable-image): basic product tooltip

---
 .../ShoppableImageInteractable.tsx            | 43 ++++++++++++++-----
 .../ShoppableProductTooltip.tsx               | 24 +++++++++++
 2 files changed, 56 insertions(+), 11 deletions(-)
 create mode 100644 components/cms-modern/ShoppableImageInteractable/ShoppableProductTooltip.tsx

diff --git a/components/cms-modern/ShoppableImageInteractable/ShoppableImageInteractable.tsx b/components/cms-modern/ShoppableImageInteractable/ShoppableImageInteractable.tsx
index b10599d7..934be6c2 100644
--- a/components/cms-modern/ShoppableImageInteractable/ShoppableImageInteractable.tsx
+++ b/components/cms-modern/ShoppableImageInteractable/ShoppableImageInteractable.tsx
@@ -1,20 +1,28 @@
 import { Tooltip } from '@mui/material';
 import Link from 'next/link';
 import React, { ReactElement } from 'react';
+import { ShoppableProductTooltip } from './ShoppableProductTooltip';
+
+export enum InteractableType {
+    PAGE = '.page',
+    LINK = '.link',
+    PRODUCT = '.product',
+    CATEGORY = '.category',
+}
 
 const urlBuilder = (selector: string, target: string) => {
     let url = '#';
     switch (selector) {
-        case '.page':
+        case InteractableType.PAGE:
             url = `/${target}`;
             break;
-        case '.link':
+        case InteractableType.LINK:
             url = target;
             break;
-        case '.product':
+        case InteractableType.PRODUCT:
             url = `/product/${target}`;
             break;
-        case '.category':
+        case InteractableType.CATEGORY:
             url = `/category/${target}`;
             break;
         default:
@@ -34,13 +42,26 @@ type ShoppableImageInteractableProps = {
 };
 
 const ShoppableImageInteractable = ({ children, selector, target }: ShoppableImageInteractableProps) => {
-    return (
-        <Link passHref href={urlBuilder(selector, target)}>
-            <Tooltip title={titleBuilder(selector, target)} followCursor>
-                {children}
-            </Tooltip>
-        </Link>
-    );
+    switch (selector) {
+        case InteractableType.PRODUCT: {
+            return (
+                <Link passHref href={urlBuilder(selector, target)}>
+                    <ShoppableProductTooltip title={urlBuilder(selector, target)} target={target}>
+                        {children}
+                    </ShoppableProductTooltip>
+                </Link>
+            );
+        }
+        default: {
+            return (
+                <Link passHref href={urlBuilder(selector, target)}>
+                    <Tooltip title={titleBuilder(selector, target)} followCursor>
+                        {children}
+                    </Tooltip>
+                </Link>
+            );
+        }
+    }
 };
 
 export default ShoppableImageInteractable;
diff --git a/components/cms-modern/ShoppableImageInteractable/ShoppableProductTooltip.tsx b/components/cms-modern/ShoppableImageInteractable/ShoppableProductTooltip.tsx
new file mode 100644
index 00000000..c5d0ae66
--- /dev/null
+++ b/components/cms-modern/ShoppableImageInteractable/ShoppableProductTooltip.tsx
@@ -0,0 +1,24 @@
+import { Tooltip } from '@mui/material';
+import { ReactElement, useEffect, useState } from 'react';
+import { commerceApi } from '@pages/api';
+
+type ShoppableProductTooltipProps = {
+    children: ReactElement;
+    title: string;
+    target: string;
+};
+
+export const ShoppableProductTooltip = ({ children, title, target }: ShoppableProductTooltipProps) => {
+    const [tooltip, setTooltip] = useState(title);
+
+    useEffect(() => {
+        commerceApi.getProduct({ id: target }).then((product) => {
+            setTooltip(`${product.name} - ${product.variants[0]?.listPrice}`);
+        });
+    });
+    return (
+        <Tooltip title={tooltip} followCursor>
+            {children}
+        </Tooltip>
+    );
+};