Merge pull request #138 from wadeking98/feature-feedback-form

Feature feedback form

src/components/contact/ContactForm.vue

@@ -64,15 +64,16 @@
           outlined
           dense
           v-model="formData.from_name"
-          required
           label="Name"
+          :rules="alwaysRequired"
         ></v-text-field>
 
         <v-text-field
           outlined
           dense
           v-model="formData.from_email"
           label="Email address"
+          :rules="[...alwaysRequired,...emailRules]"
         ></v-text-field>
 
         <div :hidden="incorrectHidden">
@@ -82,13 +83,15 @@
             v-model="formData.error"
             :items="formattedCredentialTypes"
             label="What Information is incorrect?"
+            :rules="condRequired"
           ></v-select>
 
           <v-text-field
             outlined
             dense
             v-model="formData.identifier"
             label="Identifier (such as the incorporation number, registration number, or licence / permit number)"
+            :rules="condRequired"
           ></v-text-field>
         </div>
 
@@ -97,14 +100,14 @@
           dense
           v-model="formData.comments"
           :label="labelMessage"
+          :rules="alwaysRequired"
         ></v-textarea>
       </div>
 
       <v-btn
         id="contactSubmitButton"
         v-if="
-          formData.reason &&
-          (formData.reason != 'REGISTER_ORGANIZATION' || additionalHelp)
+          this.formData.reason != 'REGISTER_ORGANIZATION' || this.additionalHelp
         "
         @click="submit"
         depressed
