@bigbinary/neeto-webhooks-frontend NPM

neeto-webhooks-nano

The neeto-webhooks-nano manages webhooks within neeto applications. The nano exports the @bigbinary/neeto-webhooks-frontend NPM package and neeto-webhooks-engine Rails engine for development.

Development with Host Application
- Engine
  - Installation
  - Usage
- Frontend package
  - Installation
  - Components
Instructions for Publishing

Development with Host Application

Engine

The engine is used to manage webhooks across neeto products.

Installation

Add this line to your application's Gemfile:

source "NEETO_GEM_SERVER_URL" do
   # ..existing gems

   gem 'neeto-webhooks-engine'

   # Use this for live development:
   # gem 'neeto-webhooks-engine', path: "../neeto-webhooks-nano"
end

And then execute:
```
bundle install
```
Add this line to your application's config/routes.rb file:
```
mount NeetoWebhooksEngine::Engine => "/webhooks"
```
Run the following command to copy the migrations from the engine to the host application:
```
bundle exec rails neeto_webhooks_engine:install:migrations
```
Add the migrations to the database:
```
bundle exec rails db:migrate
```
Add the following line to application's config/initializer/neeto_webhooks_engine.rb file. Replace the event_identifiers with an array of unique keywords representing possible webhook events.
```
NeetoWebhooksEngine.event_identifiers = ["create", "update", "cancel"]
```
Add translations for the webhook events using the key format webhooks.events.webhook_event, where webhook_event is the custom-defined event_identifier.
```
webhooks:
  events:
    create: "Booking creation"
    update: "Booking reschedule"
    cancel: "Booking cancellation"
```

Usage

You can learn more about the setup and usage here:

Models

Frontend package

Installation

Install the latest neeto-webhooks-nano package using the below command:
```
yarn add @bigbinary/neeto-webhooks-frontend
```

Instructions for development

Check the Frontend package development guide for step-by-step instructions to develop the frontend package.

Components

`NeetoWebhooks` (source code)

This component is used to manage webhooks in your web application.

It provides a user interface for viewing, adding, and editing webhooks.
It also includes a user interface for listing deliveries and viewing delivery details, featuring tabs that display both request and response information.

Props

entityId: Specifies the ID of the entity.
entityType: Specifies the type of the entity.

Optional Props

breadcrumbs: An array of objects that specify breadcrumbs for navigation.

Usage

import React from "react";

import { NeetoWebhooks } from "@bigbinary/neeto-webhooks-frontend";
import { routes } from "common/routes";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import { ToastContainer } from "react-toastify";

const Main = () => (
  <BrowserRouter>
    <div className="flex">
      <Switch>
        <Route
          path={routes.webhooks}
          component={() => (
            <NeetoWebhooks
              entityId={entityId}
              entityType={entityType}
              breadcrumbs={[
                {
                  text: "Settings",
                  link: routes.settings,
                },
                { text: "Webhook" },
              ]}
            />
          )}
        />
      </Switch>
    </div>
    <ToastContainer />
  </BrowserRouter>
);

export default Main;