Feat: Redesignclient schedule meeting flow and client thank-you page

canopas · Jul 4, 2024 · d3e0ee6 · d3e0ee6
1 parent 76ad4e5
commit d3e0ee6
Show file tree

Hide file tree

Showing 14 changed files with 253 additions and 83 deletions.
diff --git a/nuxt-frontend/components/contact/CalendlyIframe.vue b/nuxt-frontend/components/contact/CalendlyIframe.vue
@@ -1,19 +1,19 @@
 <template>
-  <div class="w-full h-[550px] border-0 pt-5 md:h-screen">
+  <div class="w-full h-[550px] border-0 md:h-screen">
     <div v-if="isLoading" class="iframe-loader">
       <img
         :src="loader"
         class="fixed left-[50%] top-[50%] -translate-y-1/2 -translate-x-1/2 z-[100]"
         alt="loader-image"
       />
     </div>
-    <iframe
-      class="h-screen w-full"
-      :src="calendlyUrl"
-      title="calendly"
-      v-on:load="isLoading = false"
-      v-show="!isLoading"
-    ></iframe>
+    <div v-if="!isLoading" class="h-28" id="calendly-embed-before"></div>
+    <div
+      id="calendly-embed"
+      class="h-[calc(100vh-7rem)] w-full"
+      :data-url="calendlyUrl"
+      style="min-width: 320px"
+    ></div>
   </div>
 </template>
 
@@ -29,5 +29,60 @@ export default {
       isLoading: true,
     };
   },
+  mounted() {
+    this.loadCalendlyWidget();
+    this.initializeCalendlyEventListeners();
+  },
+  beforeDestroy() {
+    window.removeEventListener("message", this.handleCalendlyEvent);
+  },
+  methods: {
+    loadCalendlyWidget() {
+      if (window.Calendly) {
+        this.initCalendlyWidget();
+      } else {
+        const script = document.createElement("script");
+        script.src = "https://assets.calendly.com/assets/external/widget.js";
+        script.async = true;
+        script.onload = this.initCalendlyWidget;
+        document.head.appendChild(script);
+      }
+    },
+    initCalendlyWidget() {
+      Calendly.initInlineWidget({
+        url: this.calendlyUrl,
+        parentElement: document.getElementById("calendly-embed"),
+      });
+    },
+    initializeCalendlyEventListeners() {
+      setTimeout(() => {
+        this.isLoading = false;
+      }, 1000);
+      window.addEventListener("message", this.handleCalendlyEvent);
+    },
+    handleCalendlyEvent(e) {
+      if (
+        e.data.event &&
+        e.data.event.indexOf("calendly") === 0 &&
+        e.data.event === "calendly.event_scheduled"
+      ) {
+        setTimeout(() => {
+          this.$emit("close");
+        }, 2000);
+      }
+    },
+  },
 };
 </script>
+
+<style scroped>
+@media (min-width: 650px) and (max-width: 1000px) {
+  #calendly-embed-before {
+    height: 4.5rem;
+  }
+
+  #calendly-embed {
+    height: calc(100vh - 4.5rem);
+  }
+}
+</style>
diff --git a/nuxt-frontend/components/contact/NewContactForm.vue b/nuxt-frontend/components/contact/NewContactForm.vue
@@ -219,8 +219,8 @@
 <script>
 import axios from "axios";
 import config from "@/config.js";
-import CalendlyIframe from "./CalendlyIframe.vue";
 import loaderImage from "@/assets/images/theme/small-loader.svg";
