From 92a6504a03b05f52831f6b101869fd1daf5d81db Mon Sep 17 00:00:00 2001
From: captainPrime <taiwooyindamola732@gmail.com>
Date: Tue, 1 Aug 2023 08:10:29 +0100
Subject: [PATCH] fix: otp sent for report recipe

fix: comments
---
 src/components/ReportIt.vue            | 65 +++++++++++++++++------
 src/store/modules/subscriptionStore.js | 73 +++++++++++++++++++++-----
 test/e2e/specs/ReportIt.spec.js        |  7 ++-
 3 files changed, 115 insertions(+), 30 deletions(-)

diff --git a/src/components/ReportIt.vue b/src/components/ReportIt.vue
index eb0e7a2..1b4de27 100644
--- a/src/components/ReportIt.vue
+++ b/src/components/ReportIt.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="ui red fluid button" :title="title" @click="ReportIt">
+        <div class="ui red fluid button" :title="title" @click="reportIt">
             <i class="ui bug icon"></i>
             Report it
         </div>
@@ -109,19 +109,30 @@
                         </div>
                     </div>
                     <br />
-                    <div>
+                    <div >
                         <label for="emailorphone"
                             >Please provide your email or phone number:
                             (Required*)</label
                         >
-                        <div class="field">
-                            <input
-                                type="text"
-                                v-model="formData.email"
-                                ref="emailorphone"
-                                name="emailorphone"
-                                required
-                            />
+                        <div class="ui grid">
+                            <div class="field ui email ten wide computer column sixteen wide mobile column">
+                                <input
+                                    type="text"
+                                    v-model="formData.email"
+                                    ref="emailorphone"
+                                    name="emailorphone"
+                                    required
+                                />
+                            </div>
+                            <div class="ui input six wide computer column sixteen wide mobile column">
+                                <button
+                                    class="ui tbb button otp"
+                                    @click="requestOtp"
+                                    v-bind:class="{ loading: is_loading }"
+                                >
+                                    Send Code
+                                </button>
+                            </div>
                         </div>
                     </div>
                     <br />
@@ -133,6 +144,7 @@
                                 ref="verificationcode"
                                 v-model="formData.verification_code"
                                 name="verificationcode"
+                                required
                             />
                         </div>
                     </div>
@@ -148,11 +160,21 @@
                         <i class="close icon"></i>
                         <div>Your report was submitted.</div>
                     </div>
-                  
+
                     <div class="ui negative message" v-if="report_failed">
                         <i class="close icon"></i>
                         <div>Error sending report.</div>
                     </div>
+
+                    <div class="ui success message" v-if="otp_success">
+                        <i class="close icon"></i>
+                        <div>OTP has been sent the number or email above.</div>
+                    </div>
+
+                    <div class="ui negative message otp" v-if="otp_failed">
+                        <i class="close icon"></i>
+                        <div>Error sending OTP.</div>
+                    </div>
                     <div class="">
                         <div class="ui input">
                             <button
