@bigbinary/neeto-whatsapp-frontend 1.0.1

package/README.md

@@ -0,0 +1,186 @@
+# neeto-whatsapp-nano
+
+The `neeto-whatsapp-nano` manages WhatsApp messaging within neeto applications.
+The nano exports the `@bigbinary/neeto-whatsapp-frontend` NPM package and
+`neeto-whatsapp-engine` Rails engine for development.
+
+# Contents
+
+1. [Development with Host Application](#development-with-host-application)
+   - [Engine](#engine)
+     - [Installation](#installation)
+     - [Usage](#usage)
+   - [Frontend package](#frontend-package)
+     - [Installation](#installation-1)
+     - [Instructions for development](#instructions-for-development)
+     - [Components](#components)
+2. [Instructions for Publishing](#instructions-for-publishing)
+
+# Development with Host Application
+
+## Engine
+
+The engine handles WhatsApp Business API integration, including sending and
+receiving messages, processing webhooks for message status updates, and managing
+WhatsApp message templates.
+
+### Installation
+
+1. Add this line to your application's Gemfile:
+
+   ```ruby
+   source "NEETO_GEM_SERVER_URL" do
+      # ..existing gems
+
+      gem 'neeto-whatsapp-engine'
+
+      # Use this for live development:
+      # gem 'neeto-whatsapp-engine', path: "../neeto-whatsapp-nano"
+   end
+   ```
+
+2. And then execute:
+
+   ```shell
+   bundle install
+   ```
+
+3. Add this line to your application's `config/routes.rb` file:
+
+   ```ruby
+   mount NeetoWhatsappEngine::Engine, at: "/neeto_whatsapp"
+   ```
+
+   **NOTE: The mount point must be `/neeto_whatsapp` and cannot be changed to
+   any other path.**
+
+4. Run the following command to copy the migrations from the engine to the host
+   application:
+
+   ```shell
+   bundle exec rails neeto_whatsapp_engine:install:migrations
+   ```
+
+5. Add the migrations to the database:
+
+   ```shell
+   bundle exec rails db:migrate
+   ```
+
+6. Add the following environment variables:
+
+```
+WHATSAPP_NANO_WEBHOOK_VERIFY_TOKEN=abc123
+WHATSAPP_WEBHOOK_APP_SECRET=abc123
+WHATSAPP_ENABLED_ORGANIZATIONS="spinkart"
+```
+
+7. Add the following association to the entity to which you want to associate
+   the whatsapp messages
+
+```ruby
+has_many :whatsapp_messages, class_name: "NeetoWhatsappEngine::Message", as: :entity, dependent: :destroy
+```
+
+8. Override the fetch_entity! method for
+   NeetoWhatsappEngine::Api::V1::MessagesController
+
+```ruby
+# app/overrides/controllers/neeto_whatsapp_engine/api/v1/messages_controller_override.rb
+
+# frozen_string_literal: true
+
+NeetoWhatsappEngine::Api::V1::MessagesController.class_eval do
+
+  private
+    def fetch_entity!
+      # Fetch entity here
+      # example:
+      # @entity = @organization.bookings.find_by!(id: params[:entity_id])
+    end
+end
+```
+
+9. The backend exposes 2 services for sending whatsapp messages:
+
+- For sending template messages
+
+```ruby
+NeetoWhatsappEngine::TemplateMessageService.new(account).process(
+  recipient_phone:,
+  template_name:,
+  language_code:,
+  entity: booking,
+  template_params: [
+    # This is an example on how to send params.
+    # Check the params required based on the template(created on meta's dashboard) which you are going to use.
+    { name: "client_name", type: "text", text: booking.name },
+    { name: "meeting_name", type: "text", text: booking.meeting.name },
+    { name: "host_meeting_time", type: "text", text: meeting_time_in_host_time_zone },
+    { name: "attendee_list", type: "text", text: attendee_list },
+    { name: "meeting_location", type: "text", text: meeting_location },
+    { name: "booking_id", type: "text", text: booking.sid }
+  ]
+)
+```
+
+- For sending free-form text message, you can use the frontend component
+  `WhatsAppMessages` which handles it internally. But if you want to call it
+  manually, then
+
+```ruby
+NeetoWhatsappEngine::TextMessageService.new(account).process(
+  recipient_phone:,
+  entity:
+  message_text: "Hello",
+)
+```
+
+## Frontend package
+
+### Installation
+
+1. Install the latest `neeto-whatsapp-frontend` package using the below command:
+   ```shell
+   yarn add @bigbinary/neeto-whatsapp-frontend
+   ```
+
+### 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.
+
+### Components
+
+#### `WhatsAppMessages` ([source code](https://github.com/bigbinary/neeto-whatsapp-nano/blob/main/app/javascript/src/components/WhatsAppMessages/index.jsx))
+
+This component provides a chat interface for viewing and sending WhatsApp
+messages for a given entity. It displays a scrollable message list with
+WhatsApp-style formatting, status icons, and a sticky compose form at the
+bottom. Messages are polled every 10 seconds for real-time updates.
+
+##### Props
+
+- `entityId`: The ID of the entity whose messages should be displayed.
+- `entityType`: The type of the entity (e.g., `"Booking"`).
+
+##### Usage
+
+```jsx
+import React from "react";
+
+import { WhatsAppMessages } from "@bigbinary/neeto-whatsapp-frontend";
+
+const App = ({ bookingId }) => (
+  <WhatsAppMessages entityId={bookingId} entityType="Booking" />
+);
+
+export default App;
+```
+
+# 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/ar.json

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "مرحبًا بك في نيتو ويل نانو"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "Добре дошли в neeto whatsapp nano"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "Benvingut a neeto whatsapp nano"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "Vítejte na neeto whatsapp nano"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "Velkommen til neeto whatsapp nano"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "Willkommen beim neeto whatsapp nano"
+  }
+}

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

@@ -0,0 +1,21 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "Welcome to neeto whatsapp nano",
+    "messages": {
+      "emptyState": "There are no messages to show.",
+      "status": {
+        "pending": "Pending",
+        "sent": "Sent",
+        "delivered": "Delivered",
+        "read": "Read",
+        "failed": "Failed"
+      },
+      "compose": {
+        "placeholder": "Type a message...",
+        "send": "Send",
+        "windowExpired": "You can only send messages within 24 hours of the user's last message. Please wait for the user to reply to continue.",
+        "sendError": "Failed to send message. Please try again."
+      }
+    }
+  }
+}

package/app/javascript/src/translations/es-MX.json

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "Bienvenido a neeto whatsapp nano"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "Bienvenido a neeto whatsapp nano"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "Tere tulemast neeto ratta nano"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "Tervetuloa neeto whatsapp nano"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "Maligayang pagdating sa neeto whatsapp nano"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "Bienvenue dans neeto whatsapp nano"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "ברוכים הבאים ל-neeto whatsapp nano"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "नीटो व्हील नैनो में आपका स्वागत है"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "Dobrodošli u neeto whatsapp nano"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "Selamat datang di neeto whatsapp nano"
+  }
+}

package/app/javascript/src/translations/index.js

@@ -0,0 +1,3 @@
+import en from "./en.json";
+
+export { en };

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

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "Benvenuto su neeto whatsapp nano"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "ネートホイールナノへようこそ"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "네이토 휠 나노에 오신 것을 환영합니다"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "Welkom bij neeto whatsapp nano"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "Witamy w neeto whatsapp nano"
+  }
+}

package/app/javascript/src/translations/pt-BR.json

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "Bem-vindo ao neeto whatsapp nano"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "Bem-vindo ao neeto whatsapp nano"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "Bine ai venit la neeto whatsapp nano"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "Добро пожаловать в neeto whatsapp nano"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "Vitajte na neeto whatsapp nano"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "Dobrodošli v neeto whatsapp nano"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "Välkommen till neeto whatsapp nano"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "ยินดีต้อนรับสู่ neeto whatsapp nano"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "Neeto whatsapp nano'ya Hoş Geldiniz"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "Ласкаво просимо до neeto whatsapp nano"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "Chào mừng bạn đến với neeto whatsapp nano"
+  }
+}

