From 5ff5037102ddc295847d8c6f24d4fe203294a370 Mon Sep 17 00:00:00 2001
From: Komek Hayytnazarov <komek.h@gmail.com>
Date: Tue, 13 Dec 2022 14:44:39 +0500
Subject: [PATCH] faqs added

---
 src/components/faq/Main.vue | 30 +++++++++++++++
 src/helpers/constants.js    |  1 +
 src/views/login/Main.vue    | 10 +++--
 src/views/register/Main.vue | 74 +++++++++++++++++--------------------
 4 files changed, 72 insertions(+), 43 deletions(-)
 create mode 100644 src/components/faq/Main.vue

diff --git a/src/components/faq/Main.vue b/src/components/faq/Main.vue
new file mode 100644
index 0000000..c4830c4
--- /dev/null
+++ b/src/components/faq/Main.vue
@@ -0,0 +1,30 @@
+<template>
+    <a :href="baseUrl + FAQ + locale + '.' + EXTENSION_FAQs"
+        class="cursor-pointer shadow-md fixed bottom-0 right-0 box border-all rounded-full p-3 flex items-center justify-center z-50 mb-10 mr-10">
+        <FileIcon class="w-5 h-5 mr-2 text-primary" />
+        <div class="mr-4 text-primary">{{ $t('FAQ') }}</div>
+
+    </a>
+</template>
+  
+<script setup>
+import { FAQ, EXTENSION_FAQs, SELECTED_LANG } from "@/helpers";
+import { onMounted, ref } from "vue";
+
+const baseUrl = `${import.meta.env.VITE_API_URL}`;
+
+const locale = ref("tm");
+
+const setLocale = () => {
+    let lang = localStorage.getItem(SELECTED_LANG) || "tm";
+    console.log('faq locale: ' + lang);
+
+    locale.value = lang;
+};
+
+
+onMounted(() => {
+    setLocale();
+});
+</script>
+  
\ No newline at end of file
diff --git a/src/helpers/constants.js b/src/helpers/constants.js
index d8af639..1654d09 100644
--- a/src/helpers/constants.js
+++ b/src/helpers/constants.js
@@ -22,6 +22,7 @@ export const APPLICATION_APPROVED_STATE = "approved";
 
 export const EXTENSION_QUESTIONNAIRE_FILE = "DOCX";
 export const EXTENSION_LETTER_FILE = "DOCX";
+export const EXTENSION_FAQs = "pdf";
 export const ACCOUNT_TYPE_BUSINESS = "business";
 export const RECAPTCHA_SCORE_MIN = 0.3;
 export const RECAPTCHA_ACTION = "register";
diff --git a/src/views/login/Main.vue b/src/views/login/Main.vue
index 61c5b62..4e1b361 100644
--- a/src/views/login/Main.vue
+++ b/src/views/login/Main.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <FAQ />
     <div class="container">
       <div class="block xl:grid grid-cols-2 gap-4">
         <!-- BEGIN: Login Info -->
@@ -18,7 +19,7 @@
           </div>
 
           <div
-            class="my-auto mx-auto xl:ml-20 bg-white dark:bg-darkmode-600 xl:bg-transparent px-5 sm:px-8 py-8 xl:p-0 rounded-md shadow-md xl:shadow-none w-full sm:w-3/4 lg:w-2/4 xl:w-auto">           
+            class="my-auto mx-auto xl:ml-20 bg-white dark:bg-darkmode-600 xl:bg-transparent px-5 sm:px-8 py-8 xl:p-0 rounded-md shadow-md xl:shadow-none w-full sm:w-3/4 lg:w-2/4 xl:w-auto">
             <div class="flex items-center justify-between">
               <h2 class="intro-x font-bold text-2xl xl:text-3xl text-center xl:text-left">
                 {{ $t("SIGN_IN") }}
@@ -68,7 +69,7 @@
               </i18n-t>
             </div>
           </div>
-          
+
         </div>
         <!-- END: Login Form -->
       </div>
@@ -87,6 +88,7 @@ import router from "@/router";
 import Logo from "@/components/logo/Main.vue";
 import LogoInfo from "@/components/logo-info/Main.vue";
 import Lang from "@/components/lang/Main.vue";
