From 54eae22d7630ec1216f4c87793a12efb082ac9b8 Mon Sep 17 00:00:00 2001
From: cp-jagruti-a <jagruti.a@canopas.com>
Date: Fri, 24 Nov 2023 10:24:01 +0530
Subject: [PATCH] Fix runtime error

---
 .../components/partials/NewFooter.vue         | 230 +++++++++++-------
 1 file changed, 144 insertions(+), 86 deletions(-)

diff --git a/nuxt-frontend/components/partials/NewFooter.vue b/nuxt-frontend/components/partials/NewFooter.vue
index 55c8929d5..93df2acb2 100644
--- a/nuxt-frontend/components/partials/NewFooter.vue
+++ b/nuxt-frontend/components/partials/NewFooter.vue
@@ -1,99 +1,157 @@
 <template>
-  <div class="relative px-0 font-inter-medium z-[1]">
-    <img
-      :src="bg"
-      class="absolute top-[15px] sm:top-0 left-0 w-full h-full xl2:h-[unset] -z-[1] object-cover xl2:object-fill"
-      alt="canopas-contact-footer"
-    />
-    <div class="container text-center">
-      <div class="mt-11 mb-8 md:mb-[60px]">
-        <div
-          class="mt-5 text-[1.375rem] leading-[1.6875rem] md:text-[1.5rem] md:leading-[1.8125rem] lg:text-[1.625rem] lg:leading-[1.9375rem] text-white/[.87] font-bold"
-        >
-          Follow us on
+  <div class="container my-[14.063rem] mx-auto">
+    <div class="text-center">
+      <p class="header-text canopas-gradient-text">
+        <span class="underline-text">Find t</span>he career of your dreams
+      </p>
+      <div class="my-[30px] mx-[2%] md:my-[50px] md:mx-20 normal-text">
+        <div class="font-bold">
+          When was the last time you did something for the first time?
+        </div>
+        <div class="mt-12">
+          At Canopas, we frequently do new things that help you leave your
+          comfort zone. And when you leave your comfort zone, you will know what
+          you are capable of and you will never be the same again. If you
+          believe your work should have meaning and want to make an impact in
+          the world with your work, come join us.
         </div>
-        <ul
-          class="flex flex-wrap justify-center w-full m-auto mt-2 xl:mt-6 cursor-pointer list-none"
+      </div>
+    </div>
+
+    <div v-if="careers == null" class="flex justify-center">
+      <img :src="loader" alt="loader-image" />
+    </div>
+    <div
+      v-else
+      class="rounded-[14px] border border-solid border-[#e2e2e2] overflow-hidden my-0 mx-[2%] mt-12 md:mx-[6%] normal-text"
+    >
+      <div
+        v-if="careers.length == 0"
+        class="text-center py-3.5 px-0 normal-text"
+      >
+        No matching jobs found
+      </div>
+      <div v-else class="flex flex-col">
+        <div
+          v-for="(career, index) in careers"
+          :key="career"
+          class="flex flex-col"
         >
-          <li
-            v-for="icon in socialMediaIcons"
-            :key="icon"
-            class="flex justify-center !items-center w-10 h-10 md:w-[62px] md:h-[62px] !rounded-[50%] text-center cursor-pointer"
-            :class="icon.image ? 'm-[5px]' : 'gradient-border-btn border-0'"
+          <div
+            class="flex flex-row w-full items-center p-[30px] cursor-pointer md:py-8 md:px-12 lg:py-10 lg:px-12 normal-text"
+            @click="expandListItem(career.id, index)"
           >
-            <nuxt-link
-              :to="icon.url"
-              target="_blank"
-              aria-label="footerLink"
-              @click.native="$mixpanel.track(icon.event)"
-            >
+            <div class="career-icon w-[50px] sm:w-[60px]">
               <Icon
-                class="fab footer-icon w-5 h-5 md:w-8 md:h-8 box-content"
-                :name="icon.icon"
+                class="text-pink-300 icon text-[1.575rem] sm:text-[1.875rem]"
+                :name="career.icon_name"
               />
