@indirecttek/essentials-engine 1.1.3 → 1.1.4

package/dist/components/ContactForm.astro

@@ -16,7 +16,20 @@ const { config } = Astro.props;
     <p class="text-center text-[color:var(--color-foreground)] opacity-80 mb-8 md:mb-12">
       Get in touch with {config.businessName} today
     </p>
-    <form class="space-y-6">
+
+    <!-- Success Message (hidden by default) -->
+    <div id="contact-success" class="hidden bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-md mb-6">
+      <p class="font-medium">Message sent successfully!</p>
+      <p class="text-sm">We'll get back to you within 24 hours.</p>
+    </div>
+
+    <!-- Error Message (hidden by default) -->
+    <div id="contact-error" class="hidden bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-md mb-6">
+      <p class="font-medium">Something went wrong</p>
+      <p class="text-sm" id="contact-error-message">Please try again or contact us directly.</p>
+    </div>
+
+    <form id="contact-form" class="space-y-6">
       <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
         <div>
           <label
@@ -84,9 +97,11 @@ const { config } = Astro.props;
       </div>
       <button
         type="submit"
-        class="w-full bg-[color:var(--color-primary)] text-[color:var(--color-background)] py-3 md:py-4 rounded-md font-semibold text-lg hover:opacity-90 transition-opacity"
+        id="contact-submit"
+        class="w-full bg-[color:var(--color-primary)] text-[color:var(--color-background)] py-3 md:py-4 rounded-md font-semibold text-lg hover:opacity-90 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed"
       >
-        Send Message
+        <span id="submit-text">Send Message</span>
+        <span id="submit-loading" class="hidden">Sending...</span>
       </button>
     </form>
     <div class="mt-12 text-center space-y-2 text-[color:var(--color-foreground)] opacity-80">
@@ -104,3 +119,70 @@ const { config } = Astro.props;
     </div>
   </div>
 </section>
+
+<script>
+  const form = document.getElementById('contact-form') as HTMLFormElement;
+  const submitBtn = document.getElementById('contact-submit') as HTMLButtonElement;
+  const submitText = document.getElementById('submit-text') as HTMLSpanElement;
+  const submitLoading = document.getElementById('submit-loading') as HTMLSpanElement;
+  const successMsg = document.getElementById('contact-success') as HTMLDivElement;
+  const errorMsg = document.getElementById('contact-error') as HTMLDivElement;
+  const errorText = document.getElementById('contact-error-message') as HTMLParagraphElement;
+
+  form?.addEventListener('submit', async (e) => {
+    e.preventDefault();
+
+    // Hide any previous messages
+    successMsg.classList.add('hidden');
+    errorMsg.classList.add('hidden');
+
+    // Show loading state
+    submitBtn.disabled = true;
+    submitText.classList.add('hidden');
+    submitLoading.classList.remove('hidden');
+
+    const formData = new FormData(form);
+    const data = {
+      name: formData.get('name'),
+      email: formData.get('email'),
+      phone: formData.get('phone') || undefined,
+      message: formData.get('message'),
+    };
+
+    try {
+      const response = await fetch('/api/contact', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      });
+
+      const result = await response.json();
+
+      if (result.success) {
+        // Show success message
+        successMsg.classList.remove('hidden');
+        form.reset();
+
+        // Scroll to success message
+        successMsg.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      } else {
+        // Show error message
+        errorText.textContent = result.error || 'Please try again or contact us directly.';
+        errorMsg.classList.remove('hidden');
+        errorMsg.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      }
+    } catch (error) {
+      // Show generic error
+      errorText.textContent = 'Network error. Please check your connection and try again.';
+      errorMsg.classList.remove('hidden');
+      errorMsg.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    } finally {
+      // Reset button state
+      submitBtn.disabled = false;
+      submitText.classList.remove('hidden');
+      submitLoading.classList.add('hidden');
+    }
+  });
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indirecttek/essentials-engine",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/types.d.ts",