From a698b785a575d6fd87f83250e3280227fa759a3d Mon Sep 17 00:00:00 2001 From: Guilherme Popolin Date: Wed, 5 Jul 2023 16:56:17 +0200 Subject: [PATCH] revert discount related changes (ProductOffer.cost) --- .../CartEntryItem/CartEntryCollapsible.tsx | 17 +--- .../CartEntryItem/CartEntryItem.tsx | 8 +- .../CartInventory/CartEntryOfferItem.tsx | 12 +-- .../CartInventory/CartInventory.helpers.tsx | 2 +- .../CartInventory/CartInventory.tsx | 2 +- .../CartInventory/CartInventory.types.ts | 4 +- .../ConfirmationPage.stories.tsx | 14 ---- .../PurchaseForm/DeductibleSelector.tsx | 2 +- .../PurchaseForm/OfferPresenter.tsx | 81 ++++++------------- .../PurchaseForm/ProductTierSelector.tsx | 2 +- .../ProductPage/PurchaseForm/PurchaseForm.tsx | 2 +- .../PurchaseForm/getOffersByPrice.ts | 4 +- .../OfferRecommendationFragment.graphql | 16 +--- .../src/graphql/ProductOfferFragment.graphql | 16 +--- .../manypets/migration/[shopSessionId].tsx | 4 +- apps/store/src/services/Tracking/Tracking.ts | 15 ++-- 16 files changed, 59 insertions(+), 142 deletions(-) diff --git a/apps/store/src/components/CartInventory/CartEntryItem/CartEntryCollapsible.tsx b/apps/store/src/components/CartInventory/CartEntryItem/CartEntryCollapsible.tsx index edcffa525f..678e85ebfe 100644 --- a/apps/store/src/components/CartInventory/CartEntryItem/CartEntryCollapsible.tsx +++ b/apps/store/src/components/CartInventory/CartEntryItem/CartEntryCollapsible.tsx @@ -4,21 +4,16 @@ import { motion } from 'framer-motion' import { useTranslation } from 'next-i18next' import React, { ReactNode } from 'react' import { ChevronIcon, Text, theme } from 'ui' -import { ProductOfferFragment } from '@/services/apollo/generated' -import { useFormatter } from '@/utils/useFormatter' type Props = { open: boolean onOpenChange: (open: boolean) => void - cost: ProductOfferFragment['cost'] + price: string children: ReactNode } -export const CartEntryCollapsible = ({ open, onOpenChange, cost, children }: Props) => { +export const CartEntryCollapsible = ({ open, onOpenChange, price, children }: Props) => { const { t } = useTranslation('cart') - const formatter = useFormatter() - - const hasDiscountApplied = cost.discount.amount > 0 return ( @@ -28,12 +23,7 @@ export const CartEntryCollapsible = ({ open, onOpenChange, cost, children }: Pro - {hasDiscountApplied && ( - - {formatter.monthlyPrice(cost.gross)} - - )} - {formatter.monthlyPrice(cost.net)} + {price} @@ -70,7 +60,6 @@ const PriceFlex = styled.div({ display: 'flex', alignItems: 'center', height: '100%', - gap: theme.space.xs, }) const Trigger = styled.div({ diff --git a/apps/store/src/components/CartInventory/CartEntryItem/CartEntryItem.tsx b/apps/store/src/components/CartInventory/CartEntryItem/CartEntryItem.tsx index afe3ad959d..98cbc44c4c 100644 --- a/apps/store/src/components/CartInventory/CartEntryItem/CartEntryItem.tsx +++ b/apps/store/src/components/CartInventory/CartEntryItem/CartEntryItem.tsx @@ -6,6 +6,7 @@ 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,6 +25,7 @@ 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 [expanded, setExpanded] = useState(defaultOpen) const [editProductOffer, editState] = useEditProductOffer() @@ -53,7 +55,11 @@ export const CartEntryItem = ({ defaultOpen = false, ...props }: Props) => { - + diff --git a/apps/store/src/components/CartInventory/CartEntryOfferItem.tsx b/apps/store/src/components/CartInventory/CartEntryOfferItem.tsx index 77f4018b60..4498cda57a 100644 --- a/apps/store/src/components/CartInventory/CartEntryOfferItem.tsx +++ b/apps/store/src/components/CartInventory/CartEntryOfferItem.tsx @@ -53,8 +53,6 @@ export const CartEntryOfferItem = ({ shopSessionId, product, offer }: CartOfferI if (!show) return null - const hasDiscountApplied = offer.cost.discount.amount > 0 - return ( @@ -97,14 +95,7 @@ export const CartEntryOfferItem = ({ shopSessionId, product, offer }: CartOfferI - - {hasDiscountApplied && ( - - {formatter.monthlyPrice(offer.cost.gross)} - - )} - {formatter.monthlyPrice(offer.cost.net)} - + {formatter.monthlyPrice(offer.price)} ) } @@ -151,7 +142,6 @@ 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 index da83833014..721040ff9a 100644 --- 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.cost, + cost: item.price, 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 index 28d448c6bd..149a020045 100644 --- 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.cost} + cost={item.price} 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 index 9e522d1e6e..4b9f7521da 100644 --- a/apps/store/src/components/CartInventory/CartInventory.types.ts +++ b/apps/store/src/components/CartInventory/CartInventory.types.ts @@ -1,10 +1,10 @@ -import { CartFragmentFragment, ProductOfferFragment } from '@/services/apollo/generated' +import { CartFragmentFragment } from '@/services/apollo/generated' import { Money } from '@/utils/formatter' export type CartEntry = { offerId: string title: string - cost: ProductOfferFragment['cost'] + cost: Money startDate?: Date | null pillow: { src: string; alt?: string } documents: CartFragmentFragment['entries'][number]['variant']['documents'] diff --git a/apps/store/src/components/ConfirmationPage/ConfirmationPage.stories.tsx b/apps/store/src/components/ConfirmationPage/ConfirmationPage.stories.tsx index 6da4a61234..670363c3c8 100644 --- a/apps/store/src/components/ConfirmationPage/ConfirmationPage.stories.tsx +++ b/apps/store/src/components/ConfirmationPage/ConfirmationPage.stories.tsx @@ -77,20 +77,6 @@ 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, diff --git a/apps/store/src/components/ProductPage/PurchaseForm/DeductibleSelector.tsx b/apps/store/src/components/ProductPage/PurchaseForm/DeductibleSelector.tsx index a0cbc28acf..34b6376a40 100644 --- 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.cost.net, + price: offer.price, title: offer.deductible.displayName, description: offer.deductible.tagline, }) diff --git a/apps/store/src/components/ProductPage/PurchaseForm/OfferPresenter.tsx b/apps/store/src/components/ProductPage/PurchaseForm/OfferPresenter.tsx index a24cda0e2f..d2bdd797b0 100644 --- a/apps/store/src/components/ProductPage/PurchaseForm/OfferPresenter.tsx +++ b/apps/store/src/components/ProductPage/PurchaseForm/OfferPresenter.tsx @@ -13,14 +13,12 @@ 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' @@ -102,12 +100,31 @@ export const OfferPresenter = (props: Props) => { const [handleUpdateCancellation, updateCancellationInfo] = useUpdateCancellation({ priceIntent }) - const discountTooltipProps = useDiscountTooltipProps( - selectedOffer, - shopSession.cart.redeemedCampaigns, - ) + 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 displayPrice = formatter.monthlyPrice(selectedOffer.cost.net) + 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 displayPrice = formatter.monthlyPrice(selectedOffer.price) const cancellationOption = getCancellationOption({ priceIntent, @@ -284,56 +301,6 @@ 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 }, diff --git a/apps/store/src/components/ProductPage/PurchaseForm/ProductTierSelector.tsx b/apps/store/src/components/ProductPage/PurchaseForm/ProductTierSelector.tsx index 720181d9e7..ea2ad714dd 100644 --- 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.cost.net)} + price={formatter.monthlyPrice(offer.price)} 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 index bf8d51fa04..014a0362e4 100644 --- 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.cost.net), + price: formatter.monthlyPrice(item.price), 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 index 5f4686d32c..49f8e59ca6 100644 --- 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) => { return [...offers].sort((a, b) => { - if (a.cost.net.amount < b.cost.net.amount) return -1 - if (a.cost.net.amount > b.cost.net.amount) return 1 + if (a.price.amount < b.price.amount) return -1 + if (a.price.amount > b.price.amount) return 1 return 0 }) } diff --git a/apps/store/src/graphql/OfferRecommendationFragment.graphql b/apps/store/src/graphql/OfferRecommendationFragment.graphql index 271f6cb976..cdd321e4d7 100644 --- a/apps/store/src/graphql/OfferRecommendationFragment.graphql +++ b/apps/store/src/graphql/OfferRecommendationFragment.graphql @@ -9,18 +9,8 @@ fragment OfferRecommendation on ProductOffer { displayNameFull } } - cost { - gross { - amount - currencyCode - } - net { - amount - currencyCode - } - discount { - amount - currencyCode - } + price { + amount + currencyCode } } diff --git a/apps/store/src/graphql/ProductOfferFragment.graphql b/apps/store/src/graphql/ProductOfferFragment.graphql index a49a688292..e403164eb4 100644 --- a/apps/store/src/graphql/ProductOfferFragment.graphql +++ b/apps/store/src/graphql/ProductOfferFragment.graphql @@ -22,19 +22,9 @@ fragment ProductOffer on ProductOffer { url } } - cost { - gross { - amount - currencyCode - } - net { - amount - currencyCode - } - discount { - amount - currencyCode - } + price { + amount + currencyCode } startDate cancellation { diff --git a/apps/store/src/pages/manypets/migration/[shopSessionId].tsx b/apps/store/src/pages/manypets/migration/[shopSessionId].tsx index 1e03a03c8c..951d35d4a7 100644 --- a/apps/store/src/pages/manypets/migration/[shopSessionId].tsx +++ b/apps/store/src/pages/manypets/migration/[shopSessionId].tsx @@ -127,8 +127,8 @@ export const getServerSideProps: GetServerSideProps = async (cont const baseOffer = offers[0] // TODO: take total cost from shopsession.cart.cost const totalCost: Money = { - amount: offers.reduce((sum, offer) => sum + offer.cost.net.amount, 0), - currencyCode: baseOffer.cost.net.currencyCode, + amount: offers.reduce((sum, offer) => sum + offer.price.amount, 0), + currencyCode: baseOffer.price.currencyCode, } const offersWithStartDate = offers.filter((offer) => offer.startDate !== undefined) const latestAdoptionDate = offersWithStartDate.sort(sortByStartDate)[0].startDate diff --git a/apps/store/src/services/Tracking/Tracking.ts b/apps/store/src/services/Tracking/Tracking.ts index 7935a9503a..1fec6000b1 100644 --- a/apps/store/src/services/Tracking/Tracking.ts +++ b/apps/store/src/services/Tracking/Tracking.ts @@ -20,7 +20,7 @@ type TrackingProductData = { } type TrackingOffer = { - cost: ProductOfferFragment['cost'] + price: ProductOfferFragment['price'] variant: { typeOfContract: ProductOfferFragment['variant']['typeOfContract'] product: { @@ -140,9 +140,8 @@ export class Tracking { const userData = await getLegacyUserData(this.context) const eventData = { offerData: { - insurance_price: offer.cost.gross.amount, - currency: offer.cost.gross.currencyCode as string, - + insurance_price: offer.price.amount, + currency: offer.price.currencyCode as string, insurance_type: offer.variant.typeOfContract, flow_type: offer.variant.product.name, ...getLegacyEventFlags([offer.variant.typeOfContract]), @@ -304,13 +303,13 @@ const offerToEcommerceEvent = ({ return { event, ecommerce: { - value: offer.cost.gross.amount, - currency: offer.cost.gross.currencyCode, + value: offer.price.amount, + currency: offer.price.currencyCode, items: [ { item_id: offer.variant.product.id, item_name: offer.variant.product.displayNameFull, - price: offer.cost.gross.amount, + price: offer.price.amount, item_variant: offer.variant.typeOfContract, ...(source && { item_list_id: source }), }, @@ -341,7 +340,7 @@ const cartToEcommerceEvent = ( items: cart.entries.map((entry) => ({ item_id: entry.variant.product.id, item_name: entry.variant.product.displayNameFull, - price: entry.cost.gross.amount, + price: entry.price.amount, variant: entry.variant.typeOfContract, })), },