@@ -187,10 +209,15 @@ export default {
         report_failed() {
             return this.$store.state.subscriptionStore.failed;
         },
+        otp_success() {
+            return this.$store.state.subscriptionStore.otp_success;
+        },
+        otp_failed() {
+            return this.$store.state.subscriptionStore.otp_failed;
+        },
     },
 
     data() {
-        
         return {
             showModal: false,
             title: "Use this tool if you think this recipe is any of the following; inappropriate, unauthentic, not original, stolen or a duplicate.",
@@ -210,11 +237,15 @@ export default {
     },
 
     methods: {
-        ReportIt() {
+        reportIt() {
             this.resetForm();
             this.$store.dispatch("reset_report_form");
             $(".ui.modal").modal("show");
         },
+
+        requestOtp() {
+            store.dispatch("submit_report_otp", this.formData.email);
+        },
         resetForm() {
             // Reset the form data after successful submission
             this.formData.inputField = "";
@@ -289,9 +320,9 @@ export default {
     display: block;
 }
 
-.ui.modal input[name="verificationcode"] {
+.ui.modal input[name="verificationcode"], .ui.modal input[name="emailorphone"] {
     width: 100%;
-    padding: 5px;
+    padding: 10px;
     border: 1px solid #ccc;
 }
 
@@ -317,4 +348,8 @@ export default {
 .message {
     margin-bottom: 20px !important;
 }
+
+.email{
+    margin-top: 12px
+}
 </style>
diff --git a/src/store/modules/subscriptionStore.js b/src/store/modules/subscriptionStore.js
index 85d5fa4..6f31710 100644
--- a/src/store/modules/subscriptionStore.js
+++ b/src/store/modules/subscriptionStore.js
@@ -2,6 +2,8 @@ export const subscriptionStore = {
     state: () => ({
         success: false,
         report_success: false,
+        otp_success: false,
+        otp_failed: false,
         failed: false,
     }),
     mutations: {
@@ -20,13 +22,21 @@ export const subscriptionStore = {
         RESET_REPORT_FORM(state) {
             state.report_success = false;
             state.failed = false;
+            state.otp_success = false;
+            state.otp_failed = false;
         },
         SHOW_REPORT_SUCCESS_MESSAGE(state) {
             state.report_success = true;
         },
+        SHOW_OTP_SUCCESS_MESSAGE(state) {
+            state.otp_success = true;
+        },
         SHOW_FAILED_MESSAGE(state) {
             state.failed = true;
         },
+        SHOW_FAILED_OTP(state) {
+            state.otp_failed = true;
+        },
     },
     actions: {
         async subscribeUser(context, payload) {
@@ -64,20 +74,55 @@ export const subscriptionStore = {
 
             const url = process.env.BASE_URL + "report-recipe";
 
-            this.state.api.client.post(url, {
-                payload
-            }, this.state.api.options, {  headers: {
-                'Authorization': `Bearer ${this.state.access_token}`
-            }})
-            .then((response) => {
-                context.commit('SET_MODAL_STATE', false)
-                context.commit('SHOW_REPORT_SUCCESS_MESSAGE')
-            })
-            .catch((error) => {
-                context.commit('SET_MODAL_STATE', false)
-                context.commit('SHOW_FAILED_MESSAGE')
-                context.commit("HANDLE_ERROR", error.response);
-            })
+            this.state.api.client
+                .post(
+                    url,
+                    {
+                        payload,
+                    },
+                    this.state.api.options,
+                    {
+                        headers: {
+                            Authorization: `Bearer ${this.state.access_token}`,
+                        },
+                    },
+                )
+                .then((response) => {
+                    context.commit("SET_MODAL_STATE", false);
+                    context.commit("SHOW_REPORT_SUCCESS_MESSAGE");
+                })
+                .catch((error) => {
+                    context.commit("SET_MODAL_STATE", false);
+                    context.commit("SHOW_FAILED_MESSAGE");
+                    context.commit("HANDLE_ERROR", error.response);
+                });
+        },
+        submit_report_otp(context, payload) {
+            context.commit("SET_MODAL_STATE", true);
+
+            const url = process.env.BASE_URL + "otp"; //not actual endpoint
+
+            this.state.api.client
+                .post(
+                    url,
+                    {
+                        payload,
+                    },
+                    {
+                        headers: {
+                            Authorization: `Bearer ${this.state.access_token}`,
+                        },
+                    },
+                )
+                .then((response) => {
+                    context.commit("SET_MODAL_STATE", false);
+                    context.commit("SHOW_OTP_SUCCESS_MESSAGE");
+                })
+                .catch((error) => {
+                    context.commit("SET_MODAL_STATE", false);
+                    context.commit("SHOW_FAILED_OTP");
+                    context.commit("HANDLE_ERROR", error.response);
+                });
         },
         reset_report_form(context) {
             context.commit("RESET_REPORT_FORM");
diff --git a/test/e2e/specs/ReportIt.spec.js b/test/e2e/specs/ReportIt.spec.js
index 1a0da82..1069757 100644
--- a/test/e2e/specs/ReportIt.spec.js
+++ b/test/e2e/specs/ReportIt.spec.js
@@ -2,11 +2,16 @@ module.exports = {
     "ReportIt Component Test": function (browser) {
         browser
             .url(`${process.env.VUE_APP_APP_URL}#/recipes/egusi-soup`)
-            .waitForElementVisible(".six.wide.computer.column.sixteen.wide.mobile.column", 15000)
+            .waitForElementVisible(
+                ".six.wide.computer.column.sixteen.wide.mobile.column",
+                15000,
+            )
             .waitForElementVisible(".ui.red.fluid.button", 9000000)
             .click(".ui.red.fluid.button")
             .waitForElementVisible(".ui.modal", 5000)
             .setValue('input[name="emailorphone"]', "test@example.com")
+            .click("button.ui.tbb.button.otp")
+            .waitForElementVisible(".ui.success.message", 9000000)
             .click('input[name="nudity"]')
             .click('input[name="irrelevant"]')
             .click('input[name="violation"]')