+import FAQ from "@/components/faq/Main.vue";
 
 const formData = reactive({
   email: "",
@@ -156,10 +158,12 @@ onMounted(() => {
 .custom-btns {
   min-width: 128px;
 }
+
 .form-check-input[type="radio"],
 .login .login__input,
 .form-select {
-  border-color: rgb(var(--color-slate-400) / var(--tw-border-opacity));;
+  border-color: rgb(var(--color-slate-400) / var(--tw-border-opacity));
+  ;
 }
 </style>
   
\ No newline at end of file
diff --git a/src/views/register/Main.vue b/src/views/register/Main.vue
index f261316..0ef7d46 100644
--- a/src/views/register/Main.vue
+++ b/src/views/register/Main.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <FAQ />
     <div class="container">
       <div class="block xl:grid grid-cols-2 gap-4">
         <!-- BEGIN: Register Info -->
@@ -18,14 +19,14 @@
             </div>
 
             <div class="intro-x mt-2 text-slate-400 dark:text-slate-400 xl:hidden text-center">
-              {{$t('SING_IN_MOTIVATION_MOBILE')}}
+              {{ $t('SING_IN_MOTIVATION_MOBILE') }}
             </div>
             <div class="intro-x mt-8 flex flex-wrap justify-between">
               <!-- Firstname field -->
               <div class="input-form-item">
                 <input type="text" v-model.trim="validate.firstname.$model"
                   class="intro-x login__input form-control py-3 px-4 block"
-                  :class="{ 'border-danger': validate.firstname.$error }" :placeholder=" $t('FIRSTNAME') " />
+                  :class="{ 'border-danger': validate.firstname.$error }" :placeholder="$t('FIRSTNAME')" />
                 <template v-if="validate.firstname.$error">
                   <div v-for="(error, index) in validate.firstname.$errors" :key="index" class="text-danger mt-2">
                     {{ error.$message }}
@@ -33,12 +34,12 @@
                 </template>
               </div>
               <!-- End firstname field -->
-              
+
               <!-- Lastname field -->
               <div class="input-form-item">
                 <input type="text" v-model.trim="validate.lastname.$model"
-                class="intro-x login__input form-control py-3 px-4 block"
-                :class="{ 'border-danger': validate.lastname.$error }" :placeholder=" $t('LASTNAME') " />
+                  class="intro-x login__input form-control py-3 px-4 block"
+                  :class="{ 'border-danger': validate.lastname.$error }" :placeholder="$t('LASTNAME')" />
                 <template v-if="validate.lastname.$error">
                   <div v-for="(error, index) in validate.lastname.$errors" :key="index" class="text-danger mt-2">
                     {{ error.$message }}
@@ -51,7 +52,8 @@
                 <div class="mt-4">
                   <!-- <label>{{ $t("SELECT_COUNTRY_LONG") }}</label> -->
                   <select class="form-select py-3 px-4 block sm:mr-2" aria-label="Default select example"
-                    v-model="validate.country.$model" :class="{ 'border-danger': validate.country.$error }" name="country">
+                    v-model="validate.country.$model" :class="{ 'border-danger': validate.country.$error }"
+                    name="country">
                     <option value="" disabled>{{ $t("SELECT_COUNTRY_LONG") }}</option>
                     <template v-if="countries.length">
                       <option v-for="country in countries" :key="country.id" :value="country.id">
@@ -60,7 +62,7 @@
                     </template>
                   </select>
                 </div>
-                
+
                 <template v-if="validate.country.$error">
                   <div v-for="(error, index) in validate.country.$errors" :key="index" class="text-danger mt-2">
                     {{ error.$message }}
@@ -73,7 +75,8 @@
                 <div class="mt-4">
                   <!-- <label>{{ $t("ACCOUNT_TYPE") }}</label> -->
                   <select class="form-select py-3 px-4 block sm:mr-2" aria-label="Default select example"
-                    v-model="validate.accountType.$model" :class="{ 'border-danger': validate.accountType.$error }" name="accountType">
+                    v-model="validate.accountType.$model" :class="{ 'border-danger': validate.accountType.$error }"
+                    name="accountType">
                     <option value="" disabled>{{ $t("ACCOUNT_TYPE") }}</option>
                     <option value="business">{{ $t("ACCOUNT_TYPE_BUSINESS") }}</option>
                     <option value="company">{{ $t("ACCOUNT_TYPE_COMPANY") }}</option>
@@ -89,8 +92,8 @@
               <!-- Email field -->
               <div class="input-form-item">
                 <input type="text" v-model.trim="validate.email.$model"
-                class="intro-x login__input form-control py-3 px-4 block mt-4"
-                :class="{ 'border-danger': validate.email.$error }" :placeholder=" $t('EMAIL') " />
+                  class="intro-x login__input form-control py-3 px-4 block mt-4"
+                  :class="{ 'border-danger': validate.email.$error }" :placeholder="$t('EMAIL')" />
                 <template v-if="validate.email.$error">
                   <div v-for="(error, index) in validate.email.$errors" :key="index" class="text-danger mt-2">
                     {{ error.$message }}
@@ -103,7 +106,7 @@
                 <div class="relative">
                   <input type="password" v-model.trim="validate.password.$model"
                     class="login__input form-control py-3 px-4 block mt-4"
-                    :class="{ 'border-danger': validate.password.$error }" :placeholder=" $t('PASSWORD') "
+                    :class="{ 'border-danger': validate.password.$error }" :placeholder="$t('PASSWORD')"
                     name="password" />
                   <EyeIcon
                     class="block mx-auto absolute top-1/2 transform -translate-y-1/2 right-3 text-slate-400 cursor-pointer"
@@ -127,33 +130,19 @@
             </div>
 
             <div class="intro-x mt-5 xl:mt-8 text-primary xl:text-left">
-              <VueRecaptcha
-                :sitekey="reCaptchaV2Key"
-                :load-recaptcha-script="true"
-                @verify="reCaptchaHandleSuccess"
-                @error="reCaptchaHandleError"
-                @expired="reCaptchaHandleExpired"
-              ></VueRecaptcha>
+              <VueRecaptcha :sitekey="reCaptchaV2Key" :load-recaptcha-script="true" @verify="reCaptchaHandleSuccess"
+                @error="reCaptchaHandleError" @expired="reCaptchaHandleExpired"></VueRecaptcha>
             </div>
             <div class="intro-x mt-5 xl:mt-8 text-center xl:text-left">
-              <button class="btn btn-primary py-3 px-4 xl:mr-3 align-top w-full custom-btns"
-                @click.prevent="onRegister" :disabled="isLoading || !recaptchaVerified">
+              <button class="btn btn-primary py-3 px-4 xl:mr-3 align-top w-full custom-btns" @click.prevent="onRegister"
+                :disabled="isLoading || !recaptchaVerified">
                 {{ $t("SIGN_UP") }}
                 <LoadingIcon icon="oval" color="white" class="w-4 h-4 ml-2" v-if="isLoading" />
               </button>
             </div>
             <div class="intro-x mt-5 xl:mt-8 text-primary xl:text-left">
-              <i18n-t
-                keypath="ALREADY_HAS_ACCOUNT"
-                for="SIGN_IN"
-                class="w-full text-center"
-                tag="p"
-              >
-                <a
-                  @click.prevent="onLogin"
-                  href="#"
-                  class="font-bold underline"
-                >
+              <i18n-t keypath="ALREADY_HAS_ACCOUNT" for="SIGN_IN" class="w-full text-center" tag="p">
+                <a @click.prevent="onLogin" href="#" class="font-bold underline">
                   {{ $t('SIGN_IN') }}
                 </a>
               </i18n-t>
@@ -183,6 +172,7 @@ import Logo from "@/components/logo/Main.vue";
 import LogoInfo from "@/components/logo-info/Main.vue";
 import Lang from "@/components/lang/Main.vue";
 import i18nn from "@/i18n";
+import FAQ from "@/components/faq/Main.vue";
 import { ACCOUNT_TYPE_BUSINESS, RECAPTCHA_SCORE_MIN, RECAPTCHA_ACTION } from "@/helpers";
 // import { load } from 'recaptcha-v3';
 import { fetchWrapper } from "@/api";
@@ -319,7 +309,7 @@ const onRegister = async () => {
 
     //   console.log("recaptchaResponse:");
     //   console.log(recaptchaResponse);
-      
+
     // } catch (error) {
     //   isLoading.value = false;
 
@@ -328,16 +318,16 @@ const onRegister = async () => {
 
     // if(recaptchaResponse) {
     //   if(recaptchaVerifiedSuccessfully(recaptchaResponse)) {
-          
-        await authStore.register(newUser);
 
-        // recaptchaInstance.hideBadge();
+    await authStore.register(newUser);
 
-      // } else {
+    // recaptchaInstance.hideBadge();
 
-      //   alertStore.error(i18nn.global.t("RECAPTCHA_TOKEN_VERIFICATION_FAILED"));
+    // } else {
 
-      // }
+    //   alertStore.error(i18nn.global.t("RECAPTCHA_TOKEN_VERIFICATION_FAILED"));
+
+    // }
     // }
 
     isLoading.value = false;
@@ -347,7 +337,7 @@ const onRegister = async () => {
 // const recaptchaVerifiedSuccessfully = (recaptchaResponse) => {
 
 //   if(recaptchaResponse["success"]) {
-    
+
 //     if(recaptchaResponse["score"] > RECAPTCHA_SCORE_MIN) {
 
 //       return recaptchaResponse["action"] === RECAPTCHA_ACTION;
@@ -395,14 +385,18 @@ onBeforeMount(async () => {
 .custom-btns {
   min-width: 128px;
 }
+
 .form-check-input[type="radio"],
 .login .login__input,
 .form-select {
-  border-color: rgb(var(--color-slate-400) / var(--tw-border-opacity));;
+  border-color: rgb(var(--color-slate-400) / var(--tw-border-opacity));
+  ;
 }
+
 .input-form-item {
   width: 48%;
 }
+
 .login .login__input {
   min-width: unset;
 }