Mail send fix

lang/id.json

@@ -123,5 +123,6 @@
     "referenceerror: countrycurrency is not defined": "ReferenceError: countryCurrency is not defined",
     "referenceerror: currencycountryrate is not defined": "ReferenceError: currencyCountryRate is not defined",
     "referenceerror: ccountry is not defined": "ReferenceError: ccountry is not defined",
-    "typeerror: invalid assignment to const 'response'": "TypeError: invalid assignment to const 'response'"
+    "typeerror: invalid assignment to const 'response'": "TypeError: invalid assignment to const 'response'",
+    "error: request aborted": "Error: Request aborted"
 }

package.json

@@ -30,9 +30,9 @@
         "vee-validate": "^4.12.4",
         "vue-google-charts": "^1.1.0",
         "vue-multiselect": "^3.0.0-beta.3",
-        "vue-recaptcha": "^3.0.0-alpha.2",
         "vue3-easy-data-table": "^1.5.47",
         "vue3-multiselect-checkboxed": "^0.0.9",
+        "vue3-popper": "^1.5.0",
         "vuedraggable": "^4.1.0",
         "yup": "^1.3.3"
     }

resources/js/Pages/IkeaAbout.vue

@@ -2,12 +2,13 @@
 
 import GuestLayout from '../Layouts/GuestLayout.vue';
 import axios from 'axios';
-import { Form, Field } from 'vee-validate';
+import { Form, Field, ErrorMessage } from 'vee-validate';
 import * as yup from 'yup';
 import { ref } from "vue";
 import Swal from "sweetalert2";
 
 const result = ref({ });
+const siteKey = ref('6Ld2MF0pAAAAAFpJOfU1FAxr7QiEoq1RJT1Pn2Hp');
 const schema = yup.object().shape({
     name: yup.string().required('Name is required'),
     email: yup.string().email('Email is invalid').required('Email is required'),
@@ -16,9 +17,12 @@ const schema = yup.object().shape({
   //  recaptcha: yup.string().required('Please verify you are human'),
 });
 
+
+
 function onSubmit(data) {
     console.log("DATA=", data);
     try {
+
         const response = axios.post(route("ajax.send.email"), {
             name: data.name,
             email: data.email,
@@ -113,15 +117,19 @@ function onSubmit(data) {
 
             <Form @submit="onSubmit" :validation-schema="schema" v-slot="{ errors }" >
                 <Field type='text' placeholder='Name' name="name" class="w-full rounded-md py-2.5 px-4 mb-2 border text-sm outline-[#007bff]" />
-                <div class="">{{ errors.name }}</div>
+                <div class="bg-red-500">{{ errors.name }}</div>
                 <Field type='email' placeholder='Email' name="email" class="w-full rounded-md py-2.5 px-4 mb-2 border text-sm outline-[#007bff]" />
-                <div class="">{{ errors.email }}</div>
+                <div class="bg-red-500">{{ errors.email }}</div>
                 <Field type='text' placeholder='Subject' name="subject" class="w-full rounded-md py-2.5 px-4 mb-2 border text-sm outline-[#007bff]" />
-                <div class="">{{ errors.subject }}</div>
+                <div class="bg-red-500">{{ errors.subject }}</div>
                 <Field type='textarea' as='textarea' placeholder='Message' rows="6" name="message" class="w-full rounded-md px-4 border text-sm pt-2.5 outline-[#007bff]" />
-                <div class="">{{ errors.message }}</div>
+                <div class="bg-red-500">{{ errors.message }}</div>
                 <button type='submit' class="text-white bg-[#007bff] hover:bg-blue-600 font-semibold rounded-md text-sm px-4 py-2.5 w-full">Send</button>
-                <div class="bg-green-500 w-full text-center mt-1">{{ result }}</div>
+
+                <div v-if="errors.recaptcha" class="text-red">        {{ errors.recaptcha }}      </div>
+                <div v-if="result['success']" class="bg-green-500 w-full text-center mt-1">{{ result['success'] }}</div>
+                <div v-if="result['error']" class="bg-red-500 w-full text-center mt-1">{{ result['error'] }}</div>
+
             </Form>
         </div>
     </div>

resources/js/Pages/IkeaRoot.vue

@@ -19,6 +19,7 @@ import GuestLayout from "../Layouts/GuestLayout.vue";
 import { useForm } from "@inertiajs/inertia-vue3";
 import axios from "axios";
 import filterimg from "@/assets/eglass-filter.png";
+import Popper from "vue3-popper";
 
 const sdropdown = ref([
   { text: "Description", value: "typeName" },
@@ -543,7 +544,7 @@ watch(ccodes, (codes) => {
           >
             <template #item-img="{ code, img }">
                 <img
-                class="h-12 hover:scale-150 hover:left-2 hover:h-48 hover:float-left hover:overflow-hidden"
+                class="h-12 hover:z-50 hover:scale-100 hover:left-2 hover:h-48 hower:w-48 hover:float-left hover:overflow-hidden"
                 :src="img"
                 :alt="code"
               />