refact(OfferPresenter): added useDiscountTooltipProps hook

HedvigInsurance · Jul 5, 2023 · 6918fe0 · 6918fe0
1 parent af1d9f1
commit 6918fe0
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 54 deletions.
diff --git a/apps/store/public/locales/en/cart.json b/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",

diff --git a/apps/store/public/locales/sv-se/cart.json b/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",

diff --git a/apps/store/src/components/ProductPage/PurchaseForm/DiscountTooltip/DiscountTooltip.tsx b/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>
         )}

diff --git a/apps/store/src/components/ProductPage/PurchaseForm/OfferPresenter.tsx b/apps/store/src/components/ProductPage/PurchaseForm/OfferPresenter.tsx
@@ -53,7 +53,6 @@ export const OfferPresenter = (props: Props) => {
   const [, setSelectedOffer] = useSelectedOffer()
   const { t } = useTranslation('purchase-form')
   const formatter = useFormatter()
-  const getDiscountExplanation = useGetDiscountExplanation()
   const [addToCartRedirect, setAddToCartRedirect] = useState<AddToCartRedirect | null>(null)
 
   const handleOfferChange = (offerId: string) => {
@@ -103,8 +102,11 @@ export const OfferPresenter = (props: Props) => {
 
   const [handleUpdateCancellation, updateCancellationInfo] = useUpdateCancellation({ priceIntent })
 
-  const crossedOutPrice =
-    selectedOffer.cost.discount.amount > 0 ? formatter.monthlyPrice(selectedOffer.cost.gross) : null
+  const discountTooltipProps = useDiscountTooltipProps(
+    selectedOffer,
+    shopSession.cart.redeemedCampaigns,
+  )
+
   const displayPrice = formatter.monthlyPrice(selectedOffer.cost.net)
 
   const cancellationOption = getCancellationOption({
@@ -115,41 +117,6 @@ export const OfferPresenter = (props: Props) => {
   const loading =
     loadingAddToCart || updateCancellationInfo.loading || updateStartDateResult.loading
 
-  const discountTooltipProps = 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 = shopSession.cart.redeemedCampaigns[0] as RedeemedCampaign | undefined
-    if (redeemedCampaign && selectedOffer.cost.discount.amount > 0) {
-      return {
-        children: getDiscountExplanation({
-          ...redeemedCampaign.discount,
-          amount: selectedOffer.cost.discount,
-        }),
-        color: 'green',
-      } as const
-    }
-  }, [selectedOffer, formatter, getDiscountExplanation, shopSession, t])
-
   const startDate = convertToDate(selectedOffer.startDate)
 
   // Sort deductibles based on monthly price
@@ -198,16 +165,9 @@ export const OfferPresenter = (props: Props) => {
             <SpaceFlex direction="vertical" align="center" space={1}>
               {discountTooltipProps && <DiscountTooltip {...discountTooltipProps} />}
               <Space y={0.5}>
-                <SpaceFlex space={0.5}>
-                  {crossedOutPrice && (
-                    <Text as="p" color="textSecondary" size="xl" strikethrough>
-                      {crossedOutPrice}
-                    </Text>
-                  )}
-                  <Text as="p" align="center" size="xl">
-                    {displayPrice}
-                  </Text>
-                </SpaceFlex>
+                <Text as="p" align="center" size="xl">
+                  {displayPrice}
+                </Text>
                 <Centered>
                   <TextButton onClick={onClickEdit}>
                     <Text align="center" size="xs" color="textSecondary" as="span">
@@ -324,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 },