first load

templates/service_page.hbs

@@ -0,0 +1,33 @@
+<div class="container-divider"></div>
+<div class="container">
+  <div class="sub-nav">
+    {{breadcrumbs}}
+  </div>
+
+  <div id="main-content">
+     <div id="service-catalog-item"></div>
+  </div>
+</div>
+
+<script type="module">
+  import { renderServiceCatalogItem } from "service-catalog";
+
+  const settings = {{json settings}};
+  const container = document.getElementById("service-catalog-item");
+
+  // Extract the ID from the URL
+  const id = window.location.pathname.split("/").pop()
+
+  const props = {
+    baseLocale: {{json help_center.base_locale}},
+    hasAtMentions: {{json help_center.at_mentions_enabled}},
+    userRole: {{json user.role}},
+    userId: {{json user.id}},
+    brandId: {{json brand.id}},
+    organizations: {{json user.organizations}},
+    serviceCatalogItemId: id,
+    helpCenterPath: {{json (page_path 'help_center')}},
+  }
+
+  renderServiceCatalogItem(container, settings, props);
+</script>