Merged in fix/add-use-client-to-buttonlink-usage (pull request #2624)

fix: Add RestaurantBarItemLinks component with 'use client'

* Add RestaurantBarItemLinks component with 'use client'


Approved-by: Joakim Jäderberg

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/RestaurantBarItemLinks.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
+
+import { trackClick } from "@/utils/tracking"
+
+import styles from "./restaurantBarItem.module.css"
+
+export function RestaurantBarItemLinks({
+  bookTableUrl,
+  restaurantPageHref,
+  restaurantName,
+  showDetailsLink,
+}: {
+  bookTableUrl: string | null
+  restaurantPageHref: string | null
+  restaurantName: string
+  showDetailsLink: boolean
+}) {
+  const intl = useIntl()
+  if (!bookTableUrl && !restaurantPageHref) return null
+
+  return (
+    <div className={styles.ctaWrapper}>
+      {bookTableUrl ? (
+        <ButtonLink
+          variant="Primary"
+          color="Primary"
+          size="Medium"
+          typography="Body/Paragraph/mdBold"
+          href={bookTableUrl}
+          target="_blank"
+          onClick={() => trackClick("book a table", { restaurantName })}
+        >
+          {showDetailsLink
+            ? intl.formatMessage({
+                defaultMessage: "Read more",
+              })
+            : intl.formatMessage({
+                defaultMessage: "Book a table",
+              })}
+        </ButtonLink>
+      ) : null}
+      {restaurantPageHref && showDetailsLink ? (
+        <ButtonLink
+          variant="Secondary"
+          color="Primary"
+          size="Medium"
+          typography="Body/Paragraph/mdBold"
+          href={restaurantPageHref}
+        >
+          {intl.formatMessage(
+            {
+              defaultMessage: "Discover {name}",
+            },
+            { name: restaurantName }
+          )}
+        </ButtonLink>
+      ) : null}
+    </div>
+  )
+}

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx

@@ -1,4 +1,3 @@
-import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -6,9 +5,9 @@ import OpeningHours from "@/components/OpeningHours"
 import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 import { appendSlugToPathname } from "@/utils/appendSlugToPathname"
-import { trackClick } from "@/utils/tracking"
 
 import SidePeekImages from "../../Images"
+import { RestaurantBarItemLinks } from "./RestaurantBarItemLinks"
 import { getRestaurantIconName } from "./utils"
 
 import styles from "./restaurantBarItem.module.css"
@@ -97,47 +96,12 @@ export default async function RestaurantBarItem({
         </div>
       ) : null}
       {/* If (restaurantPageHref && bookTableUrl && mainBody==empty), link to external restaurant page. */}
-      {bookTableUrl || restaurantPageHref ? (
+      <RestaurantBarItemLinks
-        <div className={styles.ctaWrapper}>
+        bookTableUrl={bookTableUrl}
-          {bookTableUrl ? (
+        restaurantPageHref={restaurantPageHref}
-            <ButtonLink
+        showDetailsLink={Boolean(mainBody?.length)}
-              variant="Primary"
+        restaurantName={name}
-              color="Primary"
+      />
-              size="Medium"
-              typography="Body/Paragraph/mdBold"
-              href={bookTableUrl}
-              target="_blank"
-              onClick={() =>
-                trackClick("book a table", { restaurantName: name })
-              }
-            >
-              {restaurantPageHref && !mainBody?.length
-                ? intl.formatMessage({
-                    defaultMessage: "Read more",
-                  })
-                : intl.formatMessage({
-                    defaultMessage: "Book a table",
-                  })}
-            </ButtonLink>
-          ) : null}
-          {restaurantPageHref && mainBody?.length ? (
-            <ButtonLink
-              variant="Secondary"
-              color="Primary"
-              size="Medium"
-              typography="Body/Paragraph/mdBold"
-              href={restaurantPageHref}
-            >
-              {intl.formatMessage(
-                {
-                  defaultMessage: "Discover {name}",
-                },
-                { name: name }
-              )}
-            </ButtonLink>
-          ) : null}
-        </div>
-      ) : null}
     </div>
   )
 }