Launch v1.0 of the Sample Messenger App 🚀

.eslintrc.json

@@ -0,0 +1,20 @@
+{
+  "env": {
+    "node": true,
+    "commonjs": true,
+    "es6": true
+  },
+  "plugins": ["prettier"],
+  "extends": "eslint:recommended",
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parserOptions": {
+    "ecmaVersion": 2018
+  },
+  "rules": {
+    "prettier/prettier": "error",
+    "no-console": "off"
+  }
+}

.gitignore

@@ -0,0 +1,20 @@
+.DS_Store
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# dotenv environment variables file
+.env

.sample.env

@@ -0,0 +1,28 @@
+# Environment Config
+
+# store your secrets and config variables in here
+# only invited collaborators will be able to see your .env values
+
+# Page and Application information
+PAGE_ID=
+APP_ID=
+PAGE_ACCESS_TOKEN=
+
+# Your App secret can be found in App Dashboard -> Seetings -> Basic
+APP_SECRET=
+
+# A random string that is used for the webhook verification request
+VERIFY_TOKEN=
+
+# URL where you host this code
+# You can use LocalTunnel or Heroku ex: https://mystic-wind-83.herokuapp.com
+APP_URL=
+
+# URL of your website where the "shop now" is located
+# Can be the same as your app domain URL ex: https://www.originalcoastclothing.com/
+SHOP_URL=
+
+# Preferred port
+PORT=3000
+
+# note: .env is a shell file so there can't be spaces around =

CHANGELOG.md

@@ -0,0 +1,7 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [1.0] - 2019-04-30
+### Added
+- Launch the Sample Messenger App Original Coast Clothing

CODE_OF_CONDUCT.md

