From 9c55bea365b256d11a7bbbb438c193d8c95cd01d Mon Sep 17 00:00:00 2001
From: Sam Carlton <sam@sam.lc>
Date: Mon, 9 Nov 2020 14:15:13 -0600
Subject: [PATCH] Add notification field

---
 components/email-subscribe.vue | 127 +++++++++++++++++++++++++++++++++
 pages/app/_slug.vue            |  12 +++-
 2 files changed, 138 insertions(+), 1 deletion(-)
 create mode 100644 components/email-subscribe.vue

diff --git a/components/email-subscribe.vue b/components/email-subscribe.vue
new file mode 100644
index 0000000..8f49962
--- /dev/null
+++ b/components/email-subscribe.vue
@@ -0,0 +1,127 @@
+<template>
+
+    <div>
+        <div
+            v-if="feedbackMessage === null"
+        >
+            <form
+                class="email-subscribe text-xs relative"
+                @submit.prevent="trySubmit"
+            >
+                <label
+                    v-show="isFocused"
+                    for="email-subscribe"
+                    class="block font-medium absolute"
+                    style="top: -2em;"
+                >Email</label>
+                <div class="mt-1 relative rounded-md shadow-sm">
+                    <div
+                        v-show="isFocused"
+                        class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"
+                    >
+                        <!-- Heroicon name: mail -->
+                        <svg
+                            class="h-5 w-5 text-gray-500"
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                        >
+                            <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
+                            <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
+                        </svg>
+                    </div>
+                    <input
+                        id="email-subscribe"
+                        v-model="email"
+                        :class="[
+                            'form-input block w-full rounded-md bg-darker neumorphic-shadow py-1',
+                            isFocused ? 'pl-10' : 'placeholder-white text-center border border-transparent px-3'
+                        ]"
+                        :placeholder="isFocused ? 'me@email.com' : 'Tell me when this changes'"
+                        style="width: 230px;"
+                        @focus="isFocused = true"
+                        @blur="isFocused = false"
+                    >
+                </div>
+            </form>
+        </div>
+
+        <div
+            v-show="feedbackMessage"
+            class="text-center p-4"
+        >
+            {{ feedbackMessage }}
+        </div>
+    </div>
+
+</template>
+
+<script>
+
+import axios from 'axios'
+
+export default {
+    props: {
+        appName: {
+            type: String,
+            required: true
+        },
+        notes: {
+            type: String,
+            default: ''
+        }
+    },
+    data: function () {
+        return {
+            email: '',
+
+            isFocused: false,
+            feedbackMessage: null,
+        }
+    },
+    methods: {
+        async trySubmit () {
+            console.log('Trying submit')
+
+            // Set intermediate message
+            this.feedbackMessage = 'Sending...'
+
+            const formActionUrl = `https://docs.google.com/forms/d/e/1FAIpQLSdWUAVabT3i1ExfnPgRKnk-s-aWLlOuy0d5JjMKDwKtrwXj1Q/formResponse?entry.710297191=${this.appName}&emailAddress=${this.email}&submit=Submit`
+
+
+            axios({
+                method: 'get',
+                url: formActionUrl,
+                // data: {
+                //     // Email
+                //     'emailAddress': this.email,
+
+                //     // App Name
+                //     'entry.710297191': this.appName,
+                //     // Notes
+                //     // 'entry.2040856090': '',
+
+                //     'submit': 'Submit'
+                // },
+            }).finally( response => {
+
+                this.feedbackMessage = 'We\'ll keep an eye on it for you!'
+
+                // console.log('response', response)
+                // if (response.status === 200) {
+                //     this.feedbackMessage = '- We\'ll keep an eye on it for you!'
+                // } else {
+                //     this.feedbackMessage = 'Oops! Something went wrong'
+                // }
+            })
+
+            // .catch(error => {
+            //     // handle error
+            //     console.error('Error Subscribing -', error)
+            //     this.feedbackMessage = 'Oops! Something went wrong'
+            // })
+        }
+    }
+}
+
+</script>
diff --git a/pages/app/_slug.vue b/pages/app/_slug.vue
index 07bde84..357ece6 100644
--- a/pages/app/_slug.vue
+++ b/pages/app/_slug.vue
@@ -7,6 +7,13 @@
             <h2 class="subtitle text-2xl md:text-5xl font-bold py-6">
                 {{ app.text }}
             </h2>
+
+            <div class="subscribe space-y-6 sm:space-x-6 my-4">
+                <EmailSubscribe
+                    :app-name="app.name"
+                />
+            </div>
+
             <div class="links space-y-6 sm:space-x-6">
                 <LinkButton
                     v-for="(link, i) in app.relatedLinks"
@@ -16,6 +23,7 @@
                     class=""
                 >{{ (i === 0) ? 'View' : link.label }}</LinkButton>
             </div>
+
             <div class="report-links py-24 shadow-none">
                 <!-- https://eric.blog/2016/01/08/prefilling-github-issues/ -->
                 <a
@@ -31,12 +39,14 @@
 
 <script>
 import LinkButton from '~/components/link-button.vue'
+import EmailSubscribe from '~/components/email-subscribe.vue'
 import appList from '~/assets/app-list.json'
 // import buildAppList from '~/helpers/build-app-list'
 
 export default {
     components: {
-        LinkButton
+        LinkButton,
+        EmailSubscribe
     },
     async asyncData ({ params: { slug } }) {