feat: add footer loading

src/components/FooterComponent.vue

@@ -10,6 +10,7 @@
 
       <div
         class="mt-[46px] mx-auto grid grid-cols-1 min-[900px]:grid-cols-3 justify-between gap-x-[41px] gap-y-[20px] w-max"
+        v-if="!$store.getters.isFooterEmpty"
       >
         <article class="pt-[19px] px-5 pb-8 bg-gray-200 rounded-lg">
           <p class="flex justify-center"><MailSvg></MailSvg></p>
@@ -17,7 +18,7 @@
           <p
             class="text-center text-blue-text mt-[11px] text-lg leading-[1.625rem]"
           >
-            <a href="mailto:ackecosystem@gmail.com"> ackecosystem@gmail.com </a>
+            <a :href="`mailto:${$store.state.footer.contact_mail}`"> {{ $store.state.footer.contact_mail }}</a>
           </p>
         </article>
 
@@ -27,7 +28,7 @@
           <p
             class="text-center text-blue-text mt-[9px] text-lg leading-[1.625rem]"
           >
-            <a href="tel:+1884654458"> +1 884 65 44 58 </a>
+            <a :href="`tel:${$store.state.footer.contact_phone}`"> {{ $store.state.footer.contact_phone }} </a>
           </p>
         </article>
 
@@ -35,13 +36,13 @@
           <p class="flex justify-center"><MessageLikeSvg></MessageLikeSvg></p>
           <BreakLineSvg class="w-[225px] mt-3 text-blue-300"></BreakLineSvg>
           <div class="mt-[14px] flex gap-8 justify-center items-center">
-            <a href="https://www.instagram.com" target="_blank">
+            <a :href="$store.state.footer.instagram_url" target="_blank">
               <InstagramSvg></InstagramSvg>
             </a>
-            <a href="https://www.facebook.com" target="_blank">
+            <a :href="$store.state.footer.facebook_url" target="_blank">
               <FacebookSvg></FacebookSvg>
             </a>
-            <a href="https://www.linkedin.com" target="_blank">
+            <a :href="$store.state.footer.linked_in_url" target="_blank">
               <LinkedInSvg></LinkedInSvg>
             </a>
           </div>
@@ -76,6 +77,9 @@ import FacebookSvg from "./svg/FacebookSvg.vue";
 import LinkedInSvg from "./svg/LinkedInSvg.vue";
 export default {
   name: "FooterComponent",
+  mounted(){
+    this.$store.dispatch('getFooter')
+  },
   components: {
     FeatureSvg,
     MailSvg,

src/plugins/store.js

@@ -10,6 +10,7 @@ export default new Vuex.Store({
     homePage: null,
     reviews: [],
     team: [],
+    footer: null,
   },
   mutations: {
     setServices(state, services) {
@@ -35,6 +36,9 @@ export default new Vuex.Store({
     setTeam(state, payload) {
       state.team = payload;
     },
+    setFooter(state, payload) {
+        state.footer = payload;
+      },
   },
   actions: {
     async getServices(state) {
@@ -101,6 +105,22 @@ export default new Vuex.Store({
           });
       });
     },
+    async getFooter(state) {
+        return new Promise((resolve) => {
+          if (!state.getters.isFooterEmpty) {
+            resolve();
+            return;
+          }
+          axios
+            .get(`/V1/footer`)
+            .then((response) => {
+              state.commit("setFooter", response.data.data.attributes);
+            })
+            .finally(() => {
+              resolve();
+            });
+        });
+      },
   },
   getters: {
     isServicesEmpty(state) {
@@ -115,5 +135,8 @@ export default new Vuex.Store({
     isTeamEmpty(state) {
       return state.team.length <= 0;
     },
+    isFooterEmpty(state) {
+        return state.footer ? false : true;
+      },
   },
 });