Add contact us page

pages/contact.vue

@@ -1,20 +1,106 @@
 <template>
-  <div class="container my-8">
-    <h1 class="mb-8 text-3xl font-semibold text-primary">Contact Page from Parent</h1>
-    <div class="my-8 prose">
-      <p>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat facilis, commodi illum repellat accusamus praesentium quaerat ut ducimus ipsam deserunt, a voluptate id
-        similique ullam, provident tenetur molestiae ad. Ea aperiam esse eaque aut, beatae consectetur nam velit unde! Et excepturi quam eos labore, nulla impedit recusandae
-        quaerat maxime expedita.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo voluptate neque in odio officia assumenda nulla cumque. Veniam et tenetur accusantium, fuga pariatur
-        repellendus impedit. Quod sint odio quisquam! Sequi repellendus eum dolorum eveniet, quidem dolor necessitatibus velit sunt esse maiores. Eum odit dolorum mollitia?
-        Adipisci amet hic veniam debitis architecto nobis necessitatibus inventore iure ullam cum illo quae quam, excepturi beatae itaque exercitationem magnam quidem aspernatur
-        iusto. Quos, reprehenderit? Dignissimos autem recusandae qui sit cum velit consequatur pariatur illum omnis excepturi, adipisci ab eius, optio, temporibus iure unde
-        inventore. Maxime officiis tempore voluptatum ipsa, ab possimus atque corporis repellendus obcaecati, numquam fuga ullam doloremque ea reprehenderit earum quam culpa neque
-        dolor sint voluptates qui rem? Ipsam reiciendis non illum?
-      </p>
+  <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
+    <div class="max-w-3xl mx-auto">
+      <div class="bg-white shadow-lg rounded-lg overflow-hidden">
+        <div class="px-6 py-8 sm:p-10 sm:pb-6">
+          <h3 class="text-xl sm:text-2xl font-semibold text-gray-800 mb-4">Contact Us</h3>
+
+          <p class="text-center mb-6">
+            Or email us directly at
+            <a href="mailto:contact@comewithreverse.com" class="text-blue-500 hover:text-blue-600">
+              contact@comewithreverse.com
+            </a>
+          </p>
+
+          <form @submit.prevent="sendContactMessage">
+            <div class="space-y-4">
+              <div>
+                <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
+                <input v-model="contactForm.name" type="text" name="name" id="name" required
+                  class="mt-1 block w-full px-4 py-3 bg-gray-50 rounded-md border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
+                  placeholder="John Doe">
+              </div>
+              <div>
+                <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
+                <input v-model="contactForm.email" type="email" name="email" id="email" required
+                  class="mt-1 block w-full px-4 py-3 bg-gray-50 rounded-md border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
+                  placeholder="johndoe@email.com">
+              </div>
+              <div>
+                <label for="subject" class="block text-sm font-medium text-gray-700">Subject</label>
+                <input v-model="contactForm.subject" type="text" name="subject" id="subject" required
+                  class="mt-1 block w-full px-4 py-3 bg-gray-50 rounded-md border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
+                  placeholder="Subject">
+              </div>
+              <div>
+                <label for="message" class="block text-sm font-medium text-gray-700">Message</label>
+                <textarea v-model="contactForm.message" name="message" id="message" required rows="4"
+                  class="mt-1 block w-full px-4 py-3 bg-gray-50 rounded-md border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
+                  placeholder="Your message"></textarea>
+              </div>
+            </div>
+            <div
+              class="bg-white backdrop-blur-sm bg-opacity-75 border-t col-span-full p-4 sticky bottom-0 rounded-b-lg flex justify-center">
+              <button
+                class="rounded-md font-semibold bg-primary text-white py-2 px-4 gap-4 items-center flex justify-center">
+                <span>{{ buttonText }}</span>
+                <LoadingIcon v-if="sending" class="animate-spin" color="#fff" size="20" />
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
     </div>
   </div>
 </template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+
+const sending = ref(false);
+const emailSent = ref(false);
+const formSubmitted = ref(false);
+const buttonText = computed(() => {
+  if (sending.value) return 'Sending...';
+  if (emailSent.value) return 'Email Sent';
+  return 'Send Message';
+});
+
+const initialFormState = {
+  name: '',
+  email: '',
+  subject: '',
+  message: '',
+};
+
+const contactForm = ref({ ...initialFormState });
+
+async function sendContactMessage() {
+  console.log("sending");
+  sending.value = true;
+  try {
+    const { data } = await useAsyncGql('SendEmail', {
+      to: "alexlykesas@comewithreverse.com",
+      from: contactForm.value.email,
+      subject: `Contact Us Inquiry: ${contactForm.value.subject}`,
+      body: `Name: ${contactForm.value.name}\n\nMessage: ${contactForm.value.message}`.replace(/\n/g, '<br>'),
+      clientMutationId: "contactForm"
+    });
+    contactForm.value = { ...initialFormState };
+    emailSent.value = true;
+    formSubmitted.value = true;
+    setTimeout(() => emailSent.value = false, 5000);
+  } catch (error) {
+
+  } finally {
+    sending.value = false;
+  }
+}
+
+watch(contactForm, (newVal, _) => {
+  if (formSubmitted.value && JSON.stringify(newVal) !== JSON.stringify(initialFormState)) {
+    emailSent.value = false;
+    formSubmitted.value = false;
+  }
+}, { deep: true });
+</script>

woonuxt_base/queries/sendEmail.gql

@@ -0,0 +1,15 @@
+mutation SendEmail($to: String!, $from: String!, $subject: String!, $body: String!, $clientMutationId: String!) {
+  sendEmail(
+    input: {
+      to: $to
+      from: $from
+      subject: $subject
+      body: $body
+      clientMutationId: $clientMutationId
+    }
+  ) {
+    origin
+    sent
+    message
+  }
+}