Add tooltip to Cart Item

apps/store/package.json

@@ -33,6 +33,7 @@
     "@radix-ui/react-select": "1.2.2",
     "@radix-ui/react-switch": "1.0.3",
     "@radix-ui/react-tabs": "1.0.4",
+    "@radix-ui/react-tooltip": "1.0.6",
     "@storyblok/react": "2.1.7",
     "@types/uuid": "9.0.2",
     "@vercel/edge-config": "0.2.1",

apps/store/public/locales/en/cart.json

@@ -8,6 +8,8 @@
   "CART_ENTRY_AUTO_SWITCH": "Automatically switches",
   "CART_ENTRY_DATE_LABEL": "Activates {{date}}",
   "CART_ENTRY_EDIT_BUTTON": "Edit",
+  "CART_ITEM_TOOLTIP_AUTO_SWITCH": "We help you switch. The insurance activates when your current one expires.",
+  "CART_ITEM_TOOLTIP_SELF_SWITCH": "You can change your start date in our app until the activation day.",
   "CART_PAGE_HEADING": "Your cart",
   "CHECKOUT_ADD_DISCOUNT_BUTTON": "Add",
   "CHECKOUT_BUTTON": "Go to checkout",

apps/store/public/locales/en/common.json

@@ -41,5 +41,7 @@
   "PAYMENT_CONNECT_TITLE": "Connect direct debit",
   "READ_MORE": "Read more",
   "SELECT_INSURANCE": "Select insurance",
+  "TRUSTPILOT_REVIEWS_COUNT": "Based on {{numberOfReviews}} reviews on",
+  "TRUSTPILOT_SCORE": "{{score}} of 5",
   "UNKNOWN_ERROR_MESSAGE": "Something went wrong, please try again."
 }

apps/store/public/locales/sv-se/cart.json

@@ -8,6 +8,8 @@
   "CART_ENTRY_AUTO_SWITCH": "Automatiskt byte",
   "CART_ENTRY_DATE_LABEL": "Aktiveras {{date}}",
   "CART_ENTRY_EDIT_BUTTON": "Ändra",
+  "CART_ITEM_TOOLTIP_AUTO_SWITCH": "Vi hjälper dig med bytet. Försäkringen aktiveras när din nuvarande går ut.",
+  "CART_ITEM_TOOLTIP_SELF_SWITCH": "Du kan ändra ditt startdatum i vår app fram till aktiveringsdagen.",
   "CART_PAGE_HEADING": "Din varukorg",
   "CHECKOUT_ADD_DISCOUNT_BUTTON": "Lägg till",
   "CHECKOUT_BUTTON": "Fortsätt till kassan",

apps/store/public/locales/sv-se/common.json

@@ -38,5 +38,7 @@
   "PAYMENT_CONNECT_TITLE": "Koppla autogiro",
   "READ_MORE": "Läs mer",
   "SELECT_INSURANCE": "Välj försäkring",
+  "TRUSTPILOT_REVIEWS_COUNT": "Baserat på {{numberOfReviews}} recensioner på",
+  "TRUSTPILOT_SCORE": "{{score}} av 5",
   "UNKNOWN_ERROR_MESSAGE": "Något gick fel, försök igen."
 }

apps/store/src/components/CartInventory/CartEntryItem/CartEntryItem.tsx