-            </nuxt-link>
-          </li>
-        </ul>
-      </div>
-      <div
-        class="mb-8 md:mb-9 text-[0.75rem] leading-[0.9375rem] md:text-[0.84375rem] md:leading-[1.03125rem] lg:text-[0.9375rem] lg:leading-[1.125rem] text-white/[.87]"
-      >
-        <Icon name="fa6-regular:copyright" class="box-content" />
-        {{ new Date().getFullYear() }} Canopas Software LLP. All rights
-        reserved.
+            </div>
+            <div class="not-italic font-bold text-black-900">
+              {{ career.title }}
+            </div>
+            <Icon
+              class="career-plus-icon ml-auto order-2 text-[#3d3d3dcc]"
+              :name="
+                openList && career.id == currentIndex
+                  ? 'fa6-solid:minus'
+                  : 'fa6-solid:plus'
+              "
+            />
+          </div>
+          <collapse-transition>
+            <div
+              ref="careerDetails"
+              class="overflow-hidden ease-out duration-300"
+              :key="career.summary"
+              :style="[
+                openList && career.id == currentIndex
+                  ? {
+                      maxHeight: `1000px`,
+                    }
+                  : {
+                      maxHeight: `0`,
+                    },
+              ]"
+            >
+              <div
+                class="p-[30px] text-[#3d3d3dcc] md:py-8 md:px-12 lg:py-10 lg:px-12 lg:leading-8"
+              >
+                {{ career.summary }}
+              </div>
+
+              <div
+                class="flex flex-row justify-center pt-0 pr-0 pb-[30px] pl-0 sm:justify-end sm:pt-0 sm:pr-5 sm:pb-[30px] sm:pl-5"
+              >
+                <nuxt-link
+                  @click.native="$mixpanel.track('tap_read_more_job')"
+                  class="flex items-center gradient-border-btn p-3"
+                  :to="'/jobs/' + career.unique_id"
+                  :aria-label="'Get more details about ' + career.title"
+                >
+                  <Icon
+                    class="fa text-pink-300 mr-[5px]"
+                    name="fa6-solid:align-left"
+                    flip="vertical"
+                  />
+                  <span
+                    class="text-[.9rem] leading-[1.364rem] font-bold tracking-[0.06rem] md:text-[1rem] lg:text-[1.125rem]"
+                    >Read More</span
+                  >
+                </nuxt-link>
+
+                <nuxt-link
+                  @click.native="$mixpanel.track('tap_apply_job')"
+                  class="flex items-center m-[5px] gradient-btn p-3"
+                  :to="'/jobs/apply/' + career.unique_id"
+                >
+                  <Icon
+                    class="fa"
+                    name="fa6-solid:circle-check"
+                    aria-hidden="true"
+                  />
+                  <span
+                    class="text-[.9rem] leading-[1.364rem] font-bold tracking-[0.06rem] md:text-[1rem] lg:text-[1.125rem]"
+                    >Apply Now</span
+                  >
+                </nuxt-link>
+              </div>
+            </div>
+          </collapse-transition>
+          <div class="bg-[#e2e2e2] h-px" v-if="index <= careers.length"></div>
+        </div>
       </div>
     </div>
-    <svg width="0" height="0">
-      <linearGradient id="lgrad" x1="100%" y1="100%" x2="0%" y2="0%">
-        <stop offset="-24.42%" style="stop-color: #ff835b; stop-opacity: 1" />
-        <stop offset="101.76%" style="stop-color: #f2709c; stop-opacity: 1" />
-      </linearGradient>
-    </svg>
   </div>
 </template>
 
-<script type="module">
-import bg from "@/assets/images/footer/new-bg.svg";
-import Config from "@/config.js";
+<script setup>
+import CollapseTransition from "@ivanv/vue-collapse-transition/src/CollapseTransition.vue";
+import loader from "@/assets/images/theme/loader.svg";
+import { useJobListStore } from "@/stores/jobs";
+
+const { $mixpanel } = useNuxtApp();
+
+const currentIndex = ref(0);
+const previousIndex = ref(0);
+const openList = ref(true);
+
+const store = useJobListStore();
+const careers = computed(() => store.items);
+const jobsError = computed(() => store.error);
+
+await useAsyncData("jobs", () => store.loadJobs());
+
+function expandListItem(id, index) {
+  if (previousIndex.value == id && openList.value) {
+    openList.value = false;
+    $mixpanel.track("tap_job_collapse_comp");
+  } else {
+    openList.value = true;
+    $mixpanel.track("tap_job_expand_comp");
+  }
 
-export default {
-  data() {
-    return {
-      bg,
-      socialMediaIcons: [
-        {
-          url: Config.FACEBOOK_URL,
-          icon: "fa6-brands:facebook-f",
-          event: "tap_footer_facebook",
-        },
-        {
-          url: Config.INSTAGRAM_URL,
-          icon: "fa6-brands:instagram",
-          event: "tap_footer_instagram",
-        },
-        {
-          url: Config.TWITTER_URL,
-          icon: "fa6-brands:x-twitter",
-          event: "tap_footer_twitter",
-        },
-        {
-          url: Config.BLOG_URL,
-          icon: "fa6-brands:medium",
-          event: "tap_footer_medium",
-        },
-        {
-          url: Config.LINKEDIN_URL,
-          icon: "fa6-brands:linkedin-in",
-          event: "tap_footer_linkedin",
-        },
-        {
-          url: Config.YOUTUBE_URL,
-          icon: "fa6-brands:youtube",
-          event: "tap_footer_youtube",
-        },
-      ],
-    };
-  },
-  inject: ["mixpanel"],
-};
+  currentIndex.value = id;
+  previousIndex.value = currentIndex.value;
+}
 </script>