@@ -126,15 +129,16 @@ import { contactReason } from "@/store/modules/contact";
 import { unwrapTranslations } from "@/utils/entity";
 
 interface Data {
-  formData: {
-    reason: string;
-  };
+  formData: IContactRequest;
   additionalHelp: boolean;
+  emailRules: Array<boolean | string | ((v: string) => string | boolean)>;
+  alwaysRequired: Array<boolean | string | ((v: string) => string | boolean)>;
+  condRequired: Array<boolean | string | ((v: string) => string | boolean)>;
 }
 
 @Component({
   computed: {
-    ...mapGetters(["loading", "credentialTypes"]),
+    ...mapGetters(["loading", "credentialTypes", "getLikeStatus"]),
   },
   methods: {
     ...mapActions(["setLoading", "sendContact"]),
@@ -144,14 +148,31 @@ export default class ContactForm extends Vue {
   formData!: IContactRequest;
   credentialTypes!: ICredentialType[];
   additionalHelp!: boolean;
+  getLikeStatus!: "like" | "dislike" | "";
+  emailRules!: Array<boolean | string | ((v: string) => string | boolean)>;
 
   setLoading!: (loading: boolean) => void;
   sendContact!: (feedback: IContactRequest) => Promise<void>;
+  // eslint-disable-next-line
+  emailRegexp = RegExp(/.+@.+/);
 
   data(): Data {
     return {
-      formData: { reason: "" },
+      formData: {
+        reason: "FEEDBACK",
+        from_name: "",
+        from_email: "",
+        comments: "",
+      },
       additionalHelp: false,
+      emailRules: [
+        // eslint-disable-next-line
+        (v: string) => this.emailRegexp.test(v) || "E-mail must be valid",
+      ],
+      alwaysRequired: [(v: string) => !!v || "This field is required"],
+      condRequired: [
+        (v: string) => !!v || this.incorrectHidden || "This field is required",
+      ],
     };
   }
 
@@ -194,6 +215,9 @@ export default class ContactForm extends Vue {
     ).validate();
     if (isFormValid) {
       this.setLoading(true);
+      if(this.getLikeStatus !== ""){
+        this.formData.comments = `${this.getLikeStatus}:\n${this.formData.comments}`
+      }
       const data = { ...this.formData };
       data.reason = contactReason[this.formData.reason];
       if (this.formData.error !== undefined) {

src/components/layout/footer/Feedback.vue

@@ -4,91 +4,35 @@
       <v-col cols="12" sm="6" lg="6" offset-sm="3" offset-lg="3">
         <v-container>
           <div class="text-center">
-            <p class="pt-4 text-h5 font-weight-bold">
-              <span v-if="!submitted">How was your experience?</span>
-              <span v-else>Thank you for submitting feedback</span>
-            </p>
-            <div v-if="!submitted">
-              <div>
-                <p>What do you think about OrgBook BC?</p>
-                <v-btn
-                  fab
-                  tile
-                  outlined
-                  @click="reason = 'like'"
-                  class="mr-3 fab"
-                >
-                  <v-icon>{{ mdiThumbUp }}</v-icon>
-                </v-btn>
-                <v-btn
-                  fab
-                  tile
-                  outlined
-                  @click="reason = 'dislike'"
-                  class="ml-3 fab"
-                >
-                  <v-icon>{{ mdiThumbDown }}</v-icon>
-                </v-btn>
-              </div>
+            <div v-if="!getLikeStatus">
+              <p class="pt-4 text-h5 font-weight-bold">
+                <span v-if="!getLikeStatus">How was your experience?</span>
+              </p>
+              <p>What do you think about OrgBook BC?</p>
+              <v-btn fab tile outlined @click="like" class="mr-3 fab">
+                <v-icon>{{ mdiThumbUp }}</v-icon>
+              </v-btn>
+              <v-btn fab tile outlined @click="dislike" class="ml-3 fab">
+                <v-icon>{{ mdiThumbDown }}</v-icon>
+              </v-btn>
+            </div>
 
-              <v-row v-if="reason !== ''">
-                <v-col cols="12" lg="8" offset-lg="2">
-                  <div class="text-center">
-                    <p class="font-weight-bold pt-4">
-                      Thanks for letting us know.
-                      <span v-if="isLike">Tell us a bit more!</span
-                      ><span v-else
-                        >Please tell us more so we can improve!</span
-                      >
-                    </p>
-                    <p class="pt-4">
-                      <span v-if="isLike"
-                        >What did you like about your experience today?</span
-                      >
-                      <span v-else>What were you looking for today?</span>
-                    </p>
-                    <v-textarea
-                      outlined
-                      required
-                      v-model="comments"
-                      auto-grow
-                      rows="2"
-                      class="feedback text-center"
-                    ></v-textarea>
-                    <div v-if="!isLike">
-                      <p class="pt-4">
-                        How would you like us to improve OrgBook?
-                      </p>
-                      <v-textarea
-                        outlined
-                        v-model="improvements"
-                        required
-                        auto-grow
-                        rows="2"
-                        class="feedback text-center"
-                      ></v-textarea>
-                    </div>
-                  </div>
-                  <div class="d-inline-flex">
+            <v-row v-if="getLikeStatus && !atContactPage">
+              <v-col cols="12" lg="8" offset-lg="2">
+                <div class="text-center">
+                  <router-link to="/contact">
                     <v-btn
-                      class="submit mr-3"
+                      class="submit"
                       @click="submit"
                       depressed
                       aria-label="submit-button"
-                      >Submit</v-btn
-                    >
-                    <v-btn
-                      class="ml-3"
-                      @click="reason = ''"
-                      outlined
-                      depressed
-                      aria-label="cancel-button"
-                      >Cancel</v-btn
+                      >Submit a comment</v-btn
                     >
-                  </div>
-                </v-col>
-              </v-row>
-            </div>
+                  </router-link>
+                </div>
+                <div class="d-inline-flex"></div>
+              </v-col>
+            </v-row>
           </div>
         </v-container>
       </v-col>
@@ -99,6 +43,7 @@
 import { Component, Vue } from "vue-property-decorator";
 import { mapActions, mapGetters } from "vuex";
 import { IFeedback } from "@/interfaces/api/v4/feedback.interface";
+import { trackStructEvent } from "@snowplow/browser-tracker";
 
 interface Data {
   reason: string;
@@ -109,20 +54,23 @@ interface Data {
 
 @Component({
   computed: {
-    ...mapGetters(["mdiThumbDown", "mdiThumbUp"]),
+    ...mapGetters(["mdiThumbDown", "mdiThumbUp", "getLikeStatus"]),
   },
   methods: {
-    ...mapActions(["sendFeedback", "setLoading"]),
+    ...mapActions(["sendFeedback", "setLoading", "setLike"]),
   },
 })
 export default class Feedback extends Vue {
   reason!: "like" | "dislike" | "";
   comments!: string;
   improvements!: string;
   submitted!: boolean;
+  getLikeStatus!: "like" | "dislike" | "";
 
   sendFeedback!: (feedback: IFeedback) => Promise<void>;
   setLoading!: (loading: boolean) => void;
+  setLike!: (like: "like" | "dislike" | "") => void;
+
   data(): Data {
     return {
       reason: "",
@@ -131,6 +79,31 @@ export default class Feedback extends Vue {
       submitted: false,
     };
   }
+
+  like(): void {
+    trackStructEvent({
+      category: "Feedback",
+      action: "Submit",
+      label: "Like",
+      value: 0.0,
+    });
+    this.setLike("like");
+  }
+
+  dislike(): void {
+    trackStructEvent({
+      category: "Feedback",
+      action: "Submit",
+      label: "Dislike",
+      value: 0.0,
+    });
+    this.setLike("dislike");
+  }
+
+  get atContactPage(): boolean {
+    return this.$route.path.includes("/contact");
+  }
+
   async submit(): Promise<void> {
     this.setLoading(true);
     await this.sendFeedback({
@@ -142,6 +115,7 @@ export default class Feedback extends Vue {
     this.submitted = true;
     this.setLoading(false);
   }
+
   get isLike(): boolean {
     return this.reason === "like";
   }

src/components/layout/footer/Footer.vue

@@ -14,7 +14,7 @@
     >
       <v-icon>{{ mdiArrowUp }}</v-icon>
     </v-btn>
-    <div class="footer-feedback" v-if="!feedbackSubmitted">
+    <div class="footer-feedback" >
       <v-container :fluid="$vuetify.breakpoint.smAndDown" class="pa-0">
         <v-row class="ma-0">
           <v-col>

src/store/index.ts

@@ -16,6 +16,7 @@ import icon, { State as IconState } from "./modules/icon";
 import search, { State as SearchState } from "./modules/search";
 import stats, { State as StatsState } from "./modules/statistics";
 import topic, { State as TopicState } from "./modules/topic";
+import like, {State as LikeState} from "./modules/like";
 
 Vue.use(Vuex);
 
@@ -31,6 +32,7 @@ export interface State {
   search: SearchState;
   stats: StatsState;
   topic: TopicState;
+  like: LikeState;
 }
 
 export default new Vuex.Store({
@@ -47,5 +49,6 @@ export default new Vuex.Store({
     search,
     stats,
     topic,
+    like,
   },
 });

src/store/modules/contact.ts

@@ -6,6 +6,7 @@ import { IContactRequest } from "@/interfaces/api/v4/contact.interface";
 const contactService = new Contact();
 
 export const contactReason: { [key: string]: string } = {
+  FEEDBACK: "Submit a comment/suggestion about Orgbook",
   INCORRECT_INFO: "My organization's information is incorrect",
   REGISTER_ORGANIZATION: "I want my organization listed on OrgBook BC",
   REGISTER_ISSUER: "I want to become an OrgBook BC issuer",

src/store/modules/like.ts

@@ -0,0 +1,38 @@
+import { ActionContext } from "vuex";
+import { State as RootState } from "@/store/index";
+
+export interface State {
+  like: "like" | "dislike" | "";
+}
+
+const state: State = {
+  like: "",
+};
+
+const getters = {
+  getLikeStatus: (state: State): "like" | "dislike" | "" => {
+    return state.like;
+  }
+};
+
+const actions = {
+  setLike(
+    { commit }: ActionContext<State, RootState>,
+    like: "like" | "dislike" | ""
+  ): void {
+    commit("setLike", like);
+  },
+};
+
+const mutations = {
+  setLike(state: State, like: "like" | "dislike" | ""): void {
+    state.like = like;
+  },
+};
+
+export default {
+  state,
+  getters,
+  actions,
+  mutations,
+};