GEN-644 - feat(OfferPresenter): display discount

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

@@ -39,6 +39,7 @@
   "DETAILS_SHEET_DISMISS_BUTTON": "Done",
   "DISCOUNT_DURATION_EXPLANATION_one": "For {{count}} month, then {{monthlyPrice}}",
   "DISCOUNT_DURATION_EXPLANATION_other": "for {{count}} months, then {{monthlyPrice}}",
+  "DISCOUNT_PRICE_AFTER_EXPIRATION": "Then you pay {{amount}}",
   "DISCOUNT_STATE_FREE_MONTHS_one": "Free for {{count}} month",
   "DISCOUNT_STATE_FREE_MONTHS_other": "Free for {{count}} months",
   "DISCOUNT_STATE_INDEFINITE_PERCENTAGE": "{{percentage}}% discount",

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

@@ -39,6 +39,7 @@
   "DETAILS_SHEET_DISMISS_BUTTON": "Klar",
   "DISCOUNT_DURATION_EXPLANATION_one": "I {{count}} månad, sedan {{monthlyPrice}}",
   "DISCOUNT_DURATION_EXPLANATION_other": "i {{count}} månader, sedan {{monthlyPrice}}",
+  "DISCOUNT_PRICE_AFTER_EXPIRATION": "Sedan betalar du {{amount}}",
   "DISCOUNT_STATE_FREE_MONTHS_one": "Gratis i {{count}} månad",
   "DISCOUNT_STATE_FREE_MONTHS_other": "Gratis i {{count}} månader",
   "DISCOUNT_STATE_INDEFINITE_PERCENTAGE": "{{percentage}}% rabatt",

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

@@ -10,32 +10,6 @@ import { Money } from '@/utils/formatter'
 import { useFormatter } from '@/utils/useFormatter'
 import { CartEntry } from './CartInventory.types'
 
