refact(OfferPresenter): added useDiscountTooltipProps hook

HedvigInsurance · Jul 4, 2023 · 8f6ee6d · 8f6ee6d
1 parent c963f73
commit 8f6ee6d
Showing 1 changed file with 51 additions and 36 deletions.
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,6 +102,11 @@ export const OfferPresenter = (props: Props) => {
 
   const [handleUpdateCancellation, updateCancellationInfo] = useUpdateCancellation({ priceIntent })
 
+  const discountTooltipProps = useDiscountTooltipProps(
+    selectedOffer,
+    shopSession.cart.redeemedCampaigns,
+  )
+
   const crossedOutPrice =
     selectedOffer.cost.discount.amount > 0 ? formatter.monthlyPrice(selectedOffer.cost.gross) : null
   const displayPrice = formatter.monthlyPrice(selectedOffer.cost.net)
@@ -115,41 +119,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
@@ -324,6 +293,52 @@ type GetCancellationOptionParams = {
   productOffer: ProductOfferFragment
 }
 
+const useDiscountTooltipProps = (
+  selectedOffer: ProductOfferFragment,
+  redeemedCampaigns?: Array<RedeemedCampaign>,
+) => {
+  const { t } = useTranslation('purchase-form')
+  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,
+        }),
+        color: 'green',
+      } as const
+    }
+  }, [t, formatter, getDiscountExplanation, selectedOffer, redeemedCampaigns])
+
+  return tooltipProps
+}
+
 const getCancellationOption = (params: GetCancellationOptionParams): CancellationOption => {
   const {
     productOffer: { cancellation, startDate },