package/app/javascript/src/translations/zh-CN.json

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "欢迎使用 neeto whatsapp nano"
+  }
+}

package/app/javascript/src/translations/zh-TW.json

@@ -0,0 +1,5 @@
+{
+  "neetoWhatsapp": {
+    "welcomeScreen": "歡迎使用 neeto whatsapp nano"
+  }
+}

package/dist/WelcomeScreen.js

@@ -0,0 +1,13 @@
+import { useTranslation } from 'react-i18next';
+import { jsx } from 'react/jsx-runtime';
+
+var WelcomeScreen = function WelcomeScreen() {
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsx("div", {
+    children: t("neetoWhatsapp.welcomeScreen")
+  });
+};
+
+export { WelcomeScreen as default };
+//# sourceMappingURL=WelcomeScreen.js.map

package/dist/WelcomeScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WelcomeScreen.js","sources":["../app/javascript/src/components/WelcomeScreen/index.jsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\n\nconst WelcomeScreen = () => {\n  const { t } = useTranslation();\n\n  return <div>{t(\"neetoWhatsapp.welcomeScreen\")}</div>;\n};\nexport default WelcomeScreen;\n"],"names":["WelcomeScreen","_useTranslation","useTranslation","t","_jsx","children"],"mappings":";;;AAEA,IAAMA,aAAa,GAAG,SAAhBA,aAAaA,GAAS;AAC1B,EAAA,IAAAC,eAAA,GAAcC,cAAc,EAAE;IAAtBC,CAAC,GAAAF,eAAA,CAADE,CAAC;AAET,EAAA,oBAAOC,GAAA,CAAA,KAAA,EAAA;IAAAC,QAAA,EAAMF,CAAC,CAAC,6BAA6B;AAAC,GAAM,CAAC;AACtD;;;;"}