From f5f6a128221acfb4428e5c05dd8c269fa7cc9e36 Mon Sep 17 00:00:00 2001 From: wadeking98 Date: Thu, 27 Jan 2022 15:31:05 -0800 Subject: [PATCH 1/2] added form validation and telemetry Signed-off-by: wadeking98 --- src/components/contact/ContactForm.vue | 51 ++++++-- src/components/layout/footer/Feedback.vue | 136 +++++++++------------- src/components/layout/footer/Footer.vue | 2 +- src/store/index.ts | 3 + src/store/modules/contact.ts | 1 + src/store/modules/like.ts | 38 ++++++ 6 files changed, 141 insertions(+), 90 deletions(-) create mode 100644 src/store/modules/like.ts diff --git a/src/components/contact/ContactForm.vue b/src/components/contact/ContactForm.vue index 10d2a63..f82a62a 100644 --- a/src/components/contact/ContactForm.vue +++ b/src/components/contact/ContactForm.vue @@ -64,8 +64,8 @@ outlined dense v-model="formData.from_name" - required label="Name" + :rules="alwaysRequired" >
@@ -82,6 +83,7 @@ v-model="formData.error" :items="formattedCredentialTypes" label="What Information is incorrect?" + :rules="condRequired" >
@@ -97,14 +100,14 @@ dense v-model="formData.comments" :label="labelMessage" + :rules="alwaysRequired" > string | boolean)>; + alwaysRequired: Array string | boolean)>; + condRequired: Array 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 string | boolean)>; setLoading!: (loading: boolean) => void; sendContact!: (feedback: IContactRequest) => Promise; + // 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", + ], }; } @@ -162,6 +183,17 @@ export default class ContactForm extends Vue { })); } + get submitEnabled(): boolean { + return !!( + this.formData.reason && + (this.formData.reason != "REGISTER_ORGANIZATION" || + this.additionalHelp) && + this.formData.from_name && + this.formData.from_email && + this.emailRegexp.test(this.formData.from_email) + ); + } + get formattedCredentialTypes(): Array<{ text: string; value: number }> { return this.credentialTypes.map((type) => ({ // TODO: remove unwrap translations functions after backend update @@ -194,6 +226,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) { diff --git a/src/components/layout/footer/Feedback.vue b/src/components/layout/footer/Feedback.vue index 9b84ab1..a7f6eb1 100644 --- a/src/components/layout/footer/Feedback.vue +++ b/src/components/layout/footer/Feedback.vue @@ -4,91 +4,35 @@
-

- How was your experience? - Thank you for submitting feedback -

-
-
-

What do you think about OrgBook BC?

- - {{ mdiThumbUp }} - - - {{ mdiThumbDown }} - -
+
+

+ How was your experience? +

+

What do you think about OrgBook BC?

+ + {{ mdiThumbUp }} + + + {{ mdiThumbDown }} + +
- - -
-

- Thanks for letting us know. - Tell us a bit more!Please tell us more so we can improve! -

-

- What did you like about your experience today? - What were you looking for today? -

- -
-

- How would you like us to improve OrgBook? -

- -
-
-
+ + +
+ Submit - CancelSubmit a comment -
- - -
+ +
+
+ +
@@ -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,10 +54,10 @@ 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 { @@ -120,9 +65,12 @@ export default class Feedback extends Vue { comments!: string; improvements!: string; submitted!: boolean; + getLikeStatus!: "like" | "dislike" | ""; sendFeedback!: (feedback: IFeedback) => Promise; 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 { 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"; } diff --git a/src/components/layout/footer/Footer.vue b/src/components/layout/footer/Footer.vue index 2965f00..a20cdd2 100644 --- a/src/components/layout/footer/Footer.vue +++ b/src/components/layout/footer/Footer.vue @@ -14,7 +14,7 @@ > {{ mdiArrowUp }} -
+
diff --git a/src/store/index.ts b/src/store/index.ts index a67acda..c334693 100644 --- a/src/store/index.ts +++ b/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, }, }); diff --git a/src/store/modules/contact.ts b/src/store/modules/contact.ts index 81ad4c8..11526f0 100644 --- a/src/store/modules/contact.ts +++ b/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", diff --git a/src/store/modules/like.ts b/src/store/modules/like.ts new file mode 100644 index 0000000..2995950 --- /dev/null +++ b/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, + 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, +}; From 63a80bb76d8ce15aacf7ecc26143ae3047e6e7c4 Mon Sep 17 00:00:00 2001 From: wadeking98 Date: Mon, 31 Jan 2022 13:32:40 -0800 Subject: [PATCH 2/2] removed submit Enabled Signed-off-by: wadeking98 --- src/components/contact/ContactForm.vue | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/src/components/contact/ContactForm.vue b/src/components/contact/ContactForm.vue index f82a62a..e76782b 100644 --- a/src/components/contact/ContactForm.vue +++ b/src/components/contact/ContactForm.vue @@ -183,17 +183,6 @@ export default class ContactForm extends Vue { })); } - get submitEnabled(): boolean { - return !!( - this.formData.reason && - (this.formData.reason != "REGISTER_ORGANIZATION" || - this.additionalHelp) && - this.formData.from_name && - this.formData.from_email && - this.emailRegexp.test(this.formData.from_email) - ); - } - get formattedCredentialTypes(): Array<{ text: string; value: number }> { return this.credentialTypes.map((type) => ({ // TODO: remove unwrap translations functions after backend update