fix: unite all price details modals to one and align on ui

apps/scandic-web/components/HotelReservation/PriceDetailsModal/index.tsx

@@ -0,0 +1,34 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { Button } from "@scandic-hotels/design-system/Button"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+
+import Modal from "@/components/Modal"
+
+import PriceDetailsTable, {
+  type PriceDetailsTableProps,
+} from "./PriceDetailsTable"
+
+function Trigger({ title }: { title: string }) {
+  return (
+    <Button
+      variant="Text"
+      typography="Body/Supporting text (caption)/smBold"
+      wrapping={false}
+    >
+      {title}
+      <MaterialIcon icon="chevron_right" color="CurrentColor" size={20} />
+    </Button>
+  )
+}
+
+export default function PriceDetailsModal(props: PriceDetailsTableProps) {
+  const intl = useIntl()
+  const title = intl.formatMessage({ defaultMessage: "Price details" })
+  return (
+    <Modal title={title} trigger={<Trigger title={title} />}>
+      <PriceDetailsTable {...props} />
+    </Modal>
+  )
+}