GEN-644 - refact: remove references for offer.price field over offer.…

…cost (#2684) ## Describe your changes * Update codebase to rely on `ProductOffer.cost` over `ProductOffer.price` * General UI updates that makes usage of gross/net prices; * Update tracking so it makes usage of gross/net prices; ### _Add to cart notification_ - Showing net price ![Screenshot 2023-07-05 at 11 17 42](https://github.com/HedvigInsurance/racoon/assets/19200662/d2c675a3-f97d-4afc-947f-e1eaadbb2d5e) ![notify-product-was-added](https://github.com/HedvigInsurance/racoon/assets/19200662/16fe7a37-6ff1-47ce-9ebf-90faa53b1579) ___ ### _Product Tier Selector_ - Showing net price ![Screenshot 2023-07-05 at 11 26 21](https://github.com/HedvigInsurance/racoon/assets/19200662/edad85ef-7097-4f7f-bb76-e0f58af897d3) ___ ### [WIP] Lacking a better image - _Deductible Selector_ - Showing net price ![deductable-tier-selector](https://github.com/HedvigInsurance/racoon/assets/19200662/17ff63c1-9a21-4600-a17b-0678b874b638) ___ ### _Cart Inventory_ - Showing gross/net prices when applicable - only gross otherwise (For entries and recommendations) ![cart-inventory](https://github.com/HedvigInsurance/racoon/assets/19200662/56ca14fa-496f-449e-aa9b-77e848c9152a) ## Justify why they are needed `ProductOffer.price` is deprecated. We should use `ProductOffer.cost` instead.
HedvigInsurance · Jul 6, 2023 · 689b355 · 689b355 · vercel · Jul 6, 2023
1 parent 2cadb2a
commit 689b355
Show file tree

Hide file tree

Showing 13 changed files with 55 additions and 30 deletions.
diff --git a/apps/store/src/components/CartInventory/CartEntryItem/CartEntryCollapsible.tsx b/apps/store/src/components/CartInventory/CartEntryItem/CartEntryCollapsible.tsx
@@ -4,12 +4,17 @@ import { motion } from 'framer-motion'
 import { useTranslation } from 'next-i18next'
 import React, { ReactNode, useState } from 'react'
 import { ChevronIcon, Text, theme } from 'ui'
+import { ProductOfferFragment } from '@/services/apollo/generated'
+import { useFormatter } from '@/utils/useFormatter'
 
-type Props = { defaultOpen: boolean; price: string; children: ReactNode }
+type Props = { defaultOpen: boolean; cost: ProductOfferFragment['cost']; children: ReactNode }
 
-export const CartEntryCollapsible = ({ defaultOpen, price, children }: Props) => {
+export const CartEntryCollapsible = ({ defaultOpen, cost, children }: Props) => {
   const [open, setOpen] = useState(defaultOpen)
   const { t } = useTranslation('cart')
+  const formatter = useFormatter()
+
+  const hasDiscountApplied = cost.discount.amount > 0
 
   return (
     <Collapsible.Root open={open} onOpenChange={setOpen}>
@@ -19,7 +24,12 @@ export const CartEntryCollapsible = ({ defaultOpen, price, children }: Props) =>
           <ChevronIcon color={theme.colors.textTertiary} size="1rem" />
         </Trigger>
         <PriceFlex>
-          <Text>{price}</Text>
+          {hasDiscountApplied && (
+            <Text color="textSecondary" strikethrough={true}>
+              {formatter.monthlyPrice(cost.gross)}
+            </Text>
+          )}
+          <Text>{formatter.monthlyPrice(cost.net)}</Text>
         </PriceFlex>
       </DetailsHeader>
       <CollapsibleContent forceMount>
@@ -56,6 +66,7 @@ const PriceFlex = styled.div({
   display: 'flex',
   alignItems: 'center',
   height: '100%',
+  gap: theme.space.xs,
 })
 
 const Trigger = styled(Collapsible.Trigger)({

diff --git a/apps/store/src/components/CartInventory/CartEntryItem/CartEntryItem.tsx b/apps/store/src/components/CartInventory/CartEntryItem/CartEntryItem.tsx
@@ -5,7 +5,6 @@ import { useEditProductOffer } from '@/components/CartPage/useEditProductOffer'
 import { Pillow } from '@/components/Pillow/Pillow'
 import { SpaceFlex } from '@/components/SpaceFlex/SpaceFlex'
 import { CartFragmentFragment } from '@/services/apollo/generated'
-import { useFormatter } from '@/utils/useFormatter'
 import { CartEntry } from '../CartInventory.types'
 import { RemoveEntryDialog } from '../RemoveEntryDialog'
 import { CartEntryCollapsible } from './CartEntryCollapsible'
@@ -24,7 +23,6 @@ export const CartEntryItem = ({ defaultOpen = false, ...props }: Props) => {
   const { shopSessionId, readOnly, onRemove, ...cartEntry } = props
   const { title: titleLabel, cost, pillow } = cartEntry
   const { t } = useTranslation('cart')
-  const formatter = useFormatter()
 
   const [editProductOffer, editState] = useEditProductOffer()
   const handleConfirmEdit = () => {
@@ -51,7 +49,7 @@ export const CartEntryItem = ({ defaultOpen = false, ...props }: Props) => {
 
       <Space y={1}>
         <Layout.Details>
-          <CartEntryCollapsible defaultOpen={defaultOpen} price={formatter.monthlyPrice(cost)}>
+          <CartEntryCollapsible defaultOpen={defaultOpen} cost={cost}>
             <DetailsSheet {...cartEntry} />
           </CartEntryCollapsible>
         </Layout.Details>

diff --git a/apps/store/src/components/CartInventory/CartEntryOfferItem.tsx b/apps/store/src/components/CartInventory/CartEntryOfferItem.tsx
@@ -53,6 +53,8 @@ export const CartEntryOfferItem = ({ shopSessionId, product, offer }: CartOfferI
 
   if (!show) return null
 
+  const hasDiscountApplied = offer.cost.discount.amount > 0
+
   return (
     <Layout.Main>
       <Layout.Pillow>
@@ -95,7 +97,14 @@ export const CartEntryOfferItem = ({ shopSessionId, product, offer }: CartOfferI
         </Space>
       </Layout.Actions>
 
-      <Layout.Price>{formatter.monthlyPrice(offer.price)}</Layout.Price>
+      <Layout.Price>
+        {hasDiscountApplied && (
+          <Text color="textSecondary" strikethrough={true}>
+            {formatter.monthlyPrice(offer.cost.gross)}
+          </Text>
+        )}
+        {formatter.monthlyPrice(offer.cost.net)}
+      </Layout.Price>
     </Layout.Main>
   )
 }
@@ -142,6 +151,7 @@ const Layout = {
     gridArea: GRID_AREAS.Price,
     display: 'flex',
     alignItems: 'center',
+    gap: theme.space.xs,
   }),
   Content: styled.div({ gridArea: GRID_AREAS.Content }),
   Actions: styled.div({ gridArea: GRID_AREAS.Actions }),

diff --git a/apps/store/src/components/CartInventory/CartInventory.helpers.tsx b/apps/store/src/components/CartInventory/CartInventory.helpers.tsx
@@ -60,7 +60,7 @@ export const getCartEntry = (item: ShopSession['cart']['entries'][number]): Cart
   return {
     offerId: item.id,
     title: item.variant.product.displayNameFull,
-    cost: item.price,
+    cost: item.cost,
     startDate: hasCancellation ? undefined : convertToDate(item.startDate),
     pillow: {
       src: item.variant.product.pillowImage.src,

diff --git a/apps/store/src/components/CartInventory/CartInventory.tsx b/apps/store/src/components/CartInventory/CartInventory.tsx
@@ -43,7 +43,7 @@ export const CartInventory = ({ shopSessionId, cart, readOnly = false }: Props)
             key={item.id}
             offerId={item.id}
             title={item.variant.product.displayNameFull}
-            cost={item.price}
+            cost={item.cost}
             pillow={{
               src: item.variant.product.pillowImage.src,
               alt: item.variant.product.pillowImage.alt ?? '',

diff --git a/apps/store/src/components/CartInventory/CartInventory.types.ts b/apps/store/src/components/CartInventory/CartInventory.types.ts
@@ -1,10 +1,10 @@
-import { CartFragmentFragment } from '@/services/apollo/generated'
+import { CartFragmentFragment, ProductOfferFragment } from '@/services/apollo/generated'
 import { Money } from '@/utils/formatter'
 
 export type CartEntry = {
   offerId: string
   title: string
-  cost: Money
+  cost: ProductOfferFragment['cost']
   startDate?: Date | null
   pillow: { src: string; alt?: string }
   documents: CartFragmentFragment['entries'][number]['variant']['documents']

diff --git a/apps/store/src/components/ProductPage/PurchaseForm/DeductibleSelector.tsx b/apps/store/src/components/ProductPage/PurchaseForm/DeductibleSelector.tsx
@@ -37,7 +37,7 @@ export const DeductibleSelector = ({ offers, selectedOffer, onValueChange }: Pro
       if (offer.deductible) {
         levels.push({
           id: offer.id,
-          price: offer.price,
+          price: offer.cost.net,
           title: offer.deductible.displayName,
           description: offer.deductible.tagline,
         })

diff --git a/apps/store/src/components/ProductPage/PurchaseForm/ProductTierSelector.tsx b/apps/store/src/components/ProductPage/PurchaseForm/ProductTierSelector.tsx
@@ -31,7 +31,7 @@ export const ProductTierSelector = ({ offers, selectedOffer, onValueChange }: Pr
               key={offer.id}
               value={offer.id}
               title={offer.variant.displayName}
-              price={formatter.monthlyPrice(offer.price)}
+              price={formatter.monthlyPrice(offer.cost.net)}
               description={getVariantDescription(offer.variant.typeOfContract)}
             />
           ))}

diff --git a/apps/store/src/components/ProductPage/PurchaseForm/PurchaseForm.tsx b/apps/store/src/components/ProductPage/PurchaseForm/PurchaseForm.tsx
@@ -199,7 +199,7 @@ export const PurchaseForm = () => {
 
             notifyProductAdded({
               name: productData.displayNameFull,
-              price: formatter.monthlyPrice(item.price),
+              price: formatter.monthlyPrice(item.cost.net),
               pillowSrc: productData.pillowImage.src,
               description:
                 !item.cancellation.requested ||

diff --git a/apps/store/src/components/ProductPage/PurchaseForm/getOffersByPrice.ts b/apps/store/src/components/ProductPage/PurchaseForm/getOffersByPrice.ts
@@ -2,8 +2,8 @@ import { ProductOfferFragment } from '@/services/apollo/generated'
 
 export const getOffersByPrice = (offers: Array<ProductOfferFragment>) => {
   return [...offers].sort((a, b) => {
-    if (a.price.amount < b.price.amount) return -1
-    if (a.price.amount > b.price.amount) return 1
+    if (a.cost.net.amount < b.cost.net.amount) return -1
+    if (a.cost.net.amount > b.cost.net.amount) return 1
     return 0
   })
 }
diff --git a/apps/store/src/graphql/OfferRecommendationFragment.graphql b/apps/store/src/graphql/OfferRecommendationFragment.graphql
@@ -9,8 +9,18 @@ fragment OfferRecommendation on ProductOffer {
       displayNameFull
     }
   }
-  price {
-    amount
-    currencyCode
+  cost {
+    gross {
+      amount
+      currencyCode
+    }
+    net {
+      amount
+      currencyCode
+    }
+    discount {
+      amount
+      currencyCode
+    }
   }
 }
diff --git a/apps/store/src/graphql/ProductOfferFragment.graphql b/apps/store/src/graphql/ProductOfferFragment.graphql
@@ -22,10 +22,6 @@ fragment ProductOffer on ProductOffer {
       url
     }
   }
-  price {
-    amount
-    currencyCode
-  }
   cost {
     gross {
       amount

diff --git a/apps/store/src/services/Tracking/Tracking.ts b/apps/store/src/services/Tracking/Tracking.ts
@@ -20,7 +20,7 @@ type TrackingProductData = {
 }
 
 type TrackingOffer = {
-  price: ProductOfferFragment['price']
+  cost: ProductOfferFragment['cost']
   variant: {
     typeOfContract: ProductOfferFragment['variant']['typeOfContract']
     product: {
@@ -140,8 +140,8 @@ export class Tracking {
     const userData = await getLegacyUserData(this.context)
     const eventData = {
       offerData: {
-        insurance_price: offer.price.amount,
-        currency: offer.price.currencyCode as string,
+        insurance_price: offer.cost.gross.amount,
+        currency: offer.cost.gross.currencyCode as string,
 
         insurance_type: offer.variant.typeOfContract,
         flow_type: offer.variant.product.name,
@@ -304,13 +304,13 @@ const offerToEcommerceEvent = ({
   return {
     event,
     ecommerce: {
-      value: offer.price.amount,
-      currency: offer.price.currencyCode,
+      value: offer.cost.gross.amount,
+      currency: offer.cost.gross.currencyCode,
       items: [
         {
           item_id: offer.variant.product.id,
           item_name: offer.variant.product.displayNameFull,
-          price: offer.price.amount,
+          price: offer.cost.gross.amount,
           item_variant: offer.variant.typeOfContract,
           ...(source && { item_list_id: source }),
         },
@@ -341,7 +341,7 @@ const cartToEcommerceEvent = (
       items: cart.entries.map((entry) => ({
         item_id: entry.variant.product.id,
         item_name: entry.variant.product.displayNameFull,
-        price: entry.price.amount,
+        price: entry.cost.gross.amount,
         variant: entry.variant.typeOfContract,
       })),
     },