Remove guard, utils, helpers folders

.gitignore

@@ -1,5 +1,5 @@
 .DS_Store
 node_modules
-/dist
+/public/dist
 # ignore coverage
 coverage/

README.md

@@ -13,11 +13,8 @@ Below is the structure of the project directory along with brief descriptions of
 .
 ├── App.vue                   # The main Vue component
 ├── README.md                 # Project documentation
-├── assets                    # Static assets such as images and fonts
 ├── babel.config.js           # Babel configuration
-├── components                # Vue components
 ├── fdk.ext.config.json       # Configuration file for FDK extension
-├── helper                    # Helper functions and utilities
 ├── index.html                # Main HTML file
 ├── jest.config.js            # Jest configuration for unit tests
 ├── main.js                   # Entry point for the Vue application
@@ -27,11 +24,7 @@ Below is the structure of the project directory along with brief descriptions of
 │   ├── Home.vue              # Home page component
 │   └── NotFound.vue          # 404 Not Found page component
 ├── public                    # Public assets
-├── router                    # Vue Router configuration
-│   ├── guard.js              # Route guards
-│   └── index.js              # Router setup and routes definition
-├── services                  # Services for API calls and business logic
-│   └── product.service.js    # Service for product-related API calls
+├── router.js                 # Vue Router configuration
 ├── test                      # Test files and configurations
 └── vite.config.js            # Vite configuration file contains the configuration for Vite, including server setup and proxy settings.
 ```

jest.config.js

@@ -14,7 +14,13 @@ module.exports = {
     moduleFileExtensions: ["js", "vue", "json"],
     collectCoverage: true,
     collectCoverageFrom: [
-      "./**/*.{js,vue}"
+      "./**/*.{js,vue}",
+      "!**/coverage/**",
+      "!**/public/**",
+      '!**/jest.config.js',
+      '!**/babel.config.js',
+      '!**/vite.config.js',
+      '!**/main.js',
     ],
   };
 

pages/Home.vue

@@ -18,7 +18,9 @@
       </div>
     </div> 
 
-    <loader v-if="pageLoading"></loader>
+    <div class="loader" v-if="pageLoading">
+      <img src="../public/assets/gifs/loader.gif" />
+    </div>
     <div v-else>
       <div
         v-for="(product, index) in productList"
@@ -29,9 +31,9 @@
           <img
             class="mr-r-12"
             v-if="product.is_active"
-            src="../assets/green-dot.svg"
+            src="../public/assets/green-dot.svg"
           />
-          <img class="mr-r-12" v-else src="../assets/grey-dot.svg" />
+          <img class="mr-r-12" v-else src="../public/assets/grey-dot.svg" />
           <div class="card-avatar mr-r-12">
             <img
               :src="productProfileImage(product.media)"
@@ -75,22 +77,19 @@
 </template>
 
 <script>
-/* File imports */
-import Loader from "../components/loader.vue";
-
 /* Service imports */
-import ProductService from "../services/product.service.js";
 const DOC_URL_PATH =
   "/help/docs/sdk/latest/platform/company/catalog/#getProducts";
 const DOC_APP_URL_PATH =
   "/help/docs/sdk/latest/platform/application/catalog#getAppProducts";
-import DEFAULT_NO_IMAGE from "../assets/default_icon_listing.png";
+import DEFAULT_NO_IMAGE from "../public/assets/default_icon_listing.png";
+import axios from "axios";
+import urlJoin from "url-join";
+
+const EXAMPLE_MAIN_URL = window.location.origin;
 
 export default {
   name: "fp-extension-homepage",
-  components: {
-    Loader,
-  },
   data() {
     return {
       productList: [],
@@ -111,6 +110,9 @@ export default {
     isApplicationLaunch() {
       return this.$route?.params.application_id ? true : false;
     },
+    getCompanyId(){
+      return this.$route?.params.company_id;
+    },
   },
   methods: {
     productProfileImage(media) {
@@ -125,7 +127,11 @@ export default {
     },
     fetchProducts() {
       this.pageLoading = true;
-      ProductService.getAllProducts()
+      axios.get(urlJoin(EXAMPLE_MAIN_URL, '/api/products'),{
+        headers: {
+          "x-company-id": this.getCompanyId,
+        }
+      })
         .then(({ data }) => {
           this.productList = data.items;
           this.pageLoading = false;
@@ -139,8 +145,10 @@ export default {
     },
     fetchApplicationProducts() {
       this.pageLoading = true;
-      ProductService.getAllApplicationProducts({
-        application_id: this.$route.params.application_id,
+      axios.get(urlJoin(EXAMPLE_MAIN_URL, `/api/products/application/${this.$route.params.application_id}`),{
+        headers: {
+          "x-company-id": this.getCompanyId,
+        }
       })
         .then(({ data }) => {
           this.productList = data.items;
@@ -154,7 +162,7 @@ export default {
         });
     },
     getErrorImage() {
-      return "/src/assets/default_icon_listing.png";
+      return "/src/public/assets/default_icon_listing.png";
     },
   },
 };
@@ -175,6 +183,17 @@ body {
   height: 100%;
 }
 
+.loader {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    height: 100px;
+  }
+}
+
 .products-container {
   font-family: Inter;
   position: relative;

router/index.js → router.js

@@ -1,19 +1,16 @@
 import { createRouter, createWebHistory } from "vue-router"
-import { routeGuard } from "./guard"
-import Home from "../pages/Home.vue"
-import NotFound from '../pages/NotFound.vue'
+import Home from "./pages/Home.vue"
+import NotFound from './pages/NotFound.vue'
 
 const routes = [
   {
     path: '/company/:company_id/',
     name: 'Home',
-    beforeEnter: routeGuard,
     component: Home
   },
   {
     path: '/company/:company_id/application/:application_id',
     name: 'AppHome',
-    beforeEnter: routeGuard,
     component: Home
   },
   {

test/helper/router/router.spec.js → test/router.spec.js

@@ -1,7 +1,6 @@
-import Home from '../../../pages/Home.vue';
-import NotFound from '../../../pages/NotFound.vue';
-import { routeGuard } from '../../../router/guard';
-import router from '../../../router';
+import Home from '../pages/Home.vue';
+import NotFound from '../pages/NotFound.vue';
+import router from '../router.js';
 
 describe('Router Configuration', () => {
   it('Should have the correct routes', () => {
@@ -12,14 +11,12 @@ describe('Router Configuration', () => {
     expect(homeRoute).toBeTruthy();
     expect(homeRoute.path).toBe('/company/:company_id/');
     expect(homeRoute.component).toBe(Home);
-    expect(homeRoute.beforeEnter).toBe(routeGuard);
 
     // Check the AppHome route
     const appHomeRoute = routes.find(route => route.name === 'AppHome');
     expect(appHomeRoute).toBeTruthy();
     expect(appHomeRoute.path).toBe('/company/:company_id/application/:application_id');
     expect(appHomeRoute.component).toBe(Home);
-    expect(appHomeRoute.beforeEnter).toBe(routeGuard);
 
     // Check the NotFound route
     const notFoundRoute = routes.find(route => route.name === 'NotFound');

vite.config.js

@@ -33,6 +33,9 @@ if (host === 'localhost') {
 export default defineConfig({
   root: dirname(fileURLToPath(import.meta.url)),
   plugins: [vue()],
+  build: {
+    outDir: 'public/dist'
+  },
   server: {
     host: 'localhost',
     port: process.env.FRONTEND_PORT,