@@ -46,6 +46,7 @@ export const CartEntryItem = ({ defaultOpen = false, ...props }: Props) => {
 
           <div>
             <Text>{titleLabel}</Text>
+
             <ShortSummary cartEntry={cartEntry} />
           </div>
         </SpaceFlex>

apps/store/src/components/CartInventory/CartEntryItem/ShortSummary.tsx

@@ -1,7 +1,9 @@
 import { useTranslation } from 'react-i18next'
-import { Text } from 'ui'
+import { InfoIcon, Text, theme } from 'ui'
+import { SpaceFlex } from '@/components/SpaceFlex/SpaceFlex'
 import { useFormatter } from '@/utils/useFormatter'
 import { CartEntry } from '../CartInventory.types'
+import { Tooltip } from './Tooltip'
 
 export const ShortSummary = ({ cartEntry }: { cartEntry: CartEntry }) => {
   const { t } = useTranslation('cart')
@@ -14,12 +16,28 @@ export const ShortSummary = ({ cartEntry }: { cartEntry: CartEntry }) => {
     content.push(productBasedSummary)
   }
 
-  const activationDate = cartEntry.startDate
-    ? t('CART_ENTRY_DATE_LABEL', { date: formatter.fromNow(cartEntry.startDate) })
-    : t('CART_ENTRY_AUTO_SWITCH')
-  content.push(activationDate)
+  const labels = cartEntry.startDate
+    ? {
+        text: t('CART_ENTRY_DATE_LABEL', { date: formatter.fromNow(cartEntry.startDate) }),
+        tooltip: t('CART_ITEM_TOOLTIP_SELF_SWITCH'),
+      }
+    : {
+        text: t('CART_ENTRY_AUTO_SWITCH'),
+        tooltip: t('CART_ITEM_TOOLTIP_AUTO_SWITCH'),
+      }
 
-  return <Text color="textSecondary">{content.join(' • ')}</Text>
+  content.push(labels.text)
+
+  return (
+    <SpaceFlex space={0.25} align="center">
+      <Text color="textSecondary">{content.join(' • ')}</Text>
+      <Tooltip message={labels.tooltip}>
+        <button onClick={(event) => event.stopPropagation()}>
+          <InfoIcon color={theme.colors.textSecondary} />
+        </button>
+      </Tooltip>
+    </SpaceFlex>
+  )
 }
 
 // TODO: retrieve this from API or some sort of central config.

apps/store/src/components/CartInventory/CartEntryItem/Tooltip.tsx

@@ -0,0 +1,62 @@
+// Based on Radix Tooltip (https://www.radix-ui.com/docs/primitives/components/tooltip)
+
+import { keyframes } from '@emotion/react'
+import styled from '@emotion/styled'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { Text, theme } from 'ui'
+
+type Props = {
+  message: string
+  children: React.ReactNode
+}
+
+export const Tooltip = ({ children, message }: Props) => {
+  return (
+    <TooltipPrimitive.Provider>
+      <TooltipPrimitive.Root delayDuration={0}>
+        <TooltipPrimitive.Trigger asChild={true}>{children}</TooltipPrimitive.Trigger>
+        <TooltipPrimitive.Portal>
+          <Content sideOffset={5} onClick={(event) => event.stopPropagation()}>
+            <Text size="xs" color="textNegative" align="center" balance={true}>
+              {message}
+            </Text>
+            <TooltipPrimitive.Arrow />
+          </Content>
+        </TooltipPrimitive.Portal>
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+  )
+}
+
+const slideUpAndFadeAnimation = keyframes({
+  '0%': { opacity: 0, transform: 'translateY(10px)' },
+  '100%': { opacity: 1, transform: 'translateY(0)' },
+})
+
+const slideDownAndFadeAnimation = keyframes({
+  '0%': { opacity: 0, transform: 'translateY(-10px)' },
+  '100%': { opacity: 1, transform: 'translateY(0)' },
+})
+
+const Content = styled(TooltipPrimitive.Content)({
+  paddingInline: theme.space.sm,
+  paddingBlock: theme.space.xs,
+  paddingBottom: `calc(${theme.space.xs} + 2px)`,
+  backgroundColor: theme.colors.gray900,
+  borderRadius: theme.radius[1],
+
+  maxWidth: '20rem',
+  maxHeight: 'var(--radix-tooltip-content-available-height)',
+
+  animationDuration: '0.6s',
+  animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
+  transformOrigin: 'var(--radix-tooltip-content-transform-origin)',
+
+  '&[data-side="top"]': {
+    animationName: slideUpAndFadeAnimation,
+  },
+
+  '&[data-side="bottom"]': {
+    animationName: slideDownAndFadeAnimation,
+  },
+})

yarn.lock

@@ -7422,6 +7422,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-tooltip@npm:1.0.6":
+  version: 1.0.6
+  resolution: "@radix-ui/react-tooltip@npm:1.0.6"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/primitive": 1.0.1
+    "@radix-ui/react-compose-refs": 1.0.1
+    "@radix-ui/react-context": 1.0.1
+    "@radix-ui/react-dismissable-layer": 1.0.4
+    "@radix-ui/react-id": 1.0.1
+    "@radix-ui/react-popper": 1.1.2
+    "@radix-ui/react-portal": 1.0.3
+    "@radix-ui/react-presence": 1.0.1
+    "@radix-ui/react-primitive": 1.0.3
+    "@radix-ui/react-slot": 1.0.2
+    "@radix-ui/react-use-controllable-state": 1.0.1
+    "@radix-ui/react-visually-hidden": 1.0.3
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 8220f103432e9ad9ff8a828ca890e14bf3323864a0bb145d1ef689cf446ab5ca0af18e5fed5da89db957065c504e79ec12fbe5e551d6e7b84b470fbd672c918d
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-use-callback-ref@npm:1.0.1":
   version: 1.0.1
   resolution: "@radix-ui/react-use-callback-ref@npm:1.0.1"
@@ -22913,6 +22944,7 @@ __metadata:
     "@radix-ui/react-select": 1.2.2
     "@radix-ui/react-switch": 1.0.3
     "@radix-ui/react-tabs": 1.0.4
+    "@radix-ui/react-tooltip": 1.0.6
     "@storyblok/react": 2.1.7
     "@storybook/addon-actions": 7.0.26
     "@storybook/addon-essentials": 7.0.26