Integrate Facebook Customer Chat (#331)

Author: koistya

.env

@@ -27,6 +27,7 @@ GOOGLE_CLIENT_SECRET=xxxxx
 
 FACEBOOK_APP_ID=xxxxx
 FACEBOOK_APP_SECRET=xxxxx
+FACEBOOK_PAGE_ID=xxxxx
 
 # PostgreSQL
 # https://www.postgresql.org/docs/current/static/libpq-envars.html

package.json

@@ -12,7 +12,6 @@
     "not ie <= 11",
     "not op_mini all"
   ],
-
   "dependencies": {
     "@babel/polyfill": "^7.2.5",
     "@babel/runtime": "^7.3.1",
@@ -39,6 +38,7 @@
     "jsonwebtoken": "^8.5.0",
     "jwt-passport": "^0.0.5",
     "knex": "^0.16.3",
+    "load-script": "^1.0.0",
     "lodash": "^4.17.11",
     "moment-timezone": "^0.5.23",
     "passport": "^0.4.0",

src/common/App.js

@@ -36,14 +36,12 @@ class App extends React.PureComponent {
   state = { error: null };
 
   componentDidRender = () => {
-    const { history, title } = this.props;
+    const { history, title, config } = this.props;
     window.document.title = title;
 
-    gtag('config', window.config.gaTrackingId, {
-      page_title: title,
-      page_location: window.location.href,
-      page_path: `${window.location.pathname}${window.location.search}`,
-    });
+    // Track page views
+    gtag('config', config.gaTrackingId, { transport_type: 'beacon' });
+    // fb(FB => FB.AppEvents.logPageView());
 
     const scrollY = getScrollPosition(history.location.key);
 

src/common/CustomerChat.js

@@ -0,0 +1,46 @@
+/**
+ * React Starter Kit for Firebase
+ * https://github.com/kriasoft/react-firebase-starter
+ * Copyright (c) 2015-present Kriasoft | MIT License
+ */
+
+import React from 'react';
+import { fb } from '../utils';
+import { ConfigContext } from '../hooks';
+
+// https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin
+class CustomerChat extends React.PureComponent {
+  componentDidMount() {
+    this.timeout = setTimeout(() => {
+      fb(FB => this.timeout && FB.XFBML.parse());
+    }, 3000);
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timeout);
+    delete this.timeout;
+  }
+
+  render() {
+    return (
+      <ConfigContext.Consumer>
+        {config => (
+          <div
+            className="fb-customerchat"
+            attribution="setup_tool"
+            page_id={config.facebook.pageId}
+            // theme_color="..."
+            // logged_in_greeting="..."
+            // logged_out_greeting="..."
+            // greeting_dialog_display="..."
+            // greeting_dialog_delay="..."
+            // minimized="false"
+            // ref="..."
+          />
+        )}
+      </ConfigContext.Consumer>
+    );
+  }
+}
+
+export default CustomerChat;

src/common/LayoutToolbar.js

@@ -45,7 +45,7 @@ const styles = theme => ({
 
 function LayoutToolbar({ classes: s, data: me, className, ...props }) {
   const [userMenuEl, setUserMenuEl] = useState(null);
-  const { appName } = useConfig();
+  const { app } = useConfig();
 
   function openUserMenu(event) {
     setUserMenuEl(event.currentTarget);
@@ -60,7 +60,7 @@ function LayoutToolbar({ classes: s, data: me, className, ...props }) {
       <Toolbar>
         <Typography className={s.title} variant="h6" color="inherit">
           <Link className={s.link} href="/">
-            {appName}
+            {app.name}
           </Link>
         </Typography>
         <Button

src/hooks.js

@@ -6,8 +6,9 @@
 
 /* @flow */
 
-import React from 'react';
+import React, { useContext, useEffect } from 'react';
 import { ReactRelayContext } from 'react-relay';
+import { fb } from './utils';
 
 // Default history object (for unit tests)
 const history = { location: { pathname: '/' } };
@@ -17,17 +18,24 @@ export const HistoryContext = React.createContext(history);
 export const ResetContext = React.createContext(() => {});
 
 export function useConfig() {
-  return React.useContext(ConfigContext);
+  return useContext(ConfigContext);
 }
 
 export function useHistory() {
-  return React.useContext(HistoryContext);
+  return useContext(HistoryContext);
 }
 
 export function useRelay() {
-  return React.useContext(ReactRelayContext);
+  return useContext(ReactRelayContext);
 }
 
 export function useReset() {
-  return React.useContext(ResetContext);
+  return useContext(ResetContext);
+}
+
+export function useFacebookEvent(event, callback, deps = []) {
+  useEffect(() => {
+    fb(FB => FB.Event.subscribe(event, callback), { async: false });
+    return fb(FB => FB.Event.unsubscribe(event, callback), { async: false });
+  }, deps);
 }

src/landing/HomeSponsors.js

@@ -41,6 +41,7 @@ function HomeSponsors({ classes: s }) {
     <div className={s.root}>
       {sponsors.map(x => (
         <a
+          key={x.name}
           className={s.link}
           href={x.link}
           target="_blank"

src/landing/index.js

@@ -23,7 +23,7 @@ export default [
       import(/* webpackChunkName: 'home' */ './HomeHero'),
     ],
     render: ([Home, HomeHero], data, { config }) => ({
-      title: config.appName,
+      title: config.app.name,
       component: (
         <Layout data={data} hero={<HomeHero />}>
           <Home data={data} />

src/legal/Privacy.js

@@ -18,7 +18,7 @@ const styles = theme => ({
 });
 
 function Privacy({ classes: s }) {
-  const { appOrigin } = useConfig();
+  const { app } = useConfig();
   return (
     <div className={s.root}>
       <Typography variant="h3" gutterBottom>
@@ -27,8 +27,8 @@ function Privacy({ classes: s }) {
       <Typography paragraph>
         Your privacy is important to us. It is Company&#39;s policy to respect
         your privacy regarading any information we may collect from you across
-        our website, <a href={appOrigin}>{appOrigin}</a>, and other sites we own
-        and operate.
+        our website, <a href={`${app.origin}/`}>{app.origin}</a>, and other
+        sites we own and operate.
       </Typography>
       <Typography paragraph>
         We only ask for personal information when we truly need it to provide a

src/legal/Terms.js

@@ -25,21 +25,21 @@ const styles = theme => ({
 });
 
 function Privacy({ classes: s }) {
-  const { appOrigin } = useConfig();
+  const { app } = useConfig();
   return (
     <div className={s.root}>
       <Typography variant="h3" gutterBottom>
         Terms of Use
       </Typography>
       <Typography variant="h5">1. Terms</Typography>
       <Typography paragraph>
-        By accessing the website at <a href={appOrigin}>{appOrigin}</a>, you are
-        agreeing to be bound by these terms of service, all applicable laws and
-        regulations, and agree that you are responsible for compliance with any
-        applicable local laws. If you do not agree with any of these terms, you
-        are prohibited from using or accessing this site. The materials
-        contained in this website are protected by applicable copyright and
-        trademark law.
+        By accessing the website at <a href={`${app.origin}/`}>{app.origin}</a>,
+        you are agreeing to be bound by these terms of service, all applicable
+        laws and regulations, and agree that you are responsible for compliance
+        with any applicable local laws. If you do not agree with any of these
+        terms, you are prohibited from using or accessing this site. The
+        materials contained in this website are protected by applicable
+        copyright and trademark law.
       </Typography>
       <Typography variant="h5">2. Use License</Typography>
       <ol className={s.list} type="a">