example: slack modal on home

examples/slack-modal-on-home/.env

@@ -0,0 +1,2 @@
+SLACK_ACCESS_TOKEN=
+SLACK_SIGNING_SECRET=

examples/slack-modal-on-home/README.md

@@ -0,0 +1,57 @@
+# Slack Modal on Home
+
+## Install and Run
+
+Download this example or clone [bottender](https://github.com/Yoctol/bottender).
+
+```sh
+curl https://codeload.github.com/Yoctol/bottender/tar.gz/master | tar -xz --strip=2 bottender-master/examples/slack-modal-on-home
+cd slack-modal-on-home
+```
+
+Install dependencies:
+
+```sh
+npm install
+```
+
+You must fill `SLACK_ACCESS_TOKEN` and `SLACK_SIGNING_SECRET` in your `.env` file.
+
+If you are not familiar with Slack Bot, you may refer to Bottender's doc, [Slack Setup](https://bottender.js.org/docs/channel-slack-setup), to find detailed instructions.
+
+After that, you can run the bot with this npm script:
+
+```sh
+npm run dev
+```
+
+This command starts a server listening at `http://localhost:5000` for bot development.
+
+If you successfully start the server, you get a webhook URL in the format of `https://xxxxxxxx.ngrok.io/webhooks/slack` from your terminal.
+
+## Slack App Settings
+
+To enable the home tab, go to [Slack Developer Console](https://api.slack.com/apps) / [YourApp] / App Home / Show Tabs, and enable the home tab.
+
+## Set Webhook
+
+To set the webhook, go to [Slack Developer Console](https://api.slack.com/apps) / [YourApp] / Event Subscriptions and [Slack Developer Console](https://api.slack.com/apps) / [YourApp] / Interactivity & Shortcuts, and use the webhook URL you got from running `npm run dev` to edit Request URLs for your bot.
+
+You must subscribed the `app_home_opened` event.
+
+## Idea of This Example
+
+This example is a bot running on [Slack](https://slack.com/).
+
+This example contains the following topics:
+
+- How to use modal on home tab.
+
+For more information, check our [Slack guides](https://bottender.js.org/docs/en/channel-slack-block-kit).
+
+## Related Examples
+
+- [slack-home-tab](../slack-home-tab)
+- [slack-modal-update](../slack-modal-update)
+- [slack-modal-push](../slack-modal-push)
+- [slack-modal-form](../slack-modal-form)

examples/slack-modal-on-home/bottender.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  channels: {
+    slack: {
+      enabled: true,
+      path: '/webhooks/slack',
+      accessToken: process.env.SLACK_ACCESS_TOKEN,
+      signingSecret: process.env.SLACK_SIGNING_SECRET,
+    },
+  },
+};

examples/slack-modal-on-home/index.js

@@ -0,0 +1,103 @@
+const { router, route, slack } = require('bottender/router');
+
+function getBlocks(text, buttonValue) {
+  return [
+    {
+      type: 'section',
+      text: {
+        type: 'mrkdwn',
+        text,
+      },
+    },
+    {
+      type: 'actions',
+      elements: [
+        {
+          type: 'button',
+          text: {
+            type: 'plain_text',
+            text: buttonValue,
+            emoji: true,
+          },
+          value: buttonValue,
+        },
+      ],
+    },
+  ];
+}
+
+let userName = 'home';
+
+async function Home(context) {
+  await context.views.publish({
+    userId: context.session.user.id,
+    view: {
+      type: 'home',
+      blocks: getBlocks(`Hello, *${userName}*.`, 'show modal'),
+    },
+  });
+}
+
+async function ShowModal(context) {
+  const { triggerId } = context.event.rawEvent;
+  await context.views.open({
+    triggerId,
+    view: {
+      type: 'modal',
+      title: {
+        type: 'plain_text',
+        text: 'What is your name?',
+        emoji: true,
+      },
+      submit: {
+        type: 'plain_text',
+        text: 'Submit',
+        emoji: true,
+      },
+      blocks: [
+        {
+          blockId: 'name',
+          type: 'input',
+          element: {
+            actionId: 'element',
+            type: 'plain_text_input',
+            placeholder: {
+              type: 'plain_text',
+              text: 'type your name here',
+            },
+          },
+          label: {
+            type: 'plain_text',
+            text: 'Name',
+            emoji: true,
+          },
+        },
+      ],
+    },
+  });
+}
+
+async function OnBlockActions(context) {
+  if (context.event.action.value === 'show modal') {
+    return ShowModal;
+  }
+}
+
+async function OnViewSubmission(context) {
+  const v = context.event.rawEvent.view.state.values;
+  userName = (v.name && v.name.element.value) || userName;
+  return Home;
+}
+
+async function Default(context) {
+  await context.sendText('Hello World');
+}
+
+module.exports = async function App(context) {
+  return router([
+    slack.event('app_home_opened', Home),
+    slack.event('block_actions', OnBlockActions),
+    slack.event('view_submission', OnViewSubmission),
+    route('*', Default),
+  ]);
+};

examples/slack-modal-on-home/package.json

@@ -0,0 +1,9 @@
+{
+  "scripts": {
+    "dev": "bottender dev",
+    "start": "bottender start"
+  },
+  "dependencies": {
+    "bottender": "1.5.1-alpha.4"
+  }
+}