diff --git a/apps/store/public/locales/en/cart.json b/apps/store/public/locales/en/cart.json index bf3a3bcb35..5d76e56a05 100644 --- 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 index df13220992..9c441e2d3b 100644 --- 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 index 94f3d02545..482b3d62df 100644 --- 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 ( - + {children} {subtitle && ( - + {subtitle} )} diff --git a/apps/store/src/components/ProductPage/PurchaseForm/OfferPresenter.tsx b/apps/store/src/components/ProductPage/PurchaseForm/OfferPresenter.tsx index a4265921ad..22a442d4d9 100644 --- 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(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) => { {discountTooltipProps && } - - {crossedOutPrice && ( - - {crossedOutPrice} - - )} - - {displayPrice} - - + + {displayPrice} + @@ -324,6 +284,56 @@ type GetCancellationOptionParams = { productOffer: ProductOfferFragment } +const useDiscountTooltipProps = ( + selectedOffer: ProductOfferFragment, + redeemedCampaigns?: Array, +) => { + 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 },