Merged in feat/SW-1943-ancillaries-with-points (pull request #1598)

feat(SW-1943): fix design to pay with points

* feat(SW-1943): fix design to pay with points


Approved-by: Niclas Edenvin

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/ActionButtons/actionButtons.module.css

@@ -9,7 +9,7 @@
   display: flex;
   padding: 0 var(--Space-x15);
   justify-content: space-between;
-  align-items: center;
+  align-items: baseline;
 }
 
 .priceButton {

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/PriceSummary/PriceRow/index.tsx

@@ -0,0 +1,38 @@
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import styles from "./priceRow.module.css"
+
+interface PriceRowProps {
+  title: string
+  quantity: number
+  label: string
+  value: string
+}
+
+export default function PriceRow({
+  title,
+  quantity,
+  label,
+  value,
+}: PriceRowProps) {
+  return (
+    <>
+      <div className={styles.column}>
+        <Typography variant="Body/Paragraph/mdBold">
+          <h2>{title}</h2>
+        </Typography>
+        <Typography variant="Body/Paragraph/mdBold">
+          <p>{`X${quantity}`}</p>
+        </Typography>
+      </div>
+      <div className={styles.column}>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <h2>{label}</h2>
+        </Typography>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <h2>{value}</h2>
+        </Typography>
+      </div>
+    </>
+  )
+}

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/PriceSummary/PriceRow/priceRow.module.css

@@ -0,0 +1,4 @@
+.column {
+  display: flex;
+  justify-content: space-between;
+}

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/PriceSummary/index.tsx

@@ -5,6 +5,8 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
 import Divider from "@/components/TempDesignSystem/Divider"
 import { formatPrice } from "@/utils/numberFormatting"
 
+import PriceRow from "./PriceRow"
+
 import styles from "./priceSummary.module.css"
 
 import type { Ancillary } from "@/types/components/myPages/myStay/ancillaries"
@@ -12,14 +14,16 @@ import type { Ancillary } from "@/types/components/myPages/myStay/ancillaries"
 interface PriceSummaryProps {
   totalPrice: number | null
   totalPoints: number | null
-  totalUnits: number
+  quantityWithPoints: number
+  quantityWithCard: number
   selectedAncillary: NonNullable<Ancillary["ancillaryContent"][number]>
 }
 
 export default function PriceSummary({
   totalPrice,
   totalPoints,
-  totalUnits,
+  quantityWithPoints,
+  quantityWithCard,
   selectedAncillary,
 }: PriceSummaryProps) {
   const intl = useIntl()
@@ -33,61 +37,48 @@ export default function PriceSummary({
       </Typography>
       <Divider color="subtle" />
 
-      <div className={styles.column}>
+      {hasTotalPrice && (
-        <Typography variant="Body/Paragraph/mdBold">
+        <PriceRow
-          <h2>{selectedAncillary.title}</h2>
+          title={selectedAncillary.title}
-        </Typography>
+          quantity={quantityWithCard}
-        <Typography variant="Body/Paragraph/mdBold">
+          label={intl.formatMessage({ id: "Price including VAT" })}
-          <p>{`X${totalUnits}`}</p>
+          value={formatPrice(
-        </Typography>
+            intl,
-      </div>
+            selectedAncillary.price.total,
-
+            selectedAncillary.price.currency
-      <div className={styles.column}>
+          )}
-        <Typography variant="Body/Paragraph/mdRegular">
+        />
-          <h2>{intl.formatMessage({ id: "Price including VAT" })}</h2>
+      )}
-        </Typography>
+      {hasTotalPoints && (
-        <Typography variant="Body/Paragraph/mdRegular">
+        <PriceRow
-          <h2>
+          title={selectedAncillary.title}
-            {formatPrice(
+          quantity={quantityWithPoints}
-              intl,
+          label={intl.formatMessage({ id: "Points" })}
-              selectedAncillary.price.total,
+          value={`${selectedAncillary.points} ${intl.formatMessage({ id: "points" })}`}
-              selectedAncillary.price.currency
+        />
-            )}
+      )}
-          </h2>
-        </Typography>
-      </div>
       <Divider color="subtle" />
       <div className={styles.column}>
-        <Typography variant="Body/Paragraph/mdRegular">
+        <Typography variant="Body/Paragraph/mdBold">
           <p>
-            {intl.formatMessage(
+            {hasTotalPrice
-              { id: "<b>Total price</b> (incl VAT)" },
+              ? intl.formatMessage({ id: "Total price including VAT" })
-              { b: (str) => <b>{str}</b> }
+              : intl.formatMessage({ id: "Total points" })}
-            )}
           </p>
         </Typography>
         <div className={styles.totalPrice}>
-          {hasTotalPoints && (
+          {(hasTotalPoints || hasTotalPrice) && (
-            <div>
-              <div>
-                <Divider variant="vertical" color="subtle" />
-              </div>
-              <Typography variant="Body/Paragraph/mdBold">
-                <p>
-                  {totalPoints} {intl.formatMessage({ id: "points" })}
-                  {hasTotalPrice && "+"}
-                </p>
-              </Typography>
-            </div>
-          )}
-          {hasTotalPrice && (
             <Typography variant="Body/Paragraph/mdBold">
               <p>
-                {formatPrice(
+                {hasTotalPrice &&
-                  intl,
+                  formatPrice(
-                  totalPrice,
+                    intl,
-                  selectedAncillary.price.currency
+                    totalPrice,
-                )}
+                    selectedAncillary.price.currency
+                  )}
+                {hasTotalPoints && hasTotalPrice && " + "}
+                {hasTotalPoints &&
+                  `${totalPoints} ${intl.formatMessage({ id: "points" })}`}
               </p>
             </Typography>
           )}

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/index.tsx

@@ -43,44 +43,59 @@ export default function PriceDetails({
     quantityWithPoints && selectedAncillary?.points
       ? selectedAncillary.points * quantityWithPoints
       : null
-  const totalUnits = (quantityWithCard ?? 0) + (quantityWithPoints ?? 0)
+
+  const hasTotalPoints = typeof totalPoints === "number"
+  const hasTotalPrice = typeof totalPrice === "number"
+
   return (
     <>
       <div className={styles.totalPrice}>
-        <Typography variant="Body/Paragraph/mdRegular">
+        <div className={styles.totalPriceInclVAT}>
-          <p>
-            {intl.formatMessage(
-              { id: "<b>Total price</b> (incl VAT)" },
-              { b: (str) => <b>{str}</b> }
-            )}
-          </p>
-        </Typography>
-        {totalPrice !== null && (
           <Typography variant="Body/Paragraph/mdBold">
-            <p>
+            <p>{intl.formatMessage({ id: "Total" })}</p>
-              {formatPrice(intl, totalPrice, selectedAncillary.price.currency)}
-            </p>
           </Typography>
-        )}
+          {totalPrice && (
-        {totalPoints !== null && (
+            <Typography variant="Body/Paragraph/mdRegular">
-          <div>
+              <p>({intl.formatMessage({ id: "Incl. VAT" })})</p>
-            <div>
+            </Typography>
-              <Divider variant="vertical" color="subtle" />
+          )}
-            </div>
+        </div>
+        <div className={styles.totalPriceValue}>
+          {hasTotalPrice && (
             <Typography variant="Body/Paragraph/mdBold">
               <p>
-                {totalPoints} {intl.formatMessage({ id: "points" })}
+                {formatPrice(
+                  intl,
+                  totalPrice,
+                  selectedAncillary.price.currency
+                )}
               </p>
             </Typography>
-          </div>
+          )}
-        )}
+          {hasTotalPoints && hasTotalPrice && (
+            <Divider variant="vertical" color="subtle" />
+          )}
+          {hasTotalPoints && (
+            <div>
+              <div>
+                <Divider variant="vertical" color="subtle" />
+              </div>
+              <Typography variant="Body/Paragraph/mdBold">
+                <p>
+                  {totalPoints} {intl.formatMessage({ id: "points" })}
+                </p>
+              </Typography>
+            </div>
+          )}
+        </div>
       </div>
       <Divider color="subtle" />
       {isPriceDetailsOpen && (
         <PriceSummary
           totalPrice={totalPrice}
           totalPoints={totalPoints}
-          totalUnits={totalUnits}
+          quantityWithCard={quantityWithCard ?? 0}
+          quantityWithPoints={quantityWithPoints ?? 0}
           selectedAncillary={selectedAncillary}
         />
       )}

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/priceDetails.module.css

@@ -7,3 +7,14 @@
   background-color: var(--Base-Surface-Secondary-light-Normal);
   border-radius: var(--Corner-radius-Medium);
 }
+
+.totalPriceInclVAT {
+  display: flex;
+  gap: var(--Space-x05);
+}
+
+.totalPriceValue {
+  display: flex;
+  gap: var(--Space-x1);
+  height: 20px;
+}

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/index.tsx

@@ -42,10 +42,9 @@ export default function SelectQuantityStep({ user }: SelectQuantityStepProps) {
 
   const insufficientPoints = currentPoints < pointsCost || currentPoints === 0
 
-  const pointsLabel =
+  const pointsLabel = insufficientPoints
-    insufficientPoints && user
+    ? intl.formatMessage({ id: "Insufficient points" })
-      ? intl.formatMessage({ id: "Insufficient points" })
+    : intl.formatMessage({ id: "Select quantity" })
-      : intl.formatMessage({ id: "Select quantity" })
 
   return (
     <div className={styles.selectContainer}>

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/addAncillaryFlowModal.module.css

@@ -57,7 +57,6 @@
   bottom: 0;
   z-index: 10;
   background: var(--Surface-Primary-OnSurface-Default);
-  border-top: 1px solid var(--Base-Border-Normal);
   padding-bottom: var(--Space-x15);
 }
 

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx

@@ -111,6 +111,7 @@ export default function AddAncillaryFlowModal({
             { ancillary: selectedAncillary?.title }
           )
         )
+        router.refresh()
       } else {
         toast.error(ancillaryErrorMessage)
       }

apps/scandic-web/i18n/dictionaries/da.json

@@ -371,6 +371,7 @@
   "In extra bed": "i ekstra seng",
   "In order to verify your account linking we will ask you to sign in to your SAS EuroBonus account.": "In order to verify your account linking we will ask you to sign in to your SAS EuroBonus account.",
   "In order to view your booking, please log in.": "Log ind for at se din reservation.",
+  "Incl. VAT": "Inkl. moms",
   "Included": "Inkluderet",
   "Indoor pool": "Indendørs pool",
   "Indoor windows and excellent lighting": "Indoor windows and excellent lighting",
@@ -643,6 +644,7 @@
   "Room facilities": "Værelsesfaciliteter",
   "Room sold out": "Værelse solgt ud",
   "Room total": "Værelse total",
+  "Room type": "Værelsestype",
   "Room {roomIndex}": "Værelse {roomIndex}",
   "Rooms": "Værelser",
   "Rooms & Guests": "Værelser & gæster",
@@ -719,6 +721,7 @@
   "Street": "Gade",
   "Submit": "Submit",
   "Successfully updated profile!": "Profilen er opdateret med succes!",
+  "Summary": "Resumé",
   "Sunday": "Søndag",
   "Surprise!": "Overraskelse!",
   "Surprises": "Surprises",
@@ -757,6 +760,7 @@
   "Total points": "Samlet antal point",
   "Total price": "Samlet pris",
   "Total price (incl VAT)": "Samlet pris (inkl. moms)",
+  "Total price including VAT": "Total pris inkl. moms",
   "Tourist": "Turist",
   "Transaction date": "Overførselsdato",
   "Transactions": "Transaktioner",

apps/scandic-web/i18n/dictionaries/de.json

@@ -372,6 +372,7 @@
   "In extra bed": "im zusätzlichen Bett",
   "In order to verify your account linking we will ask you to sign in to your SAS EuroBonus account.": "In order to verify your account linking we will ask you to sign in to your SAS EuroBonus account.",
   "In order to view your booking, please log in.": "Um Ihre Buchung einzusehen, loggen Sie sich bitte ein.",
+  "Incl. VAT": "Inkl. MwSt.",
   "Included": "Iinklusive",
   "Indoor pool": "Innenpool",
   "Indoor windows and excellent lighting": "Indoor windows and excellent lighting",
@@ -642,6 +643,7 @@
   "Room facilities": "Zimmerausstattung",
   "Room sold out": "Zimmer verkauft",
   "Room total": "Zimmer total",
+  "Room type": "Zimmertyp",
   "Room {roomIndex}": "Zimmer {roomIndex}",
   "Rooms": "Räume",
   "Rooms & Guests": "Zimmer & Gäste",
@@ -718,6 +720,7 @@
   "Street": "Straße",
   "Submit": "Submit",
   "Successfully updated profile!": "Profil erfolgreich aktualisiert!",
+  "Summary": "Zusammenfassung",
   "Sunday": "Sonntag",
   "Surprise!": "Überraschung!",
   "Surprises": "Surprises",
@@ -755,6 +758,7 @@
   "Total points": "Gesamtpunktzahl",
   "Total price": "Gesamtpreis",
   "Total price (incl VAT)": "Gesamtpreis (inkl. MwSt.)",
+  "Total price including VAT": "Gesamtpreis inkl. MwSt.",
   "Tourist": "Tourist",
   "Transaction date": "Transaktionsdatum",
   "Transactions": "Transaktionen",

apps/scandic-web/i18n/dictionaries/en.json

@@ -370,6 +370,7 @@
   "In extra bed": "In extra bed",
   "In order to verify your account linking we will ask you to sign in to your SAS EuroBonus account.": "In order to verify your account linking we will ask you to sign in to your SAS EuroBonus account.",
   "In order to view your booking, please log in.": "In order to view your booking, please log in.",
+  "Incl. VAT": "Incl. VAT",
   "Included": "Included",
   "Indoor pool": "Indoor pool",
   "Indoor windows and excellent lighting": "Indoor windows and excellent lighting",
@@ -641,6 +642,7 @@
   "Room facilities": "Room facilities",
   "Room sold out": "Room sold out",
   "Room total": "Room total",
+  "Room type": "Room type",
   "Room {roomIndex}": "Room {roomIndex}",
   "Rooms": "Rooms",
   "Rooms & Guests": "Rooms & Guests",
@@ -717,6 +719,7 @@
   "Street": "Street",
   "Submit": "Submit",
   "Successfully updated profile!": "Successfully updated profile!",
+  "Summary": "Summary",
   "Sunday": "Sunday",
   "Surprise!": "Surprise!",
   "Surprises": "Surprises",
@@ -753,6 +756,7 @@
   "Total paid": "Total paid",
   "Total points": "Total points",
   "Total price": "Total price",
+  "Total price including VAT": "Total price including VAT",
   "Tourist": "Tourist",
   "Transaction date": "Transaction date",
   "Transactions": "Transactions",

apps/scandic-web/i18n/dictionaries/fi.json

@@ -371,6 +371,7 @@
   "In extra bed": "Oma vuodepaikka",
   "In order to verify your account linking we will ask you to sign in to your SAS EuroBonus account.": "In order to verify your account linking we will ask you to sign in to your SAS EuroBonus account.",
   "In order to view your booking, please log in.": "Nähdäksesi varauksesi, ole hyvä ja kirjaudu sisään.",
+  "Incl. VAT": "Sis. ALV",
   "Included": "Sisälly hintaan",
   "Indoor pool": "Sisäuima-allas",
   "Indoor windows and excellent lighting": "Indoor windows and excellent lighting",
@@ -641,6 +642,7 @@
   "Room facilities": "Huoneen varustelu",
   "Room sold out": "Huone slutsattu",
   "Room total": "Huoneen kokonaishinta",
+  "Room type": "Huonetyyppi",
   "Room {roomIndex}": "Huone {roomIndex}",
   "Rooms": "Huoneet",
   "Rooms & Guests": "Huoneet & Vieraat",
@@ -718,6 +720,7 @@
   "Street": "Katu",
   "Submit": "Submit",
   "Successfully updated profile!": "Profiilin päivitys onnistui!",
+  "Summary": "Yhteenveto",
   "Sunday": "Sunnuntai",
   "Surprise!": "Yllätys!",
   "Surprises": "Surprises",
@@ -755,6 +758,7 @@
   "Total points": "Kokonaispisteet",
   "Total price": "Kokonaishinta",
   "Total price (incl VAT)": "Kokonaishinta (sis. ALV)",
+  "Total price including VAT": "Kokonaishinta sisältäen ALV",
   "Tourist": "Turisti",
   "Transaction date": "Tapahtuman päivämäärä",
   "Transactions": "Tapahtumat",

apps/scandic-web/i18n/dictionaries/no.json

@@ -370,6 +370,7 @@
   "In extra bed": "i ekstraseng",
   "In order to verify your account linking we will ask you to sign in to your SAS EuroBonus account.": "In order to verify your account linking we will ask you to sign in to your SAS EuroBonus account.",
   "In order to view your booking, please log in.": "For å se bestillingen din, vennligst logg inn.",
+  "Incl. VAT": "Inkl. MVA",
   "Included": "Inkludert",
   "Indoor pool": "Innendørs basseng",
   "Indoor windows and excellent lighting": "Indoor windows and excellent lighting",
@@ -639,6 +640,7 @@
   "Room details": "Room details",
   "Room facilities": "Romfasiliteter",
   "Room total": "Rom total",
+  "Room type": "Romtype",
   "Room {roomIndex}": "Rom {roomIndex}",
   "Rooms": "Rom",
   "Rooms & Guests": "Rom og gjester",
@@ -715,6 +717,7 @@
   "Street": "Gate",
   "Submit": "Submit",
   "Successfully updated profile!": "Vellykket oppdatert profil!",
+  "Summary": "Sammendrag",
   "Sunday": "Søndag",
   "Surprise!": "Overraskelse!",
   "Surprises": "Surprises",
@@ -752,6 +755,7 @@
   "Total paid": "Total betalt",
   "Total points": "Totale poeng",
   "Total price": "Totalpris",
+  "Total price including VAT": "Totalpris inkludert mva",
   "Tourist": "Turist",
   "Transaction date": "Transaksjonsdato",
   "Transactions": "Transaksjoner",

apps/scandic-web/i18n/dictionaries/sv.json

@@ -370,6 +370,7 @@
   "In extra bed": "Egen sängplats",
   "In order to verify your account linking we will ask you to sign in to your SAS EuroBonus account.": "In order to verify your account linking we will ask you to sign in to your SAS EuroBonus account.",
   "In order to view your booking, please log in.": "För att se din bokning, vänligen logga in.",
+  "Incl. VAT": "Inkl. moms",
   "Included": "Inkluderad",
   "Indoor pool": "Inomhuspool",
   "Indoor windows and excellent lighting": "Fönster inomhus och utmärkt belysning",
@@ -640,6 +641,7 @@
   "Room facilities": "Rumfaciliteter",
   "Room sold out": "Rum slutsålt",
   "Room total": "Rum total",
+  "Room type": "Rumstyp",
   "Room {roomIndex}": "Rum {roomIndex}",
   "Rooms": "Rum",
   "Rooms & Guests": "Rum och gäster",
@@ -716,6 +718,7 @@
   "Street": "Gata",
   "Submit": "Submit",
   "Successfully updated profile!": "Profilen har uppdaterats framgångsrikt!",
+  "Summary": "Sammanfattning",
   "Sunday": "Söndag",
   "Surprise!": "Överraskning!",
   "Surprises": "Surprises",
@@ -753,6 +756,7 @@
   "Total paid": "Total betalt",
   "Total points": "Poäng totalt",
   "Total price": "Totalpris",
+  "Total price including VAT": "Totalpris inklusive moms",
   "Tourist": "Turist",
   "Transaction date": "Transaktionsdatum",
   "Transactions": "Transaktioner",