Merged in feat/SW-1026-breakfast-for-kids (pull request #1038)

feat(SW-1026): added info regarding children breakfast * feat(SW-1026): added info regarding children breakfast * fix: remove hardcoded currency * fix(SW-1026): remove price for no breakfast * fix: missing translation Approved-by: Christian Andolf Approved-by: Arvid Norlin
2024-12-09 14:58:54 +00:00
parent 420bf88820
commit 9b1d70b3be
9 changed files with 110 additions and 67 deletions
--- a/components/HotelReservation/EnterDetails/Breakfast/breakfast.module.css
+++ b/components/HotelReservation/EnterDetails/Breakfast/breakfast.module.css
@@ -1,3 +1,9 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}
+
 .form {
  display: grid;
  gap: var(--Spacing-x2);
--- a/components/HotelReservation/EnterDetails/Breakfast/index.tsx
+++ b/components/HotelReservation/EnterDetails/Breakfast/index.tsx
@@ -9,6 +9,7 @@ import { useEnterDetailsStore } from "@/stores/enter-details"

 import { Highlight } from "@/components/TempDesignSystem/Form/ChoiceCard/_Card"
 import RadioCard from "@/components/TempDesignSystem/Form/ChoiceCard/Radio"
+import Body from "@/components/TempDesignSystem/Text/Body"

 import { breakfastFormSchema } from "./schema"

@@ -43,6 +44,11 @@ export default function Breakfast({ packages }: BreakfastProps) {
  const updateBreakfast = useEnterDetailsStore(
    (state) => state.actions.updateBreakfast
  )
+
+  const children = useEnterDetailsStore(
+    (state) => state.booking.rooms[0].children
+  )
+
  const methods = useForm<BreakfastFormSchema>({
    defaultValues: formValuesBreakfast
      ? { breakfast: formValuesBreakfast }
@@ -75,60 +81,62 @@ export default function Breakfast({ packages }: BreakfastProps) {

  return (
    <FormProvider {...methods}>
-      <form className={styles.form} onSubmit={methods.handleSubmit(onSubmit)}>
-        {packages.map((pkg) => (
-          <RadioCard
-            key={pkg.code}
-            id={pkg.code}
-            name="breakfast"
-            subtitle={
-              pkg.code === BreakfastPackageEnum.FREE_MEMBER_BREAKFAST
-                ? intl.formatMessage<React.ReactNode>(
-                    { id: "breakfast.price.free" },
-                    {
-                      amount: pkg.localPrice.price,
-                      currency: pkg.localPrice.currency,
-                      free: (str) => <Highlight>{str}</Highlight>,
-                      strikethrough: (str) => <s>{str}</s>,
-                    }
-                  )
-                : intl.formatMessage(
-                    { id: "breakfast.price" },
-                    {
-                      amount: pkg.localPrice.price,
-                      currency: pkg.localPrice.currency,
-                    }
-                  )
-            }
-            text={intl.formatMessage({
-              id: "All our breakfast buffets offer gluten free, vegan, and allergy-friendly options.",
+      <div className={styles.container}>
+        {children?.length ? (
+          <Body>
+            {intl.formatMessage({
+              id: "Children's breakfast is always free as part of the adult's breakfast.",
            })}
-            title={intl.formatMessage({ id: "Breakfast buffet" })}
-            value={pkg.code}
+          </Body>
+        ) : null}
+        <form className={styles.form} onSubmit={methods.handleSubmit(onSubmit)}>
+          {packages.map((pkg) => (
+            <RadioCard
+              key={pkg.code}
+              id={pkg.code}
+              name="breakfast"
+              subtitle={
+                pkg.code === BreakfastPackageEnum.FREE_MEMBER_BREAKFAST
+                  ? intl.formatMessage<React.ReactNode>(
+                      { id: "breakfast.price.free" },
+                      {
+                        amount: pkg.localPrice.price,
+                        currency: pkg.localPrice.currency,
+                        free: (str) => <Highlight>{str}</Highlight>,
+                        strikethrough: (str) => <s>{str}</s>,
+                      }
+                    )
+                  : intl.formatMessage(
+                      { id: "breakfast.price" },
+                      {
+                        amount: pkg.localPrice.price,
+                        currency: pkg.localPrice.currency,
+                      }
+                    )
+              }
+              text={intl.formatMessage({
+                id: "All our breakfast buffets offer gluten free, vegan, and allergy-friendly options.",
+              })}
+              title={intl.formatMessage({ id: "Breakfast buffet" })}
+              value={pkg.code}
+              handleSelectedOnClick={
+                breakfast === pkg.code ? completeStep : undefined
+              }
+            />
+          ))}
+          <RadioCard
+            name="breakfast"
+            text={intl.formatMessage({
+              id: "You can always change your mind later and add breakfast at the hotel.",
+            })}
+            title={intl.formatMessage({ id: "No breakfast" })}
+            value="false"
            handleSelectedOnClick={
-              breakfast === pkg.code ? completeStep : undefined
+              breakfast === "false" ? completeStep : undefined
            }
          />
-        ))}
-        <RadioCard
-          name="breakfast"
-          subtitle={intl.formatMessage(
-            { id: "{amount} {currency}" },
-            {
-              amount: "0",
-              currency: "SEK",
-            }
-          )}
-          text={intl.formatMessage({
-            id: "You can always change your mind later and add breakfast at the hotel.",
-          })}
-          title={intl.formatMessage({ id: "No breakfast" })}
-          value="false"
-          handleSelectedOnClick={
-            breakfast === "false" ? completeStep : undefined
-          }
-        />
-      </form>
+        </form>
+      </div>
    </FormProvider>
  )
 }
--- a/components/HotelReservation/EnterDetails/Summary/UI/index.tsx
+++ b/components/HotelReservation/EnterDetails/Summary/UI/index.tsx
@@ -115,19 +115,18 @@ export default function SummaryUI({
            </Body>
          </div>
          <Caption color="uiTextMediumContrast">
-            {intl.formatMessage(
+            {`${intl.formatMessage(
              { id: "booking.adults" },
              { totalAdults: adults }
-            )}
+            )}${
+              children?.length
+                ? `, ${intl.formatMessage(
+                    { id: "booking.children" },
+                    { totalChildren: children.length }
+                  )}`
+                : ""
+            }`}
          </Caption>
-          {children?.length ? (
-            <Caption color="uiTextMediumContrast">
-              {intl.formatMessage(
-                { id: "booking.children" },
-                { totalChildren: children.length }
-              )}
-            </Caption>
-          ) : null}
          <Caption color="uiTextMediumContrast">{cancellationText}</Caption>
          <Popover
            placement="bottom left"
@@ -197,16 +196,40 @@ export default function SummaryUI({
          </div>
        ) : null}
        {breakfast ? (
-          <div className={styles.entry}>
+          <div>
            <Body color="uiTextHighContrast">
              {intl.formatMessage({ id: "Breakfast buffet" })}
            </Body>
-            <Body color="uiTextHighContrast">
-              {intl.formatNumber(parseInt(breakfast.localPrice.totalPrice), {
-                currency: breakfast.localPrice.currency,
-                style: "currency",
-              })}
-            </Body>
+            <div className={styles.entry}>
+              <Caption color="uiTextMediumContrast">
+                {intl.formatMessage(
+                  { id: "booking.adults" },
+                  { totalAdults: adults }
+                )}
+              </Caption>
+              <Body color="uiTextHighContrast">
+                {intl.formatNumber(parseInt(breakfast.localPrice.totalPrice), {
+                  currency: breakfast.localPrice.currency,
+                  style: "currency",
+                })}
+              </Body>
+            </div>
+            {children?.length ? (
+              <div className={styles.entry}>
+                <Caption color="uiTextMediumContrast">
+                  {intl.formatMessage(
+                    { id: "booking.children" },
+                    { totalChildren: children.length }
+                  )}
+                </Caption>
+                <Body color="uiTextHighContrast">
+                  {intl.formatNumber(0, {
+                    currency: breakfast.localPrice.currency,
+                    style: "currency",
+                  })}
+                </Body>
+              </div>
+            ) : null}
          </div>
        ) : null}
      </div>
--- a/i18n/dictionaries/da.json
+++ b/i18n/dictionaries/da.json
@@ -70,6 +70,7 @@
  "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Tjek de kreditkort, der er gemt på din profil. Betal med et gemt kort, når du er logget ind for en mere jævn weboplevelse.",
  "Check-in/Check-out": "Indtjekning/Udtjekning",
  "Children": "børn",
+  "Children's breakfast is always free as part of the adult's breakfast.": "Barnemorgenmad er altid gratis som en del af voksenmorgenmaden.",
  "Choose room": "Vælg rum",
  "Cities": "Byer",
  "City": "By",
--- a/i18n/dictionaries/de.json
+++ b/i18n/dictionaries/de.json
@@ -70,6 +70,7 @@
  "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Sehen Sie sich die in Ihrem Profil gespeicherten Kreditkarten an. Bezahlen Sie mit einer gespeicherten Karte, wenn Sie angemeldet sind, für ein reibungsloseres Web-Erlebnis.",
  "Check-in/Check-out": "Einchecken/Auschecken",
  "Children": "Kinder",
+  "Children's breakfast is always free as part of the adult's breakfast.": "Kinderfrühstück ist immer kostenlos als Teil des Frühstücks der Erwachsenen.",
  "Choose room": "Zimmer wählen",
  "Cities": "Städte",
  "City": "Stadt",
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -78,6 +78,7 @@
  "Check-out": "Check-out",
  "Child age is required": "Child age is required",
  "Children": "Children",
+  "Children's breakfast is always free as part of the adult's breakfast.": "Children's breakfast is always free as part of the adult's breakfast.",
  "Choose room": "Choose room",
  "Cities": "Cities",
  "City": "City",
--- a/i18n/dictionaries/fi.json
+++ b/i18n/dictionaries/fi.json
@@ -70,6 +70,7 @@
  "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Tarkista profiiliisi tallennetut luottokortit. Maksa tallennetulla kortilla kirjautuneena, jotta verkkokokemus on sujuvampi.",
  "Check-in/Check-out": "Sisäänkirjautuminen/Uloskirjautuminen",
  "Children": "Lasta",
+  "Children's breakfast is always free as part of the adult's breakfast.": "Lapsen ateria on aina ilmainen osana isojen aterioita.",
  "Choose room": "Valitse huone",
  "Cities": "Kaupungit",
  "City": "Kaupunki",
--- a/i18n/dictionaries/no.json
+++ b/i18n/dictionaries/no.json
@@ -70,6 +70,7 @@
  "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Sjekk ut kredittkortene som er lagret på profilen din. Betal med et lagret kort når du er pålogget for en jevnere nettopplevelse.",
  "Check-in/Check-out": "Innsjekking/Utsjekking",
  "Children": "Barn",
+  "Children's breakfast is always free as part of the adult's breakfast.": "Barnemorgenmad er altid gratis som en del af voksenmorgenmaden.",
  "Choose room": "Velg rom",
  "Cities": "Byer",
  "City": "By",
--- a/i18n/dictionaries/sv.json
+++ b/i18n/dictionaries/sv.json
@@ -70,6 +70,7 @@
  "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Kolla in kreditkorten som sparats i din profil. Betala med ett sparat kort när du är inloggad för en smidigare webbupplevelse.",
  "Check-in/Check-out": "Inchecking/Utcheckning",
  "Children": "Barn",
+  "Children's breakfast is always free as part of the adult's breakfast.": "Barnens frukost är alltid gratis som en del av vuxnas frukost.",
  "Choose room": "Välj rum",
  "Cities": "Städer",
  "City": "Ort",