-export const useGetDiscountExplanation = () => {
-  const { t } = useTranslation('cart')
-  const formatter = useFormatter()
-
-  return (discount: CampaignDiscount) => {
-    switch (discount.type) {
-      case CampaignDiscountType.MonthlyCost:
-        return `-${formatter.monthlyPrice(discount.amount)}`
-
-      case CampaignDiscountType.FreeMonths:
-        return t('DISCOUNT_STATE_FREE_MONTHS', { count: discount.months })
-
-      case CampaignDiscountType.MonthlyPercentage:
-        return t('DISCOUNT_STATE_MONTHLY_PERCENTAGE', {
-          percentage: discount.percentage,
-          count: discount.months,
-        })
-
-      case CampaignDiscountType.IndefinitePercentage:
-        return t('DISCOUNT_STATE_INDEFINITE_PERCENTAGE', {
-          percentage: discount.percentage,
-        })
-    }
-  }
-}
-
 export const useGetDiscountDurationExplanation = () => {
   const { t } = useTranslation('cart')
   const formatter = useFormatter()

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

@@ -2,13 +2,11 @@ import styled from '@emotion/styled'
 import { Space, theme } from 'ui'
 import { CampaignDiscountType, CartFragmentFragment } from '@/services/apollo/generated'
 import { convertToDate } from '@/utils/date'
+import { useGetDiscountExplanation } from '@/utils/useDiscountExplanation'
 import { CampaignsSection } from './CampaignsSection'
 import { CartEntryItem } from './CartEntryItem/CartEntryItem'
 import { CartEntryList } from './CartEntryList'
-import {
-  useGetDiscountDurationExplanation,
-  useGetDiscountExplanation,
-} from './CartInventory.helpers'
+import { useGetDiscountDurationExplanation } from './CartInventory.helpers'
 import { CostSummary } from './CostSummary'
 import { ReadOnlyCampaignCodeList } from './ReadOnlyCampaignCodeList'
 

apps/store/src/components/ConfirmationPage/ConfirmationPage.stories.tsx

@@ -100,6 +100,20 @@ const cart = {
         amount: 125,
         currencyCode: CurrencyCode.Sek,
       },
+      cost: {
+        gross: {
+          amount: 125,
+          currencyCode: CurrencyCode.Sek,
+        },
+        net: {
+          amount: 125,
+          currencyCode: CurrencyCode.Sek,
+        },
+        discount: {
+          amount: 0,
+          currencyCode: CurrencyCode.Sek,
+        },
+      },
       cancellation: {
         option: ExternalInsuranceCancellationOption.None,
         requested: false,

apps/store/src/components/ProductPage/PurchaseForm/DiscountTooltip/DiscountTooltip.tsx

@@ -13,15 +13,11 @@ export const DiscountTooltip = ({ children, subtitle, color = 'green' }: Props)
   return (
     <Root>
       <Bubble>
-        <Text size="xs" color={color === 'green' ? 'textGreen' : 'textPrimary'} align="center">
+        <Text size="xs" color="textPrimary" align="center">
           {children}
         </Text>
         {subtitle && (
-          <Text
-            size="xs"
-            color={color === 'green' ? 'textGreen' : 'textSecondaryOnGray'}
-            align="center"
-          >
+          <Text size="xs" color="textSecondaryOnGray" align="center">
             {subtitle}
           </Text>
         )}

apps/store/src/components/ProductPage/PurchaseForm/OfferPresenter.tsx

@@ -13,12 +13,14 @@ import { SpaceFlex } from '@/components/SpaceFlex/SpaceFlex'
 import {
   ExternalInsuranceCancellationOption,
   ProductOfferFragment,
+  RedeemedCampaign,
 } from '@/services/apollo/generated'
 import { PriceIntent } from '@/services/priceIntent/priceIntent.types'
 import { ShopSession } from '@/services/shopSession/ShopSession.types'
 import { useTracking } from '@/services/Tracking/useTracking'
 import { convertToDate } from '@/utils/date'
 import { PageLink } from '@/utils/PageLink'
+import { useGetDiscountExplanation } from '@/utils/useDiscountExplanation'
 import { useFormatter } from '@/utils/useFormatter'
 import { CancellationForm, CancellationOption } from './CancellationForm/CancellationForm'
 import { ComparisonTableModal } from './ComparisonTableModal'
@@ -100,7 +102,12 @@ export const OfferPresenter = (props: Props) => {
 
   const [handleUpdateCancellation, updateCancellationInfo] = useUpdateCancellation({ priceIntent })
 
-  const displayPrice = formatter.monthlyPrice(selectedOffer.price)
+  const discountTooltipProps = useDiscountTooltipProps(
+    selectedOffer,
+    shopSession.cart.redeemedCampaigns,
+  )
+
+  const displayPrice = formatter.monthlyPrice(selectedOffer.cost.net)
 
   const cancellationOption = getCancellationOption({
     priceIntent,
@@ -110,30 +117,6 @@ export const OfferPresenter = (props: Props) => {
   const loading =
     loadingAddToCart || updateCancellationInfo.loading || updateStartDateResult.loading
 
-  const discountTooltipProps = useMemo(() => {
-    if (!selectedOffer.priceMatch) return null
-
-    const company = selectedOffer.priceMatch.externalInsurer.displayName
-
-    if (selectedOffer.priceMatch.priceReduction.amount < 1) {
-      // No price reduction due to incomparable offers
-      const amount = formatter.monthlyPrice(selectedOffer.priceMatch.externalPrice)
-      return {
-        children: t('PRICE_MATCH_BUBBLE_INCOMPARABLE_TITLE', { amount, company }),
-        subtitle: t('PRICE_MATCH_BUBBLE_INCOMPARABLE_SUBTITLE'),
-        color: 'gray',
-      } as const
-    }
-
-    const priceReduction = formatter.monthlyPrice(selectedOffer.priceMatch.priceReduction)
-
-    return {
-      children: t('PRICE_MATCH_BUBBLE_SUCCESS_TITLE', { amount: priceReduction }),
-      subtitle: t('PRICE_MATCH_BUBBLE_SUCCESS_SUBTITLE', { company }),
-      color: 'green',
-    } as const
-  }, [selectedOffer.priceMatch, formatter, t])
-
   const startDate = convertToDate(selectedOffer.startDate)
 
   // Sort deductibles based on monthly price
@@ -301,6 +284,56 @@ type GetCancellationOptionParams = {
   productOffer: ProductOfferFragment
 }
 
+const useDiscountTooltipProps = (
+  selectedOffer: ProductOfferFragment,
+  redeemedCampaigns?: Array<RedeemedCampaign>,
+) => {
+  const { t } = useTranslation(['purchase-form', 'cart'])
+  const formatter = useFormatter()
+  const getDiscountExplanation = useGetDiscountExplanation()
+
+  const tooltipProps = useMemo(() => {
+    if (selectedOffer.priceMatch) {
+      const company = selectedOffer.priceMatch.externalInsurer.displayName
+
+      if (selectedOffer.priceMatch.priceReduction.amount < 1) {
+        // No price reduction due to incomparable offers
+        const amount = formatter.monthlyPrice(selectedOffer.priceMatch.externalPrice)
+        return {
+          children: t('PRICE_MATCH_BUBBLE_INCOMPARABLE_TITLE', { amount, company }),
+          subtitle: t('PRICE_MATCH_BUBBLE_INCOMPARABLE_SUBTITLE'),
+          color: 'gray',
+        } as const
+      }
+
+      const priceReduction = formatter.monthlyPrice(selectedOffer.priceMatch.priceReduction)
+
+      return {
+        children: t('PRICE_MATCH_BUBBLE_SUCCESS_TITLE', { amount: priceReduction }),
+        subtitle: t('PRICE_MATCH_BUBBLE_SUCCESS_SUBTITLE', { company }),
+        color: 'green',
+      } as const
+    }
+
+    const redeemedCampaign = redeemedCampaigns?.[0]
+    if (redeemedCampaign && selectedOffer.cost.discount.amount > 0) {
+      return {
+        children: getDiscountExplanation({
+          ...redeemedCampaign.discount,
+          amount: selectedOffer.cost.discount,
+        }),
+        subtitle: t('DISCOUNT_PRICE_AFTER_EXPIRATION', {
+          amount: formatter.monthlyPrice(selectedOffer.cost.gross),
+          ns: 'cart',
+        }),
+        color: 'green',
+      } as const
+    }
+  }, [t, formatter, getDiscountExplanation, selectedOffer, redeemedCampaigns])
+
+  return tooltipProps
+}
+
 const getCancellationOption = (params: GetCancellationOptionParams): CancellationOption => {
   const {
     productOffer: { cancellation, startDate },

apps/store/src/graphql/ProductOfferFragment.graphql

@@ -26,6 +26,20 @@ fragment ProductOffer on ProductOffer {
     amount
     currencyCode
   }
+  cost {
+    gross {
+      amount
+      currencyCode
+    }
+    net {
+      amount
+      currencyCode
+    }
+    discount {
+      amount
+      currencyCode
+    }
+  }
   startDate
   cancellation {
     option

apps/store/src/pages/cart.tsx

@@ -6,7 +6,6 @@ import { useMemo } from 'react'
 import {
   getCrossOut,
   useGetDiscountDurationExplanation,
-  useGetDiscountExplanation,
   getTotal,
   getCartEntry,
 } from '@/components/CartInventory/CartInventory.helpers'
@@ -21,6 +20,7 @@ import { useShopSession } from '@/services/shopSession/ShopSessionContext'
 import { getGlobalStory } from '@/services/storyblok/storyblok'
 import { GLOBAL_STORY_PROP_NAME } from '@/services/storyblok/Storyblok.constant'
 import { isRoutingLocale } from '@/utils/l10n/localeUtils'
+import { useGetDiscountExplanation } from '@/utils/useDiscountExplanation'
 
 const NextCartPage: NextPageWithLayout = (props) => {
   const { shopSession } = useShopSession()

apps/store/src/pages/checkout/index.tsx

@@ -7,7 +7,6 @@ import {
   getCrossOut,
   getTotal,
   useGetDiscountDurationExplanation,
-  useGetDiscountExplanation,
 } from '@/components/CartInventory/CartInventory.helpers'
 import { CheckoutStep } from '@/components/CheckoutHeader/Breadcrumbs'
 import { fetchCheckoutSteps } from '@/components/CheckoutHeader/CheckoutHeader.helpers'
@@ -23,6 +22,7 @@ import { useShopSession } from '@/services/shopSession/ShopSessionContext'
 import { getShouldCollectEmail, getShouldCollectName } from '@/utils/customer'
 import { isRoutingLocale } from '@/utils/l10n/localeUtils'
 import { PageLink } from '@/utils/PageLink'
+import { useGetDiscountExplanation } from '@/utils/useDiscountExplanation'
 
 type NextPageProps = Omit<CheckoutPageProps, 'cart' | 'customerAuthenticationStatus'>
 

apps/store/src/utils/useDiscountExplanation.ts

@@ -0,0 +1,29 @@
+import { useTranslation } from 'next-i18next'
+import { CampaignDiscount, CampaignDiscountType } from '@/services/apollo/generated'
+import { useFormatter } from './useFormatter'
+
+export const useGetDiscountExplanation = () => {
+  const { t } = useTranslation('cart')
+  const formatter = useFormatter()
+
+  return (discount: CampaignDiscount) => {
+    switch (discount.type) {
+      case CampaignDiscountType.MonthlyCost:
+        return `-${formatter.monthlyPrice(discount.amount)}`
+
+      case CampaignDiscountType.FreeMonths:
+        return t('DISCOUNT_STATE_FREE_MONTHS', { count: discount.months })
+
+      case CampaignDiscountType.MonthlyPercentage:
+        return t('DISCOUNT_STATE_MONTHLY_PERCENTAGE', {
+          percentage: discount.percentage,
+          count: discount.months,
+        })
+
+      case CampaignDiscountType.IndefinitePercentage:
+        return t('DISCOUNT_STATE_INDEFINITE_PERCENTAGE', {
+          percentage: discount.percentage,
+        })
+    }
+  }
+}

packages/ui/src/components/Text/Text.tsx

@@ -29,6 +29,7 @@ export type TextProps = {
   children?: ReactNode
   className?: string
   uppercase?: boolean
+  strikethrough?: boolean
 }
 
 const elementConfig = {
@@ -38,11 +39,12 @@ const elementConfig = {
 export const TextBase = styled(
   Space,
   elementConfig,
-)<TextProps>(({ align, color, size = 'md', uppercase = false }) => ({
+)<TextProps>(({ align, color, size = 'md', uppercase = false, strikethrough = false }) => ({
   color: color ? theme.colors[color] : 'inherit',
   ...getFontSize(size),
   ...(align && { textAlign: align }),
   ...(uppercase && { textTransform: 'uppercase' }),
+  ...(strikethrough && { textDecorationLine: 'line-through' }),
 }))
 
 export const Text = ({ as, balance, children, className, ...rest }: TextProps) => (