+
 export default {
   data() {
     return {
@@ -244,16 +244,12 @@ export default {
       showProjectInfoValidationError: false,
       showReferenceValidationError: false,
       showInvestValidationError: false,
-      openCalendlyIframeModal: false,
       errorMessage: "Something went wrong on our side",
       showLoader: false,
       showErrorMessage: false,
       contactType: 1,
     };
   },
-  components: {
-    CalendlyIframe,
-  },
   inject: ["mixpanel"],
   mounted() {
     document.addEventListener("click", this.closePopUps);
@@ -307,13 +303,13 @@ export default {
               axios
                 .post(config.API_BASE + "/api/send-contact-mail", formData)
                 .then(() => {
-                  this.$router.push({
-                    path: "/thank-you",
-                  });
                   localStorage.setItem(
                     "client-name",
                     JSON.stringify(formData.name),
                   );
+                  this.$router.push({
+                    path: "/thank-you",
+                  });
                   this.resetForm();
                 })
                 .catch((err) => {

diff --git a/nuxt-frontend/components/contact/thank-you/BenefitSection.vue b/nuxt-frontend/components/contact/thank-you/BenefitSection.vue
@@ -3,8 +3,11 @@
     <p
       class="container text-center mobile-header-2 lg:desk-header-2 text-black-87 2xl:max-w-[67%] xll:max-w-[45%] 3xl:max-w-[28%] 2xl:mx-auto"
     >
-      Here are some of the things you will get by working with us that make us
-      special according to our past customers.
+      Why Canopas?
+    </p>
+    <p class="container text-center mt-2 lg:mt-6 text-black-4 lg:text-2xl">
+      Discover what makes us unique through the experiences of our satisfied
+      customers.
     </p>
     <div class="absolute w-full h-full lg:hidden">
       <img

diff --git a/nuxt-frontend/components/contact/thank-you/InformationPoints.vue b/nuxt-frontend/components/contact/thank-you/InformationPoints.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="container my-32 lg:my-44 flex flex-col gap-14">
+    <p
+      class="text-center mobile-header-3-semibold lg:desk-header-3 text-black-80"
+    >
+      We just want you to make an informed decision and we hope this information
+      might help you get a clear understanding of the exceptional customer
+      experiences we offer at
+      <span class="text-primary-1">Canopas.</span>
+    </p>
+    <div class="flex flex-col gap-7 lg:px-5">
+      <div class="flex gap-2 sm:gap-4 lg:gap-6">
+        <img
+          src="/images/clients/thank-you/finger-hand.svg"
+          alt="finger-hand-bullet"
+          class="h-fit"
+        />
+        <p
+          class="text-black-4 border-b-2 border-dashed border-black-4 sm:text-lg lg:text-2xl pb-3"
+        >
+          If you have any questions or concerns, don't hesitate to reach out to
+          me directly. I'm here to help and support you throughout the process.
+        </p>
+      </div>
+      <div class="flex gap-2 sm:gap-4 lg:gap-6">
+        <img
+          src="/images/clients/thank-you/finger-hand.svg"
+          alt="finger-hand-bullet"
+          class="h-fit"
+        />
+        <p
+          class="text-black-4 border-b-2 border-dashed border-black-4 sm:text-lg lg:text-2xl pb-3"
+        >
+          Thank you again for considering our company for your needs. We look
+          forward to the opportunity to work with you and build a long and
+          successful partnership.
+        </p>
+      </div>
+    </div>
+    <div class="flex items-end flex-col">
+      <p class="text-left sub-h1-semibold lg:desk-header-3">Thanks,</p>
+      <p
+        class="mt-0 sub-h1-regular lg:mobile-header-2-regular text-black-60 font-semibold"
+      >
+        Jimmy
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/nuxt-frontend/components/contact/thank-you/LandingSection.vue b/nuxt-frontend/components/contact/thank-you/LandingSection.vue
@@ -1,5 +1,5 @@
 <template>
-  <section>
+  <section class="flex flex-col gap-40">
     <div class="container flex flex-col mt-4 lg:mt-12">
       <p
         class="text-center sub-h4-regular lg:mobile-header-3-regular text-black-60"
@@ -28,20 +28,22 @@
         appreciate the fact that you chose my company.
       </p>
     </div>
-    <div
-      class="mt-16 lg:mt-48 flex flex-col bg-gradient-to-r from-orange-80 to-pink-80 py-12 xl:py-16 lg:container"
-    >
-      <div class="container py-12 xl:py-16">
-        <p class="text-center mobile-header-2 lg:desk-header-2 text-primary-1">
-          At Canopas, Our Vision is
+    <!-- <div class="bg-primary-1 py-5">
+        <p class="container text-center text-white text-xl font-semibold tracking-wider">
+          Thank you for booking a meeting with Canopas. Here's the details of your
+          meeting with Canopas.
+          <br />
+          Time - 9:00am - 9:30am, Wednesday, June 26, 2024 (India Standard Time)
         </p>
-        <p
-          class="mt-3 text-center sub-h3-medium lg:desk-header-3 text-black-87 xl:w-[84%] 2xl:w-[74%] xl:mx-auto"
-        >
-          "To put humanity and the world into a better position compared to what
-          it was prior to our existence in the world."
-        </p>
-      </div>
+    </div> -->
+    <div class="container">
+      <p class="text-center mobile-header-2 lg:desk-header-2">Our Vision</p>
+      <p
+        class="mt-3 text-center sub-h3-medium lg:desk-header-3 text-black-87 w-[68%] mx-auto"
+      >
+        "To put humanity and the world into a better position compared to what
+        it was prior to our existence in the world."
+      </p>
     </div>
   </section>
 </template>

diff --git a/nuxt-frontend/components/contact/thank-you/ScheduleMeeting.vue b/nuxt-frontend/components/contact/thank-you/ScheduleMeeting.vue
@@ -106,14 +106,14 @@
     <div v-if="openCalendlyIframeModal">
       <transition name="modal">
         <div
-          class="modal-mask fixed top-0 left-0 w-full h-full table mask z-[1] bg-[#00000080] z-[5]"
+          class="modal-mask fixed top-0 left-0 w-full h-full table mask bg-[#00000080] z-[5]"
         >
           <div
             class="flex mx-auto left-auto sm:mx-auto h-full login-modal modal-xl"
             role="document"
           >
             <div
-              class="relative flex flex-col w-full border-1 border-gray border-solid rounded-md rounded-3xl bg-white bg-clip-padding outline-0"
+              class="relative flex flex-col w-full border-1 border-gray border-solid rounded-md bg-white bg-clip-padding outline-0"
             >
               <div class="relative flex-auto">
                 <CalendlyIframe class="w-full h-screen overflow-hidden" />

diff --git a/nuxt-frontend/components/error404/index.vue b/nuxt-frontend/components/error404/index.vue
@@ -1,33 +1,29 @@
 <template>
-  <div>
-    <Header />
-    <div
-      class="container flex items-center justify-center flex-col my-0 mx-auto py-[150px] px-[5%] min-h-[50vh] xll:min-h-[79vh]"
-    >
-      <div class="flex flex-row my-0 mx-auto text-center">
-        <img :src="firstErrorLetter" alt="404" />
-        <img :src="middleErrorLetter" class="m-4 w-[6.5rem]" alt="404" />
-        <img :src="lastErrorLetter" alt="404" />
-      </div>
-      <h1 class="mt-8 text-center text-[1.4rem] leading-8">
-        The page you’re looking for was moved, renamed or might never existed.
-      </h1>
-      <router-link
-        class="my-16 gradient-border-btn flex flex-row items-center"
-        to="/"
-      >
-        <Icon
-          class="arrow w-6 h-6 fa text-[#f2709c] text-[2.1rem] mr-[5px]"
-          name="fa6-solid:arrow-left"
-          id="leftArrow"
-        />
-        <span class="text-center font-bold text-[1.1rem]"
-          >Back to Home page</span
-        >
-      </router-link>
+  <Header />
+  <div
+    class="container flex items-center justify-center flex-col my-0 mx-auto py-[150px] px-[5%] min-h-[50vh] xll:min-h-[79vh]"
+  >
+    <div class="flex flex-row my-0 mx-auto text-center">
+      <img :src="firstErrorLetter" alt="404" />
+      <img :src="middleErrorLetter" class="m-4 w-[6.5rem]" alt="404" />
+      <img :src="lastErrorLetter" alt="404" />
     </div>
-    <NewFooter />
+    <h1 class="mt-8 text-center text-[1.4rem] leading-8">
+      The page you’re looking for was moved, renamed or might never existed.
+    </h1>
+    <router-link
+      class="my-16 gradient-border-btn flex flex-row items-center"
+      to="/"
+    >
+      <Icon
+        class="arrow w-6 h-6 fa text-[#f2709c] text-[2.1rem] mr-[5px]"
+        name="fa6-solid:arrow-left"
+        id="leftArrow"
+      />
+      <span class="text-center font-bold text-[1.1rem]">Back to Home page</span>
+    </router-link>
   </div>
+  <NewFooter />
 </template>
 
 <script>

diff --git a/nuxt-frontend/config.js b/nuxt-frontend/config.js
@@ -58,7 +58,7 @@ export default Object.freeze({
   DESIGNRUSH_URL:
     "https://www.designrush.com/agency/website-design-development/in",
   BLOG_URL: "https://blog.canopas.com",
-  CALENDLY_IFRAME_URL: "https://calendly.com/jimmy822/30min",
+  CALENDLY_IFRAME_URL: "https://calendly.com/dharti-r-canopas/30min",
   CLUTCH_URL: "https://clutch.co/profile/canopas-software#reviews",
   SMILEPLUS_URL: "https://www.udini.ai/products/smile",
   WEBSITE_OPEN_SOURCE_URL: "https://github.com/canopas/canopas-website",

diff --git a/nuxt-frontend/pages/author/[slug].vue b/nuxt-frontend/pages/author/[slug].vue
@@ -4,7 +4,7 @@
     <section class="container min-h-[50vh]">
       <div
         v-if="status == config.NOT_FOUND"
-        class="h-1/2 flex text-[1.4rem] text-black-900 items-center justify-center"
+        class="h-[50vh] flex text-[1.4rem] text-black-900 items-center justify-center"
       >
         {{ config.POST_NOT_FOUND_MESSAGE }}
       </div>

diff --git a/nuxt-frontend/pages/tag/[slug].vue b/nuxt-frontend/pages/tag/[slug].vue
@@ -3,7 +3,7 @@
     <Header />
     <div
       v-if="slug == '' || status == config.NOT_FOUND"
-      class="h-1/2 flex text-[1.4rem] text-black-900 items-center justify-center"
+      class="h-[50vh] flex text-[1.4rem] text-black-900 items-center justify-center"
     >
       {{ config.POST_NOT_FOUND_MESSAGE }}
     </div>
@@ -51,14 +51,18 @@ const resources = computed(() => store.items);
 const status = computed(() => store.status);
 let postLimit = 2;
 
-await useAsyncData("tags", () => store.loadTagBlogs(slug.value));
+await useAsyncData("tags", () =>
+  store.loadTagBlogs(config.SHOW_DRAFT_POSTS, slug.value),
+);
 
 if (status.value === config.SUCCESS) {
   posts.value = resources.value?.slice(0, postLimit);
 }
 
-const tagName = posts.value[0].tags.filter((tag) => tag.slug === slug.value)[0]
-  .name;
+const tagName =
+  posts.value.length > 0
+    ? posts.value[0].tags.filter((tag) => tag.slug === slug.value)[0].name
+    : "";
 
 const handleScroll = () => {
   if (