@bigbinary/neeto-integrations-frontend 2.1.0 → 2.2.0-beta1

package/README.md

@@ -1,120 +1,177 @@
-@bigbinary/neeto-integrations-frontend
+# neeto-integrations-nano
 
-![npm](https://img.shields.io/npm/v/@bigbinary/neeto-integrations-frontend?color=greenyellow)
-![npm](https://img.shields.io/npm/dw/@bigbinary/neeto-integrations-frontend?color=greenyellow)
+The `neeto-integrations-nano` provides support for third-party integrations to neeto
+applications. The nano exports the `@bigbinary/neeto-integrations-frontend` NPM package and `neeto-integrations-engine` Rails engine for development.
 
-UI for integrations for all neeto products.
+The engine handles the authentication, webhooks and token management for integrations
+with the following providers.
 
-## Installation
+- Meta ( Facebook, Instagram, WhatsApp )
+- Google ( Analytics, YouTube )
+- Microsoft ( MS Teams)
+- Zapier
+- Twilio
 
-```bash
-yarn add @bigbinary/neeto-integrations-frontend
-```
+Host can provide required permissions for a supported third-party integration, then engine will handle the authentication, token storing and refreshing for the host. Tokens, account details and webhook subscription details are stored in tables handled by the engine.
 
-## Usage
+The frontend package provides components to handle integration card, steps, disconnect and other integration configuration page support.
 
-Available components:
+## Contents
+  1. [Development with Host application](#development-with-host-application)
+      - [Engine](#engine)
+        - [Installation](#installation)
+        - [Details](#details)
+        - [neeto products currently using this engine](#neeto-products-currently-using-this-engine)
+      - [Frontend package](#frontend-package---bigbinaryneeto-integrations-frontend)
+        - [Installation](#installation-1)
+        - [Usage](#usage)
+        - [Product integrations](#product-integrations)
+  2. [Instructions for publishing](#instructions-for-publishing)
 
-Available components:
+## Development with Host application
+
+### Engine
+
+#### Installation
 
-- [Connect](./docs/connect/README.md)
-- [Finish](./docs/finish/README.md)
-- [Demo](./docs/demo/README.md)
-- [DisconnectAlert](./docs/DisconnectAlert/README.md)
+1. Add the gem to your `Gemfile`.
 
-View the [example app](./example/src/App.jsx) to see usage.
+```ruby
+source "NEETO_GEM_SERVER_URL" do
+  gem "neeto-integrations-engine"
+end
+```
+
+2. Run `bundle install`
 
-## Development
+3. Add the required env variables to `.env.development` and update your
+   `secrets.yml`. Refer [OAuth Config](./docs/engine/oauth-config.md) for more details on specific
+   integrations.
 
-Install all the dependencies by executing the following command
+4. Import migrations to your project:
 
 ```bash
-yarn install
+bundle exec rails neeto_integrations_engine:install:migrations
 ```
 
-### Using example app
+5. Add the migrations to the database:
+
+```bash
+bundle exec rails db:migrate
+```
 
-Start the development server using the `yarn start` command. Development server
-will run the example app using webpack.
+6. Add the Integrations List required to `config/neeto_integrations.yml`. Also,
+   add the required integration(not natively supported by engine) as
+   `other_applications` for post Integration UI support.
+
+```yml
+applications:
+  - title: "Instagram Chat"
+    service_name: Instagram
+    provider: Facebook
+    service_type: Social
+    scope:
+      - email
+      - public_profile
+      - pages_show_list
+      - instagram_manage_messages
+      - instagram_basic
+other_applications:
+  - title: "neetoDesk"
+    service_name: neetoDesk
+    service_type: Support
+    provider: neeto
+```
 
-### Using host application
+Refer the [Oauth Config](./docs/engine/oauth-config.md) for list of supported `provider`,
+`service_name` and `service_type`.
 
-1. Clone this repository.
-2. Run `yarn install` to download the dependencies and setup the development
-   environment.
-3. Have a host application ready.
-4. Run `yarn build --watch` to automatically transpile code as you save the
-   file. You can omit the `--watch` flag if you want to run the build only once.
-5. In a different terminal, run `yalc publish` to publish the
-   neeto-integrations-frontend to the local yalc store.
-6. Run `yalc add @bigbinary/neeto-integrations-frontend` to install the
-   neeto-integrations-frontend to the host application.
-7. After making necessary changes to `neeto-integrations-frontend`, run
-   `yalc push` to push the changes to the host application (assuming that you
-   are in watch mode and the changes are bundled automatically). Restart
-   webpack-dev-server in host if changes are not applied.
-8. Video explanation on how to use yalc: https://vimeo.com/722958162/9e931b640c
+7. Import data migration to update the integrations list with the newly added
+   integration from `config/neeto_integrations.yml`:
 
-## Exports and Types
+```bash
+bundle exec rails generate neeto_integrations_engine:integrations_list:update
+```
 
-The **neeto-integrations-frontend** JavaScript library offers two types of
-exports: the common bundle and the per-component bundle.
+Or manually execute the following command in all the environments to update the
+integrations list. Although the above approach is recommended.
 
-### Common Bundle
+```bash
+bundle exec rails neeto_integrations_engine:integrations_list:update
+```
 
-The common bundle includes components such as `Card`, `Modal`, and `Connect`.
-You can import them using the following syntax:
+8. Mount Neeto Integrations to your `routes.rb`:
 
-```js
-import { Card, Modal, Connect } from "@bigbinary/neeto-integrations-frontend";
+```ruby
+mount NeetoIntegrationsEngine::Engine => "/neeto_integrations"
 ```
 
-To add a component to the common bundle, follow these steps:
+9. Add association to `User` model:
 
-1. Place the component inside the `components` folder
-2. Add the necessary types for the component in the `types.d.ts` file located in
-   the library's root directory
-3. Export the component in the `index.js` file located in the library's root
-   directory
+```ruby
+has_many :auth_requests, class_name: "NeetoIntegrationsEngine::AuthRequest", dependent: :destroy
+```
+
+10. Add association to `Organization` model:
 
-### Per-Component Bundle
+```ruby
+has_many :integrated_apps, class_name: "NeetoIntegrationsEngine::IntegratedApp", dependent: :destroy
+```
 
-Each component inside the `components/Integrations` folder has its own bundle.
-For example, the `ZapierForm` component can be imported using the following
-syntax:
+11. If you want your integration to be specific to other model like `User`,
+    `Form` , etc, add association as:
 
-```js
-import ZapierForm from "@bigbinary/neeto-integrations-frontend/ZapierForm";
+```ruby
+has_many :integrated_apps, as: :integrable, class_name: "NeetoIntegrationsEngine::IntegratedApp", dependent: :destroy
 ```
 
-To export a component as its own bundle, follow these steps:
+#### Details
 
-1. Place the component strictly inside the `components/Integrations` folder.
-2. Add the necessary types for the component in the `types` folder.
+  - [Endpoints](./docs/engine/endpoints.md)
+  - [Errors](./docs/engine/errors.md)
+  - [MS Teams credentials and integration information](./docs/engine/ms-teams.md)
 
-## Building and releasing.
+#### neeto products currently using this engine
 
-The `@bigbinary/neeto-integrations-frontend` package gets published to NPM when
-we merge a PR with `patch`, `minor` or `major` label to the `main` branch. The
-`patch` label is used for bug fixes, `minor` label is used for new features and
-`major` label is used for breaking changes. You can checkout the
-`Create and publish releases` workflow in GitHub Actions to get a live update.
+|  Products   |                   Integrated (Used in production)                    | Integration (Currently in development/staging) |
+| :---------: | :------------------------------------------------------------------: | :--------------------------------------------: |
+|  neetoChat  |                                 :x:                                  | Instagram, WhatsApp, Twilio, Zapier, MS Teams  |
+| neetoSocial | Instagram(page), Facebook(page), Google(Analytics, YouTube), Twitter |                      :x:                       |
+|  neetoCal   |                               MS Teams                               |                      :x:                       |
+|  neetoForm  |                                 :x:                                  |                    MS Teams                    |
 
-In case if you missed to add the label, you can manually publish the package.
-For that first you need to create a PR to update the version number in the
-`package.json` file and merge it to the `main` branch. After merging the PR, you
-need to create a
-[new github release](https://github.com/bigbinary/neeto-integrations-frontend/releases/new)
-from main branch. Whenever a new release is created with a new version number,
-the github actions will automatically publish the built package to npm. You can
-checkout the `Publish to npm` workflow in GitHub Actions to get a live update.
+### Frontend package - @bigbinary/neeto-integrations-frontend
+
+![npm](https://img.shields.io/npm/v/@bigbinary/neeto-integrations-frontend?color=greenyellow)
+![npm](https://img.shields.io/npm/dw/@bigbinary/neeto-integrations-frontend?color=greenyellow)
 
-Please note that before publishing the package, you need to verify the
-functionality in some of the neeto web-apps locally using `yalc` package
-manager. The usage of yalc is explained in this video:
-https://youtu.be/QBiYGP0Rhe0
+UI for integrations for all neeto products.
 
-# Product integrations
+#### Installation
+
+```bash
+yarn add @bigbinary/neeto-integrations-frontend
+```
+
+#### Usage
+
+Available components:
+
+- Components
+  - [Card](./docs/frontend/components/Card/README.md)
+  - [Connect](./docs/frontend/components/connect/README.md)
+  - [Daily.co](./docs/frontend/components/daily.co/README.md)
+  - [Demo](./docs/frontend/components/demo/README.md)
+  - [DisconnectAlert](./docs/frontend/components/DisconnectAlert/README.md)
+  - [Finish](./docs/frontend/components/finish/README.md)
+  - [GoogleCalendar](./docs/frontend/components/GoogleCalendar/README.md)
+  - [Modal](./docs/frontend/components/Modal/README.md)
+  - [Twilio](./docs/frontend/components/twilio/README.md)
+  - [WalkthroughModal](./docs/frontend/components/WalkthroughModal/README.md)
+  - [Zoom](./docs/frontend/components/zoom/README.md)
+- [Exports and Types](./docs/frontend/exports-and-types.md)
+
+#### Product integrations
 
 | Projects     | IntegrationsFrontend |
 | ------------ | :------------------: |
@@ -122,6 +179,14 @@ https://youtu.be/QBiYGP0Rhe0
 | neetoDesk    |  :white_check_mark:  |
 | neetoForm    |  :white_check_mark:  |
 | neetoInvoice |  :white_check_mark:  |
-| neetoBugtrap |  :white_check_mark:  |
+| neetoKB      |  :white_check_mark:  |
 | neetoMonitor |  :white_check_mark:  |
 | neetoCal     |  :white_check_mark:  |
+
+### Instructions for development
+
+Check the [Frontend package development guide](https://neeto-engineering.neetokb.com/p/a-d34cb4b0) for step-by-step instructions to develop the frontend package.
+
+## Instructions for Publishing
+
+Consult the [building and releasing packages](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages) guide for details on how to publish.

package/app/javascript/src/translations/en.json

@@ -0,0 +1,128 @@
+{
+  "neetoIntegrations": {
+    "common": {
+      "continue": "Continue",
+      "connect": "Connect",
+      "connected": "Connected",
+      "manage": "Manage",
+      "disconnect": "Disconnect",
+      "finish": "Finish",
+      "required": "Required",
+      "delete": "Delete",
+      "tryAgain": "Try Again",
+      "verify": "Verify",
+      "phNo": "Phone number",
+      "saveChanges": "Save changes",
+      "disconnectIntegration": "Disconnect {{integration, anyCase}}",
+      "connectIntegration": "Connect {{integration, anyCase}}",
+      "manageIntegration": "Manage {{integration, anyCase}}",
+      "helpDocUrl": "To learn more about the {{integration, anyCase}} integration, see the <helpLink>Help center</helpLink>."
+    },
+    "errors": {
+      "required": "{{entity}} is required"
+    },
+    "tags": {
+      "connected": "Connected",
+      "expired": "Expired"
+    },
+    "tooltip": {
+      "integrationNotAvailable": "This integration is not available right now."
+    },
+    "demo": {
+      "title": "Check how it behaves",
+      "subtitle": "Watch the following video to understand how you can utilize this integration:",
+      "iFrameTitle": "Watch this video to utilize the integration"
+    },
+    "walkthroughModal": {
+      "header": "Check how it behaves",
+      "continue": "Continue"
+    },
+    "zapier": {
+      "apiKeys": "API Keys",
+      "copyApiKey": "Copy API Key",
+      "emptyText": "Generate an API Key to connect to the Zapier platform",
+      "generateApiKey": "Generate API Key",
+      "labelInputPlaceholder": "Enter a Label for the new API Key",
+      "tableColumns": {
+        "createdAt": "Created At",
+        "label": "Label"
+      },
+      "newApiKeyInstruction": "Here is your Zapier API key. Make sure to copy the API key now as the API key will not be shown again. If you lose the API key then you can generate a new API key anytime.",
+      "tableTitle": "Previously Generated API Keys",
+      "deleteApiKey": {
+        "title": "Delete API Key?",
+        "message": "You are permanently deleting the API Key <strong>{{key}}</strong>. This can't be undone."
+      },
+      "walkthroughText": "Check how it behaves",
+      "helpDoc": "Help document",
+      "label": {
+        "required": "Label is required",
+        "noBlankSpaces": "Label should not contain blank spaces"
+      }
+    },
+    "twilio": {
+      "sid": "SID",
+      "authToken": "Auth token",
+      "validations": {
+        "sidReq": "SID is required",
+        "authTokenReq": "Auth token is required",
+        "phNumReq": "Phone number is required"
+      },
+      "smsConfiguration": {
+        "delete": "Twilio SMS integration has been successfully deleted.",
+        "configuredSuccess": "Twilio SMS integration has been successfully configured.",
+        "invalidCredentials": "Twilio credentials are invalid",
+        "invalidPhoneNumberConfig": "Twilio phone number is invalid"
+      }
+    },
+    "steps": {
+      "configure": "Configure"
+    },
+    "daily": {
+      "title": "Daily.co",
+      "description": "Include daily.co links in your meetings booked using {{appName, anyCase}}.",
+      "apiKey": "API key",
+      "helpDoc": "<externalLink>See instructions</externalLink> on getting the API key",
+      "yourApiKey": "You are connected to Daily.co with the API key: <wrapper><span>{{apiKey, anyCase}}</span><copy /></wrapper>",
+      "connect": {
+        "account": "Connect your Daily.co account",
+        "title": "Connect Daily.co"
+      },
+      "connected": "You are connected to Daily.co",
+      "disconnect": {
+        "title": "Disconnect Daily.co integration?",
+        "message": "This action will disconnect Daily.co integration."
+      },
+      "walkthroughText": "Check how it behaves"
+    },
+    "browserTitles": {
+      "integrations": {
+        "dailyco": "Daily Co"
+      }
+    },
+    "zoom": {
+      "title": "Zoom",
+      "description": "Include Zoom video links in your meetings booked using {{appName, anyCase}}.",
+      "connect": "Connect your Zoom account",
+      "connected": "You are connected to Zoom",
+      "account": "Your connected email is <underline>{{email}}</underline>.",
+      "disconnect": {
+        "title": "Disconnect Zoom integration?",
+        "message": "This action will disconnect Zoom integration."
+      }
+    },
+    "google": {
+      "connect": {
+        "title": "Connect your Google account",
+        "signIn": "Sign in with Google",
+        "reminderToAcceptPermissions": "When connecting to  your Google Account, please make sure to <strong>select the checkbox</strong> that grants app access to your Google Calendar after clicking the 'Sign in with Google' button. This checkbox can be found in the permission request screen as shown in the picture below.",
+        "selectCheckbox": "select the checkbox"
+      },
+      "finish": {
+        "title": "Google account is successfully integrated to neetoCal"
+      },
+      "calendar": "Google calendar",
+      "statusForbidden": "An unknown error occurred in your google integration, please reconnect."
+    }
+  }
+}