contact.vue

<template>
  <!-- Contact section -->
  <main class="overflow-hidden">
    <div class="">
      <!-- Header -->
      <div class="bg-gradient-to-b from-voxo-gray-light">
        <div class="py-24 lg:py-32">
          <div class="relative z-10 max-w-7xl mx-auto pl-4 pr-8 sm:px-6 lg:px-8 text-center">
            <h1 class="text-4xl font-extrabold tracking-tight text-warm-gray-900 sm:text-5xl lg:text-6xl">
              Get in touch
            </h1>
            <p class="mt-6 text-xl text-warm-gray-500 max-w-3xl mx-auto">
              Connect with VOXO! We would love to introduce you to our team and our vision for fixing the telecom industry and helping people think differently about business relationships.
            </p>
          </div>
        </div>
      </div>

      <!-- Contact section -->
      <section class="relative" aria-labelledby="contact-heading">
        <div class="absolute w-full h-1/2" aria-hidden="true" />
        <div class="w-full mr-auto">
          <div class="relative">
            <h2 id="contact-heading" class="sr-only">
              Contact us
            </h2>
            <div class="grid grid-cols-1 lg:grid-cols-7">
              <!-- Contact information -->
              <div class="relative overflow-hidden px-6 p-10 sm:px-10 xl:p-10 bg-voxo-gray-medium rounded-r-xl lg:col-span-3 flex lg:justify-end">
                <div class="lg:w-2/3">
                  <h1 class="text-4xl">
                    Contact info
                  </h1>
                  <p class="mt-6 text-voxo-gray-dark">
                    Call or email us anytime. You can also click the little chat bubble at the bottom right to get lightening fast responses from our team.
                  </p>
                  <dl class="mt-8 space-y-6">
                    <dt><span class="sr-only">Phone number</span></dt>
                    <dd class="flex text-base">
                      <PhoneIcon class="flex-shrink-0 w-6 h-6 text-black" aria-hidden="true" />
                      <a href="tel:6016025060"><span class="ml-3 font-einasemibold">+1 (601) 602-5060</span></a>
                    </dd>
                    <dt><span class="sr-only">Email</span></dt>
                    <dd class="flex text-base">
                      <MailIcon class="flex-shrink-0 w-6 h-6" aria-hidden="true" />
                      <a id="intercomPopup" href="mailto:sales@voxo.co"><span class="ml-3 font-einasemibold">Talk to sales</span></a>
                    </dd>
                  </dl>
                  <ul role="list" class="mt-8 flex space-x-12">
                    <li>
                      <a class="" href="https://www.facebook.com/voxoco" target="_blank">
                        <span class="sr-only">Facebook</span>
                        <svg class="w-7 h-7" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
                          <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
                        </svg>
                      </a>
                    </li>
                    <li>
                      <a class="" href="https://github.com/voxoco" target="_blank">
                        <span class="sr-only">GitHub</span>
                        <svg class="w-7 h-7" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
                          <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
                        </svg>
                      </a>
                    </li>
                    <li>
                      <a class="" href="https://twitter.com/voxollc" target="_blank">
                        <span class="sr-only">Twitter</span>
                        <svg class="w-7 h-7" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
                          <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
                        </svg>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>

              <!-- Contact form -->
              <div class="py-10 px-6 sm:px-10 lg:col-span-4 xl:pt-8 xl:pr-8 xl:pl-8 pb-0">
                <div class="lg:w-5/6 lg:max-w-3xl lg:min-w-xl lg:pr-10">
                  <h1 class="text-4xl">
                    Send us a message
                  </h1>
                  <div class="mt-6 grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-8 ">
                    <div>
                      <label for="first-name" class="block text-sm font-medium text-black">First name</label>
                      <input
                        id="first-name"
                        v-model="contactForm.firstName"
                        type="text"
                        name="first-name"
                        class="mt-1 focus:ring-black focus:border-black block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
                      />
                    </div>
                    <div>
                      <label for="last-name" class="block text-sm font-medium text-black">Last name</label>
                      <input
                        id="last-name"
                        v-model="contactForm.lastName"
                        type="text"
                        name="last-name"
                        autocomplete="family-name"
                        class="mt-1 focus:ring-black focus:border-black block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
                      />
                    </div>
                    <div>
                      <label for="email" class="block text-sm font-medium text-black">Email</label>
                      <input
                        id="email"
                        v-model="contactForm.email"
                        name="email"
                        type="email"
                        autocomplete="email"
                        class="mt-1 focus:ring-black focus:border-black block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
                      />
                    </div>
                    <div>
                      <label for="phone" class="block text-sm font-medium text-black">Phone</label>
                      <input
                        id="phone"
                        v-model="contactForm.phone"
                        type="text"
                        name="phone"
                        autocomplete="tel"
                        class="mt-1 focus:ring-black focus:border-black block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
                      />
                    </div>
                    <div class="sm:col-span-2">
                      <div class="flex justify-between">
                        <label for="message" class="text-sm text-black">Message</label>
                        <span id="message-max" class="text-sm text-gray-700">Max. 500 characters</span>
                      </div>
                      <div class="mt-1">
                        <textarea
                          id="message"
                          v-model="contactForm.message"
                          name="message"
                          rows="4"
                          class="focus:ring-black focus:border-black py-3 px-4 block border-gray-300 w-full rounded-md"
                          aria-describedby="message-max"
                        />
                      </div>
                    </div>
                    <div class="sm:col-span-2 sm:flex sm:justify-end">
                      <button
                        type="button"
                        class="btn-call"
                        @click="submitForm"
                      >
                        Submit
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>

    <!-- Contact grid -->
    <section aria-labelledby="offices-heading">
      <div class="max-w-7xl mx-auto pt-24 pb-24 sm:pb-42 px-4 sm:pt-32 sm:px-6 lg:px-8">
        <h1 class="text-3xl md:text-5xl text-center">
          Our offices
        </h1>
        <p class="mt-6 text-lg text-warm-gray-500 max-w-3xl text-center mx-auto">
          We win together and we lose together. No one is left behind or unappreciated. We believe the strength of VOXO lies in the unity and loyalty of its people.
        </p>
        <div class="max-w-6xl mx-auto">
          <div class="w-full flex flex-wrap justify-center gap-5 mt-10">
            <div
              v-for="location in locations"
              :key="location.name"
              class="border rounded-2xl border-voxo-gray-border border-opacity-40 pt-12 pb-4 px-7 no-flex w-72 flex-none cursor-pointer"
              @click="$router.push(`/locations${location.href}`)"
            >
              <div class="h-12 flex align-center">
                <img class="" :src="location.icon" :alt="location.name" />
              </div>
              <h2 class="text-xl pt-7 pb-1">
                {{ location.name }}
              </h2>
              <div class="text-sm text-voxo-gray">
                {{ location.description }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

  <!--  Join Team Partial-->
  <JoinTeamPartial />

  <!-- Global notification live region, render this permanently at the end of the document -->
  <div aria-live="assertive" class="fixed top-0 inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6 sm:items-start z-40">
    <div class="w-full flex flex-col items-center space-y-4 sm:items-end">
      <!-- Notification panel, dynamically insert this into the live region when it needs to be displayed -->
      <transition
        enter-active-class="transform ease-out duration-300 transition"
        enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
        enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
        leave-active-class="transition ease-in duration-100"
        leave-from-class="opacity-100"
        leave-to-class="opacity-0"
      >
        <div v-if="showErrorsContact" class="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden">
          <div class="p-4">
            <div class="flex items-start">
              <div class="flex-shrink-0 pt-1">
                <XIcon class="h-6 w-6 text-voxo-red" aria-hidden="true" />
              </div>
              <div class="ml-3 w-0 flex-1">
                <p class="text-lg font-einabold">
                  Form error
                </p>
                <p v-for="error of x$.$errors" :key="error.$uid" class="mt-1 text-sm">
                  <span>{{ error.$message }}</span>
                </p>
              </div>
              <div class="ml-4 flex-shrink-0 flex">
                <button class="bg-white rounded-md inline-flex text-voxo-gray-dark hover:text-gray-500 focus:outline-none" @click="showErrorsContact = false">
                  <span class="sr-only">Close</span>
                  <XIcon class="h-5 w-5" aria-hidden="true" />
                </button>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>

  <!-- Global notification live region, render this permanently at the end of the document -->
  <div aria-live="assertive" class="fixed top-0 inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6 sm:items-start z-40">
    <div class="w-full flex flex-col items-center space-y-4 sm:items-end">
      <!-- Notification panel, dynamically insert this into the live region when it needs to be displayed -->
      <transition
        enter-active-class="transform ease-out duration-300 transition"
        enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
        enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
        leave-active-class="transition ease-in duration-100"
        leave-from-class="opacity-100"
        leave-to-class="opacity-0"
      >
        <div v-if="show" class="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden">
          <div class="p-4">
            <div class="flex items-start">
              <div class="flex-shrink-0 pt-1">
                <CheckCircleIcon class="h-6 w-6 text-green-400" aria-hidden="true" />
              </div>
              <div class="ml-3 w-0 flex-1">
                <p class="text-base font-einabold">
                  Message submitted
                </p>
                <p class="mt-1 text-sm">
                  Thanks for reaching out to us!
                </p>
              </div>
              <div class="ml-4 flex-shrink-0 flex">
                <button class="bg-white rounded-md inline-flex text-voxo-gray-dark hover:text-gray-500 focus:outline-none" @click="show = false">
                  <span class="sr-only">Close</span>
                  <XIcon class="h-5 w-5" aria-hidden="true" />
                </button>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>

import { ref } from 'vue'
import { MailIcon, PhoneIcon, CheckCircleIcon, XIcon } from '@heroicons/vue/outline'
import { email, required, helpers } from '@vuelidate/validators'
import { useVuelidate } from '@vuelidate/core'
import JoinTeamPartial from '~/components/join-team-partial.vue'

const locations = [
  {
    name: 'Hattiesburg, MS',
    description: 'We are in Hattiesburg at 7217 US-98 Suite 40',
    href: '/hattiesburg',
    icon: '/assets/images/icons/flag-hattiesburg.svg',
  },
  {
    name: 'The Woodlands, TX',
    description: 'We are in The Woodlands at 9595 Six Pines Dr. Ste. 8210',
    href: '/texas',
    icon: '/assets/images/icons/flag-tx.svg',
  },
  {
    name: 'Mobile, AL',
    description: 'We are at 30s Congress St. in Mobile',
    href: 'mobile',
    icon: '/assets/images/icons/flag-mobile.svg',
  },
  {
    name: 'Nashville, TN',
    description: 'Come see us in Nashville at 4100 Smith School Rd.',
    href: '/nashville',
    icon: '/assets/images/icons/flag-nashville.svg',
  },
  {
    name: 'Lancaster, PA',
    description: 'Come see us in Lancaster at 800 New Holland Avenue',
    href: '/lancaster',
    icon: '/assets/images/icons/flag-pa.svg',
  },
  {
    name: 'Belfast, UK',
    description: 'Come see us in Northern Ireland',
    href: '/belfast',
    icon: '/assets/images/icons/flag-wi.svg',
  },
]

export default {
  components: {
    MailIcon,
    PhoneIcon,
    CheckCircleIcon,
    XIcon,
    JoinTeamPartial,
  },
  setup() {
    const show = ref(false)
    const showErrorsContact = ref(false)

    const x$ = useVuelidate({ $scope: false })

    return {
      locations,
      show,
      showErrorsContact,
      x$,
    }
  },
  data() {
    return {
      contactForm: {
        firstName: '',
        lastName: '',
        email: '',
        phone: '',
        message: '',
      },
    }
  },
  validations() {
    return {
      contactForm: {
        firstName: { required: helpers.withMessage('First name is required', required), $lazy: true },
        lastName: { required: helpers.withMessage('Last name is required', required), $lazy: true },
        message: { required: helpers.withMessage('Message is required', required), $lazy: true },
        email: { required: helpers.withMessage('Email is required', required), email: helpers.withMessage('Email field must be email', email), $lazy: true },
      },
    }
  },
  methods: {
    async submitForm() {

      // validate the form before posting to formspree
      const validate = await this.x$.$validate()

      if (validate) {
        // post to formspree
        const url = 'https://formspree.io/f/mrgrdjol'
        await fetch(url, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(this.contactForm),
        })

        this.clearForm()
        this.open = false
        this.show = true
        setTimeout(() => {
          this.show = false
        }, 3000)
      }
      else {
        this.showErrorsContact = true
      }
    },
    clearForm() {
      this.contactForm = {
        firstName: '',
        lastName: '',
        email: '',
        phone: '',
        position: '',
        message: '',
      }
    },
  },
}

</script>