Helpcenter Sidebar

Installation

yarn add @kiwicom/smart-faq-sidebar

Helpcenter Sidebar requires Nitro & Orbit as peer dependencies with the corresponding contexts mounted on a parent level.

Usage

The npm package exports 2 react components. An example usage:

import { HelpSidebarDrawer, HelpSidebarApp } from '@kiwicom/smart-faq-sidebar';
import type { HelpSidebarDrawerProps, HelpSidebarAppProps } from '@kiwicom/smart-faq-sidebar';
import Loading from "@kiwicom/orbit-components/lib/Loading"

// Use a code-splitting tool to lazy load the HelpSidebarApp.
// This example uses next.js `dynamic`.
const LazyHelpSidebarApp = dynamic<SideBarProps>({
  loader: <Loading />,
  ssr: false,
});

// Depending on where you place this component in your React tree, 
// you might also want to wrap the drawer with <Portal>.
export default function HelpSidebar(props: HelpSidebarAppProps) {
  // Check whether the sidebar is being open via the url, 
  // i.e. the url includes the `?help` parameter.
  // The implementation of `useIsOpenViaRouter` is up to you,
  // this is just an example.
  const isOpenViaRouter = useIsOpenViaRouter()

  const isOpenViaPropOrRouter = props.isOpen || isOpenViaRouter

  return (
    // Unlike <HelpSidebarApp />, the drawer is not meant to be lazy loaded.
    // This is to ensure a smooth opening animation.
    <HelpSidebarDrawer isShown={isOpenViaPropOrRouter} onClose={() => props.onToggle(false)}>
      {isOpen && (
        <LazyHelpSidebarApp 
          isOpen={isOpenViaPropOrRouter}
          // You can open the sidebar directly on a specific article by 
          // providing the article ID.
          openArticle={props.openArticle}
          // (Optional) The sidebar will show a contextual Trip Info card
          // associated with the provided booking ID.
          // If no booking ID is provided and the user is logged in,
          // we fetch user's latest available booking.
          initialBookingId={props.initialBookingId}
          // (Optional) Disable Sentry logging. Sentry logging is enabled by default.
          disableSentry
          // For each emergency, we render <Alert type="warning' /> with the provided copy
          // on the sidebar's home screen.
          emergencies={props.emergencies}
          // The sidebar needs to be able to close itself programmatically.
          onToggle={props.onToggle}
        />
      )}
    </HelpSidebarDrawer>
  )
}