Merged in feat/SW-2398-ui-update-for-booking-codes (pull request #1862)

feat: SW-2398 UI updates booking codes

* feat: SW-2398 UI updates booking codes

* feat: SW-2398 Rate cards UI changes

* feat: SW-2398 Optimized css with vars and chip code

* feat: SW-2398 Optimized code as review comments

* feat: SW-2398 Optimized code

* feat: SW-2398 Optimized code and mobile UX

* feat: SW-2398 Optimized code

* feat: SW-2398 Fixed UI

* feat: SW-2398 Updated animation


Approved-by: Erik Tiekstra

apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx

@@ -5,17 +5,15 @@ import { useIntl } from "react-intl"
 
 import { Button } from "@scandic-hotels/design-system/Button"
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
-import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { dt } from "@/lib/dt"
 
+import BookingCodeChip from "@/components/BookingCodeChip"
 import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"
 import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
 import Modal from "@/components/Modal"
 import Divider from "@/components/TempDesignSystem/Divider"
-import IconChip from "@/components/TempDesignSystem/IconChip"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -97,6 +95,12 @@ export default function SummaryUI({
     : false
 
   const priceDetailsRooms = mapToPrice(rooms, isMember, nights)
+  const isAllCampaignRate = rooms.every(
+    (room) => room.room.roomRate.rateDefinition.isCampaignRate
+  )
+  const isAllBreakfastIncluded = rooms.every(
+    (room) => room.room.roomRate.rateDefinition.breakfastIncluded
+  )
 
   return (
     <section className={styles.summary}>
@@ -460,6 +464,7 @@ export default function SummaryUI({
             <PriceDetailsModal
               bookingCode={booking.bookingCode}
               fromDate={booking.fromDate}
+              isCampaignRate={isAllCampaignRate}
               rooms={priceDetailsRooms}
               toDate={booking.toDate}
               totalPrice={totalPrice}
@@ -503,28 +508,12 @@ export default function SummaryUI({
             )}
           </div>
         </div>
-        {booking.bookingCode && (
-          <Typography variant="Body/Supporting text (caption)/smRegular">
-            <IconChip
-              color="blue"
-              icon={<DiscountIcon color="Icon/Feedback/Information" />}
-            >
-              {intl.formatMessage(
-                {
-                  defaultMessage: "<strong>Booking code</strong>: {value}",
-                },
-                {
-                  value: booking.bookingCode,
-                  strong: (text) => (
-                    <Typography variant="Body/Supporting text (caption)/smBold">
-                      <strong>{text}</strong>
-                    </Typography>
-                  ),
-                }
-              )}
-            </IconChip>
-          </Typography>
-        )}
+        <BookingCodeChip
+          isCampaign={isAllCampaignRate}
+          bookingCode={booking.bookingCode}
+          isBreakfastIncluded={isAllBreakfastIncluded}
+          alignCenter
+        />
         <Divider className={styles.bottomDivider} color="primaryLightSubtle" />
       </div>
       {showSignupPromo && roomOneMemberPrice && !isMember ? (