13.0.0 • Published 2 years ago

@kiwicom/smart-faq-sidebar v13.0.0

Weekly downloads
5,844
License
UNLICENSED
Repository
-
Last release
2 years ago

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>
  )
}
13.0.0

2 years ago

12.0.11

2 years ago

12.0.7

3 years ago

12.0.8

3 years ago

12.0.9

2 years ago

12.0.6

3 years ago

12.0.10

2 years ago

12.0.5

3 years ago

12.0.3

3 years ago

12.0.4

3 years ago

12.0.2

3 years ago

12.0.0

3 years ago

12.0.1

3 years ago

11.7.0

3 years ago

11.6.0

3 years ago

11.5.0

3 years ago

11.4.0

4 years ago

11.3.5

4 years ago

11.3.4

4 years ago

11.3.3

4 years ago

11.3.2

4 years ago

11.3.1

4 years ago

11.3.0

4 years ago

11.2.0

4 years ago

11.1.0

4 years ago

11.0.1

4 years ago

11.0.0

4 years ago

10.4.3

4 years ago

10.4.1

4 years ago

10.4.0

4 years ago

10.3.3

4 years ago

10.3.2

4 years ago

10.3.1

4 years ago

10.3.0

4 years ago

10.2.8

4 years ago

10.2.7

4 years ago

10.2.6

4 years ago

10.2.5

4 years ago

10.2.4

4 years ago

10.2.3

4 years ago

10.2.2

4 years ago

10.2.1

4 years ago

10.2.0

4 years ago

10.1.0

4 years ago

10.0.0

4 years ago

9.5.1

4 years ago

9.5.0

4 years ago

9.4.1

4 years ago

9.4.0

4 years ago

9.3.1

4 years ago

9.3.0

4 years ago

9.1.1

4 years ago

9.1.0

4 years ago

9.2.0

4 years ago

9.0.4

4 years ago

9.0.3

4 years ago

9.0.2

4 years ago

9.0.1

4 years ago

9.0.0

4 years ago

8.6.2

5 years ago

8.6.1

5 years ago

8.6.0

5 years ago

8.5.4

5 years ago

8.5.3

5 years ago

8.5.2

5 years ago

8.5.0

5 years ago

8.5.1

5 years ago

8.4.0

5 years ago

8.3.1

5 years ago

8.3.0

5 years ago

8.2.1

5 years ago

8.2.0

5 years ago

8.1.3

5 years ago

8.1.2

5 years ago

8.1.1

5 years ago

8.1.0

5 years ago

8.0.14

5 years ago

8.0.16

5 years ago

8.0.13

5 years ago

8.0.12

5 years ago

8.0.11

5 years ago

8.0.10

5 years ago

8.0.9

5 years ago

8.0.8

5 years ago

8.0.5

5 years ago

8.0.4

5 years ago

8.0.7

5 years ago

8.0.6

5 years ago

8.0.3

5 years ago

8.0.2

5 years ago

8.0.1

5 years ago

8.0.0

5 years ago

7.5.0

5 years ago

7.4.0

5 years ago

7.3.12

5 years ago

7.3.11

5 years ago

7.3.11-alpha.1

5 years ago

7.3.11-alpha.0

5 years ago

7.3.10

5 years ago

7.3.9

5 years ago

7.3.8

5 years ago

7.3.7

5 years ago

7.3.5

5 years ago

7.3.4

5 years ago

7.3.3

5 years ago

7.3.2

5 years ago

7.3.1

5 years ago

7.3.0

5 years ago

7.2.12

5 years ago

7.2.11

5 years ago

7.2.10

5 years ago

7.2.9

5 years ago

7.2.8

5 years ago

7.2.7

5 years ago

7.2.6

5 years ago

7.2.5

5 years ago

7.2.4

5 years ago

7.2.3

5 years ago

7.2.2

5 years ago

7.2.1

5 years ago

7.2.0

5 years ago

7.1.0

5 years ago

7.0.10

5 years ago

7.0.9

5 years ago

7.0.8

5 years ago

7.0.7

5 years ago

7.0.6

5 years ago

7.0.5

5 years ago

7.0.4

5 years ago

7.0.3

5 years ago

7.0.2

5 years ago

7.0.1

5 years ago

7.0.0

5 years ago

6.23.24

5 years ago

6.23.23

5 years ago

6.23.22

5 years ago

6.23.21

5 years ago

6.23.20

5 years ago

6.23.19

5 years ago

6.23.18

5 years ago

6.23.17

5 years ago

6.23.16

5 years ago

6.23.15

5 years ago

6.23.14

5 years ago

6.23.13

5 years ago

6.23.12

5 years ago

6.23.11

5 years ago

6.23.10

5 years ago

6.23.8

5 years ago

6.23.7

5 years ago

6.23.6

5 years ago