Chore: Add Twitter documentation (#648)

* Chore: Add Twitter documentation

Co-authored-by: Sojan <sojan@pepalo.com>

app/controllers/twitter/callbacks_controller.rb

@@ -1,6 +1,6 @@
 class Twitter::CallbacksController < Twitter::BaseController
   def show
-    return redirect_to app_new_twitter_inbox_url if permitted_params[:denied]
+    return redirect_to twitter_app_redirect_url if permitted_params[:denied]
 
     @response = twitter_client.access_token(
       oauth_token: permitted_params[:oauth_token],
@@ -10,9 +10,9 @@ class Twitter::CallbacksController < Twitter::BaseController
       inbox = build_inbox
       ::Redis::Alfred.delete(permitted_params[:oauth_token])
       ::Twitter::WebhookSubscribeService.new(inbox_id: inbox.id).perform
-      redirect_to app_twitter_inbox_agents_url(inbox_id: inbox.id)
+      redirect_to app_twitter_inbox_agents_url(account_id: account.id, inbox_id: inbox.id)
     else
-      redirect_to app_new_twitter_inbox_url
+      redirect_to twitter_app_redirect_url
     end
   end
 
@@ -30,6 +30,10 @@ class Twitter::CallbacksController < Twitter::BaseController
     @account ||= Account.find_by!(id: account_id)
   end
 
+  def twitter_app_redirect_url
+    app_new_twitter_inbox_url(account_id: account.id)
+  end
+
   def build_inbox
     ActiveRecord::Base.transaction do
       twitter_profile = account.twitter_profiles.create(

app/javascript/dashboard/i18n/locale/en/login.json

@@ -10,7 +10,7 @@
       "PLACEHOLDER": "Password"
     },
     "API": {
-      "SUCCESS_MESSAGE": "Login Successfull",
+      "SUCCESS_MESSAGE": "Login Successful",
       "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later",
       "UNAUTH": "Username / Password Incorrect. Please try again"
     },

app/services/twitter/webhook_subscribe_service.rb

@@ -4,7 +4,7 @@ class Twitter::WebhookSubscribeService
   pattr_initialize [:inbox_id]
 
   def perform
-    register_response = twitter_client.register_webhook(url: webhooks_twitter_url)
+    register_response = twitter_client.register_webhook(url: webhooks_twitter_url(protocol: 'https'))
     twitter_client.subscribe_webhook if register_response.status == '200'
     Rails.logger.info 'TWITTER_REGISTER_WEBHOOK_FAILURE: ' + register_response.body.to_s
   end

config/environments/development.rb

@@ -32,11 +32,8 @@ Rails.application.configure do
   # Store uploaded files on the local file system (see config/storage.yml for options).
   config.active_storage.service = :local
 
-  # Don't care if the mailer can't send.
   config.active_job.queue_adapter = :sidekiq
 
-  config.action_mailer.raise_delivery_errors = false
-
   config.action_mailer.perform_caching = false
   config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }
 

config/routes.rb

@@ -12,8 +12,8 @@ Rails.application.routes.draw do
 
   get '/app', to: 'dashboard#index'
   get '/app/*params', to: 'dashboard#index'
-  get '/app/settings/inboxes/new/twitter', to: 'dashboard#index', as: 'app_new_twitter_inbox'
-  get '/app/settings/inboxes/new/:inbox_id/agents', to: 'dashboard#index', as: 'app_twitter_inbox_agents'
+  get '/app/accounts/:account_id/settings/inboxes/new/twitter', to: 'dashboard#index', as: 'app_new_twitter_inbox'
+  get '/app/accounts/:account_id/settings/inboxes/new/:inbox_id/agents', to: 'dashboard#index', as: 'app_twitter_inbox_agents'
 
   resource :widget, only: [:show]
 
@@ -114,7 +114,7 @@ Rails.application.routes.draw do
       end
     end
 
-    namespace :v2  do
+    namespace :v2 do
       resources :accounts, only: [], module: :accounts do
         resources :reports, only: [] do
           collection do

docs/channels/twitter-channel.md

@@ -0,0 +1,32 @@
+---
+path: "/docs/channels/twitter"
+title: "How to create Twitter channel?"
+---
+
+**Step 1**. Click on "Add Inbox" button from Settings > Inboxes page.
+
+![inbox_create](./images/twitter/inbox_create.png)
+
+**Step 2**. Click on "Twitter" icon.
+
+![list_of_channels](./images/twitter/list_of_channels.png)
+
+**Step 3**. Click on "Sign in with Twitter" button
+
+![sign_in_with_twitter](./images/twitter/sign_in_with_twitter.png)
+
+**Step 4**. You will be redirected to Twitter, Click on "Authorize app" button.
+
+![authorize_twitter](./images/twitter/authorize_twitter.png)
+
+**Step 5**. "Add agents" to your website inbox.
+
+![add_agents](./images/add_agents.png)
+
+**Step 6**. Hooray! You have sucessfully created a Twitter inbox.  You will be able to manage Twitter DMs and tweets mentioning you in the Chatwoot Inbox.
+
+![finish_inbox](./images/twitter/finish_inbox.png)
+
+  **Step 7**. If you want to update the agents who have access to the inbox, you can go to Settings > Inboxes.
+
+![inbox_settings](./images/twitter/inbox_settings.png)

docs/development/project-setup/twitter-setup.md

@@ -0,0 +1,56 @@
+---
+path: "/docs/twitter-app-setup"
+title: "Twitter App Setup"
+---
+
+Twitter channel with Chatwoot requires access to Twitter APIs. We are using Account Activity API. If you don't have an access to Twitter Business APIs, apply for one at [Twitter developer portal](https://developer.twitter.com/en/apply-for-access).
+
+![apply_to_twitter](./images/twitter/apply_to_twitter.png)
+
+Once your application is approved, you will be able to add Twitter Apps and dev environments. If you have applied for a team account, you will able to invite more team members. Inorder for the channel to work you will have to set the following environment variables. We will be describing what it means in the following sections.
+
+```bash
+TWITTER_APP_ID=
+TWITTER_CONSUMER_KEY=
+TWITTER_CONSUMER_SECRET=
+TWITTER_ENVIRONMENT=
+```
+
+### Create a Twitter App
+
+URL: https://developer.twitter.com/en/apps/create
+
+Create a Twitter by filling all the required fields in the above link.
+
+#### Things to note:
+
+1. Enable Sign in with Twitter
+2. Configure the callback url as `{your_chatwoot_installation_url}/twitter/callback`
+
+After you create the app, you will be able to see a tab `Keys and Tokens`.
+
+Use `API key` under `Consumer API keys` as `TWITTER_CONSUMER_KEY` in Chatwoot.
+
+Use `API secret key` under `Consumer API keys` as `TWITTER_CONSUMER_SECRET` in Chatwoot.
+
+![keys_and_tokens](./images/twitter/keys_and_tokens.png)
+
+Go to your apps, you will able to see your app id. Use this app id as `TWITTER_APP_ID` in Chatwoot.
+
+![apps](./images/twitter/apps.png)
+
+### Create a dev environment
+
+Inorder for the DMs and Tweets to work in realtime, you need to set up Account Activity API dev environment as follows.
+
+URL: https://developer.twitter.com/en/account/environments
+
+![dev_environment](./images/twitter/dev_environment.png)
+
+Click on `Set up dev environment`. You will be able to see a form as follows.
+
+Provide a `Dev Environment Label`, this should be an alphanumeric string. Use the same string as `TWITTER_ENVIRONMENT` in Chatwoot.
+
+![setup_dev_environment](./images/twitter/setup_dev_environment.png)
+
+Once you do this, you will ready to use Twitter Channels. To connect your Twitter Account, follow this [guide](/docs/channels/twitter).

spec/controllers/twitter/callbacks_controller_spec.rb

@@ -24,7 +24,7 @@ RSpec.describe 'Twitter::CallbacksController', type: :request do
     it 'renders the page correctly when called with website_token' do
       get twitter_callback_url
       account.reload
-      expect(response).to redirect_to app_twitter_inbox_agents_url(inbox_id: account.inboxes.last.id)
+      expect(response).to redirect_to app_twitter_inbox_agents_url(account_id: account.id, inbox_id: account.inboxes.last.id)
       expect(account.inboxes.count).to be 1
       expect(account.twitter_profiles.last.inbox.name).to eq 'chatwoot'
       expect(account.twitter_profiles.last.profile_id).to eq '100'