Merged in feat/sw-3587-add-partner-copy-for-member-price (pull request #3053)

feat(SW-3587): Add new member price copy to partner variants

* Add new member price copy to partner variants


Approved-by: Joakim Jäderberg

packages/booking-flow/lib/components/HotelCardListing/index.tsx

@@ -13,7 +13,10 @@ import { useScrollToTop } from "@scandic-hotels/common/hooks/useScrollToTop"
 import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
 import { HotelCard } from "@scandic-hotels/design-system/HotelCard"
 
-import { useGetPointsCurrency } from "../../bookingFlowConfig/bookingFlowConfigContext"
+import {
+  useBookingFlowConfig,
+  useGetPointsCurrency,
+} from "../../bookingFlowConfig/bookingFlowConfigContext"
 import { useIsLoggedIn } from "../../hooks/useIsLoggedIn"
 import useLang from "../../hooks/useLang"
 import { mapApiImagesToGalleryImages } from "../../misc/imageGallery"
@@ -60,6 +63,7 @@ export default function HotelCardListing({
   const { showBackToTop, scrollToTop } = useScrollToTop({ threshold: 490 })
   const activeCardRef = useRef<HTMLDivElement | null>(null)
   const pointsCurrency = useGetPointsCurrency()
+  const config = useBookingFlowConfig()
 
   const sortBy = searchParams.get("sort") ?? DEFAULT_SORT
 
@@ -250,6 +254,7 @@ export default function HotelCardListing({
             bookingCode={bookingCode}
             isCampaignWithBookingCode={isCampaignWithBookingCode}
             isAlternative={isAlternative}
+            isPartnerBrand={config.variant !== "scandic"}
           />
         </div>
       ))}

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Campaign.tsx

@@ -4,6 +4,7 @@ import { useIntl } from "react-intl"
 import CampaignRateCard from "@scandic-hotels/design-system/CampaignRateCard"
 import NoRateAvailableCard from "@scandic-hotels/design-system/NoRateAvailableCard"
 
+import { useBookingFlowConfig } from "../../../../../../../bookingFlowConfig/bookingFlowConfigContext"
 import { useSelectRateContext } from "../../../../../../../contexts/SelectRate/SelectRateContext"
 import { useIsLoggedIn } from "../../../../../../../hooks/useIsLoggedIn"
 import { BookingCodeFilterEnum } from "../../../../../../../stores/bookingCode-filter"
@@ -12,6 +13,7 @@ import {
   sumPackagesRequestedPrice,
 } from "../../../../../../../utils/SelectRate"
 import { calculatePricePerNightPriceProduct } from "./totalPricePerNight"
+import { getMemberPriceMessage } from "./translation-utils"
 import { useRateTitles } from "./useRateTitles"
 
 import type {
@@ -82,6 +84,7 @@ function Inner({
     isRateSelected,
     actions: { selectRate },
   } = useSelectRateContext()
+  const config = useBookingFlowConfig()
 
   const rateTitles = useRateTitles()
   const isUserLoggedIn = useIsLoggedIn()
@@ -98,10 +101,7 @@ function Inner({
     defaultMessage: "Standard price",
   })
 
-  const memberPriceMsg = intl.formatMessage({
+  const memberPriceMsg = getMemberPriceMessage(intl, config)
-    id: "booking.memberPrice",
-    defaultMessage: "Member price",
-  })
 
   if (!product.public || (isUserLoggedIn && !product.member)) {
     return (

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Regular.tsx

@@ -4,6 +4,7 @@ import { useIntl } from "react-intl"
 import NoRateAvailableCard from "@scandic-hotels/design-system/NoRateAvailableCard"
 import RegularRateCard from "@scandic-hotels/design-system/RegularRateCard"
 
+import { useBookingFlowConfig } from "../../../../../../../bookingFlowConfig/bookingFlowConfigContext"
 import { useSelectRateContext } from "../../../../../../../contexts/SelectRate/SelectRateContext"
 import { useIsLoggedIn } from "../../../../../../../hooks/useIsLoggedIn"
 import { BookingCodeFilterEnum } from "../../../../../../../stores/bookingCode-filter"
@@ -12,6 +13,7 @@ import {
   sumPackagesRequestedPrice,
 } from "../../../../../../../utils/SelectRate"
 import { calculatePricePerNightPriceProduct } from "./totalPricePerNight"
+import { getMemberPriceMessage } from "./translation-utils"
 import { useRateTitles } from "./useRateTitles"
 
 import type { Package } from "@scandic-hotels/trpc/types/packages"
@@ -81,6 +83,7 @@ function Inner({
     bookingCodeFilter,
     actions: { selectRate },
   } = useSelectRateContext()
+  const config = useBookingFlowConfig()
 
   const isMainRoom = roomIndex === 0
 
@@ -102,10 +105,7 @@ function Inner({
     defaultMessage: "Standard price",
   })
 
-  const memberPriceMsg = intl.formatMessage({
+  const memberPriceMsg = getMemberPriceMessage(intl, config)
-    id: "booking.memberPrice",
-    defaultMessage: "Member price",
-  })
 
   const approxMsg = intl.formatMessage({
     id: "booking.approx",

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/translation-utils.ts

@@ -0,0 +1,23 @@
+import type { IntlShape } from "react-intl"
+
+import type { BookingFlowConfig } from "../../../../../../../bookingFlowConfig/bookingFlowConfig"
+
+export function getMemberPriceMessage(
+  intl: IntlShape,
+  config: BookingFlowConfig
+) {
+  if (config.variant !== "scandic") {
+    return intl.formatMessage({
+      id: "booking.scandicFriendsMemberPrice",
+      defaultMessage: "Scandic Friends member price",
+      description: {
+        context: "Member price label in white label partner sites",
+      },
+    })
+  }
+
+  return intl.formatMessage({
+    id: "booking.memberPrice",
+    defaultMessage: "Member price",
+  })
+}

packages/design-system/lib/components/HotelCard/HotelCard.stories.tsx

@@ -62,6 +62,7 @@ export const Default: Story = {
     },
     state: 'default',
     isAlternative: false,
+    isPartnerBrand: false,
     type: 'pageListing',
     isUserLoggedIn: false,
     distanceToCityCenter: 0,

packages/design-system/lib/components/HotelCard/HotelPriceCard/index.tsx

@@ -21,6 +21,7 @@ export type PriceCardProps = {
   isMemberPrice?: boolean
   className?: string
   isCampaign?: boolean
+  isPartnerBrand: boolean
 }
 
 export function HotelPriceCard({
@@ -28,6 +29,7 @@ export function HotelPriceCard({
   isMemberPrice = false,
   className,
   isCampaign = false,
+  isPartnerBrand,
 }: PriceCardProps) {
   const intl = useIntl()
   const isRegularOrPublicPromotionRate =
@@ -45,10 +47,19 @@ export function HotelPriceCard({
                 className={styles.redColor}
               >
                 <p>
-                  {intl.formatMessage({
+                  {isPartnerBrand
-                    id: 'booking.memberPrice',
+                    ? intl.formatMessage({
-                    defaultMessage: 'Member price',
+                        id: 'booking.scandicFriendsMemberPrice',
-                  })}
+                        defaultMessage: 'Scandic Friends member price',
+                        description: {
+                          context:
+                            'Member price label in white label partner sites',
+                        },
+                      })
+                    : intl.formatMessage({
+                        id: 'booking.memberPrice',
+                        defaultMessage: 'Member price',
+                      })}
                 </p>
               </Typography>
             </dt>

packages/design-system/lib/components/HotelCard/index.tsx

@@ -106,6 +106,7 @@ export type HotelCardProps = {
   state?: 'default' | 'active'
   bookingCode?: string | null
   isAlternative?: boolean
+  isPartnerBrand: boolean
   pointsCurrency?: CurrencyEnum
   fullPrice: boolean
   isCampaignWithBookingCode: boolean
@@ -128,6 +129,7 @@ export const HotelCard = memo(
     type = 'pageListing',
     bookingCode = '',
     isAlternative,
+    isPartnerBrand,
     pointsCurrency,
     images,
     lang,
@@ -288,6 +290,7 @@ export const HotelCard = memo(
                   prices?.public && (
                     <HotelPriceCard
                       productTypePrices={prices.public}
+                      isPartnerBrand={isPartnerBrand}
                       className={styles.priceCard}
                       isCampaign={isCampaign}
                     />
@@ -295,6 +298,7 @@ export const HotelCard = memo(
                 {prices.member && (
                   <HotelPriceCard
                     productTypePrices={prices.member}
+                    isPartnerBrand={isPartnerBrand}
                     className={styles.priceCard}
                     isMemberPrice
                   />