Add product category service and its filter

src/app/core/components/navigation/navigation.component.html

@@ -1,18 +1,23 @@
 <div class="navigation-container">
-  <vcl-navigation layout="horizontal" class="row justify-content-center" style="text-align: center;">
+  <vcl-navigation
+    *ngIf="categories$ | async"
+    layout="horizontal"
+    class="row justify-content-center"
+    style="text-align: center"
+  >
     <vcl-navigation-item>
       <vcl-navigation-label class="navigation-item">
-        {{ 'Navigation.NewIn' | translate }}
+        {{ "Navigation.NewIn" | translate }}
       </vcl-navigation-label>
     </vcl-navigation-item>
     <vcl-navigation-item>
       <vcl-navigation-label class="navigation-item">
-        {{ 'Navigation.Clothing' | translate }}
+        {{ "Navigation.Clothing" | translate }}
       </vcl-navigation-label>
     </vcl-navigation-item>
     <vcl-navigation-item (click)="this.navigate('/shoes')">
       <vcl-navigation-label class="navigation-item">
-        {{ 'Navigation.Shoes' | translate }}
+        {{ "Navigation.Shoes" | translate }}
       </vcl-navigation-label>
     </vcl-navigation-item>
     <!--<vcl-navigation-item>

src/app/core/components/navigation/navigation.component.ts

@@ -1,15 +1,21 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
+import { ProductCategoryService } from 'src/app/features/products/services/product-category.service';
 
 @Component({
   selector: 'app-navigation',
   templateUrl: './navigation.component.html',
   styleUrls: ['./navigation.component.scss'],
 })
 export class NavigationComponent {
-  constructor(private router: Router) {}
+  categories$ = this.productCategoryService.category$;
 
-  public navigate(value: string): void {
+  constructor(
+    private router: Router,
+    private productCategoryService: ProductCategoryService
+  ) {}
+
+  navigate(value: string): void {
     this.router.navigateByUrl(value);
   }
 }

src/app/features/products/components/products/products.component.ts

@@ -3,7 +3,7 @@ import { Router } from '@angular/router';
 import { IoRestorecommerceProductProduct } from 'src/app/generated/graphql';
 
 @Component({
-  selector: 'products',
+  selector: 'app-products',
   templateUrl: './products.component.html',
   styleUrls: ['./products.component.scss']
 })

src/app/features/products/components/shoes-products/shoes-products.component.html

@@ -1 +1,5 @@
-<products [pageTitle]="pageTitle" [currency]="currency" [products]=" products$ | async"></products>
+<app-products
+  [pageTitle]="pageTitle"
+  [currency]="currency"
+  [products]="products$ | async"
+></app-products>

src/app/features/products/products.module.ts

@@ -10,8 +10,8 @@ import { ProductCardComponent } from './components/product-card/product-card.com
 import { ProductColorPickerComponent } from './components/product-color-picker/product-color-picker.component';
 import { ProductInterestComponent } from './components/product-interest/product-interest.component';
 import { ProductDescriptionComponent } from './components/product-description/product-description.component';
-import { ProductInfoComponent } from './components/product-main/product-info/product-info.component';
-import { ProductGalleryComponent } from './components/product-main/product-gallery/product-gallery.component';
+import { ProductInfoComponent } from './components/product-info/product-info.component';
+import { ProductGalleryComponent } from './components/product-gallery/product-gallery.component';
 import { ProductNavigationComponent } from './components/product-navigation/product-navigation.component';
 import { ProductMainComponent } from './components/product-main/product-main.component';
 import { ProductRecommendComponent } from './components/product-recommend/product-recommend.component';

src/app/features/products/services/product-category.service.ts

@@ -0,0 +1,45 @@
+import { Injectable } from '@angular/core';
+import { catchError, of, tap } from 'rxjs';
+import {
+  IoRestorecommerceResourcebaseFilterOperation,
+  IoRestorecommerceResourcebaseFilterOpOperator,
+  ProductCategoryQueryGQL,
+} from 'src/app/generated/graphql';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ProductCategoryService {
+  constructor(private categoryGQL: ProductCategoryQueryGQL) {}
+
+  category$ = this.categoryGQL
+    .fetch({
+      input: {
+        filters: [
+          {
+            // TODO Refactor this code as In-house boilerplate code.
+            filters: [
+              {
+                field: 'meta.owners[*].attributes[0].value',
+                operation: IoRestorecommerceResourcebaseFilterOperation.In,
+                value: 'r-ug',
+              },
+              {
+                field: 'parent.parent_id',
+                value: '',
+                operation: IoRestorecommerceResourcebaseFilterOperation.Eq,
+              },
+            ],
+            operator: IoRestorecommerceResourcebaseFilterOpOperator.And,
+          },
+        ],
+      },
+    })
+    .pipe(
+      tap((data) => console.log('category data', data)),
+      catchError((err) => {
+        console.log('Error:', err);
+        return of(null);
+      })
+    );
+}

src/app/features/products/services/product.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, EventEmitter } from '@angular/core';
+import { Injectable } from '@angular/core';
 
 import { map, catchError, of, tap } from 'rxjs';
 import {
@@ -7,12 +7,11 @@ import {
   ProductsQueryGQL,
 } from '../../../generated/graphql';
 
+
 @Injectable({
   providedIn: 'root',
 })
 export class ProductService {
-  productColorChanged = new EventEmitter<string>();
-
   constructor(private productGQL: ProductsQueryGQL) {}
 
   products$ = this.productGQL