@@ -0,0 +1,5 @@
+# Code of Conduct
+
+Facebook has adopted a Code of Conduct that we expect project participants to adhere to.
+Please read the [full text](https://code.fb.com/codeofconduct/)
+so that you can understand what actions will and will not be tolerated.CODE_OF_CONDUCT.md

CONTRIBUTING.md

@@ -0,0 +1,45 @@
+# Contributing to Sample Messenger App Original Coast Clothing
+We want to make contributing to this project as easy and transparent as
+possible.
+
+## Our Development Process
+Informed by internal platform changes and Messenger product design and best
+practices we will decide on the direction of the product. Suggestions are welcome
+and for external contributions the recomendation is to file an Issue explaining
+why the changes would be usefull. Please also add to the issue if you would like
+to submit a Pull Request to solve the issue.
+
+When submitting a PR please provide the context and is best to reference the 
+issue.
+
+## Pull Requests
+We actively welcome your pull requests.
+
+1. Fork the repo and create your branch from `master`.
+2. If you've added code that should be tested, add tests.
+3. If you've changed APIs, update the documentation.
+4. Ensure the test suite passes.
+5. Make sure your code lints.
+6. If you haven't already, complete the Contributor License Agreement ("CLA").
+
+## Contributor License Agreement ("CLA")
+In order to accept your pull request, we need you to submit a CLA. You only need
+to do this once to work on any of Facebook's open source projects.
+
+Complete your CLA here: <https://code.facebook.com/cla>
+
+## Issues
+We use GitHub issues to track public bugs. Please ensure your description is
+clear and has sufficient instructions to be able to reproduce the issue.
+
+Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe
+disclosure of security bugs. In those cases, please go through the process
+outlined on that page and do not file a public issue.
+
+## Coding Style  
+* We use Prettier for styling
+
+## License
+By contributing to Sample Messenger App Original Coast Clothing, you agree that
+your contributions will be licensed under the LICENSE file in the root directory
+of this source tree.

LICENSE

@@ -0,0 +1,30 @@
+BSD License
+
+For Messsenger For Sample Messenger App Original Coast Clothing
+
+Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+ * Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+ * Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+ * Neither the name Facebook nor the names of its contributors may be used to
+   endorse or promote products derived from this software without specific
+   prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

README.md

@@ -0,0 +1,144 @@
+# Original Coast Clothing Messenger Bot
+
+Original Coast Clothing (OC) is a fictional clothing brand created to showcase key features of the Messenger Platform. OC leverages key features to deliver a great customer experience. Using this demo as inspiration, you can create a delightful messaging experience that leverages both automation and live customer support. We are also providing the open source code of the app and a guide to deploy the experience on your local environment or remote server.
+
+[Access the Messenger experience](https://m.me/OriginalCoastClothing?ref=GITHUB)
+
+![Messenger Experience](public/experience.png)
+
+See the [Developer Documentations on this experience](https://developers.facebook.com/docs/messenger-platform/getting-started/sample-apps/original-coast-clothing).
+
+# Setting up your Messenger App
+
+## Requirements
+
+- **Facebook Page:** Will be used as the identity of your messaging experience. When people chat with your page. To create a new Page, visit https://www.facebook.com/pages/create.
+- **Facebook Developer Account:** Required to create new apps, which are the core of any Facebook integration. You can create a new developer account by going to the [Facebook Developers website](https://developers.facebook.com/) and clicking the "Get Started" button.
+- **Facebook App:** Contains the settings for your Messenger automation, including access tokens. To create a new app, visit your [app dashboard](https://developers.facebook.com/apps).
+
+## Setup Steps
+
+Before you begin, make sure you have completed all of the requirements listed above. At this point you should have a Page and a registered Facebook App.
+
+#### Get the App id and App Secret
+
+1. Go to your app Basic Settings, [Find your app here](https://developers.facebook.com/apps)
+2. Save the **App ID** number and the **App Secret**
+
+#### Grant  Messenger access to your Facebook App
+
+1. Go to your app Dashboard
+2. Under Add Product find Messenger and click Set Up
+3. Now you should be in the App Messenger Settings
+4. Under Access Tokens, click on Edit Permissions
+5. Select the desired page and allow Manage and access Page conversations in Messenger
+6. Select the desired page and an access token should appear
+7. Get the Page ID from the page access token by using the [Access Token Debugger](https://developers.facebook.com/tools/debug/accesstoken/)
+8. In the section Built-In NLP, select your page and enable the toggle
+
+# Installation
+
+Clone this repository on your local machine:
+
+```bash
+$ git clone [email protected]:fbsamples/original-coast-clothing.git
+$ cd original-coast-clothing
+```
+
+You will need:
+
+- [Node](https://nodejs.org/en/) 10.x or higher
+- [Localtunnel](https://github.com/localtunnel/localtunnel) or remote server like [Heroku](https://www.heroku.com/)
+
+# Usage
+
+## Using Local Tunnel
+
+#### 1. Install the dependencies
+
+```bash
+$ npm install
+```
+
+Alternatively, you can use [Yarn](https://yarnpkg.com/en/):
+
+```bash
+$ yarn install
+```
+
+#### 2. Install Local Tunnel
+```bash
+npm install -g localtunnel
+```
+
+Open a new terminal tab and request a tunnel to your local server with your preferred port
+```bash
+lt --port 3000
+```
+
+#### 3. Rename the file `.sample.env` to `.env`
+
+```bash
+mv .sample.env .env
+```
+
+ Edit the `.env` file to add all the values for your app and page. Then run your app locally using the built-in web server
+
+#### 4. Run your app locally using the built-in web server<
+
+```bash
+node app.js
+```
+
+You should now be able to access the application in your browser at [http://localhost:3000](http://localhost:3000)
+
+#### 5. Configure your webhook subcription and set the Messenger profile
+
+Use the `VERIFY_TOKEN` that you created in `.env` file and call the **/profile** endpoint like so:
+```
+http://localhost:3000/profile?mode=all&verify_token=verify-token
+```
+
+#### 6. Test that your app setup is successful
+
+Send a message to your Page from Facebook or in Messenger, if your webhook receives an event, you have fully set up your app! Voilà!
+
+## Using Heroku
+#### 1. Install the Heroku CLI
+
+Download and install the [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli)
+
+#### 2. Create an app from the CLI
+
+```bash
+git init
+heroku apps:create
+# Creating app... done, ⬢ mystic-wind-83
+# Created http://mystic-wind-83.herokuapp.com/ | [email protected]:mystic-wind-83.git
+```
+
+#### 3. Deploy the code
+```bash
+git add .
+git commit -m "My first commit"
+git push heroku master
+```
+
+#### 4. Set your environment variables
+  In your Heroku App Dashboard [https://dashboard.heroku.com/apps/mystic-wind-83](https://dashboard.heroku.com/apps/mystic-wind-83) set up the config vars following the comments in the file ```.sample.env```
+
+#### 5. Configure your webhook subscription and set the Messenger profile
+  You should now be able to access the application. Use the ```VERIFY_TOKEN``` that you created as config vars and call the **/profile** endpoint like so:
+
+  ```
+  http://mystic-wind-83.herokuapp.com/profile?mode=all&verify_token=verify-token
+  ```
+
+#### 6. Test that your app setup is successful
+
+  Send a message to your Page from Facebook or in Messenger, if your webhook receives an event, you have fully set up your app! Voilà!
+
+## License
+Sample Messenger App Original Coast Clothing is BSD licensed, as found in the LICENSE file.
+
+See the [CONTRIBUTING](CONTRIBUTING.md) file for how to help out.