feat(social-media): implement social media component and integrate into store footer

src/app/core/layout/store-layout/store-footer/store-footer.component.html

@@ -44,11 +44,14 @@
       <div class="col-12 col-md-6 col-xl-3 d-grid gap-3 align-content-start">
         <h2 class="store-layout__footer-heading">Seguinos:</h2>
         <div class="d-flex align-items-center gap-3">
-          @for (social of socialLinks; track social.label) {
-            <span class="fs-5 text-white">
-              <i [class]="social.iconClass" aria-hidden="true"></i>
-              <span class="visually-hidden">{{ social.label }}</span>
-            </span>
+          @for (social of socialMedia; track social.code) {
+            <app-social-media
+              class="text-white"
+              [code]="social.code"
+              [icon]="social.icon"
+              [name]="social.name"
+              [url]="social.url"
+            />
           }
         </div>
       </div>

src/app/core/layout/store-layout/store-footer/store-footer.component.ts

@@ -1,24 +1,21 @@
 import { Component, Input } from '@angular/core';
+import { SocialMedia } from '../../../services/tenant.interface';
+import { SocialMediaComponent } from '../../../../shared/components/social-media/social-media.component';
 
 export type StoreFooterSection = {
   heading: string;
   links: string[];
 };
 
-export type StoreSocialLink = {
-  label: string;
-  iconClass: string;
-};
-
 @Component({
   selector: 'app-store-footer',
-  imports: [],
+  imports: [SocialMediaComponent],
   templateUrl: './store-footer.component.html',
-  styleUrl: './store-footer.component.scss'
+  styleUrl: './store-footer.component.scss',
 })
 export class StoreFooterComponent {
   @Input({ required: true }) currentYear = new Date().getFullYear();
   @Input({ required: true }) footerSections: StoreFooterSection[] = [];
-  @Input({ required: true }) socialLinks: StoreSocialLink[] = [];
+  @Input({ required: true }) socialMedia: SocialMedia[] = [];
   @Input() logoUrl: string | null = null;
 }

src/app/core/layout/store-layout/store-layout.component.html

@@ -38,7 +38,7 @@
   <app-store-footer
     [currentYear]="currentYear"
     [footerSections]="footerSections"
-    [socialLinks]="socialLinks"
+    [socialMedia]="tenant()?.social_media ?? []"
     [logoUrl]="tenant()?.footer_logo ?? null"
   />
 </div>

src/app/core/layout/store-layout/store-layout.component.spec.ts

@@ -25,7 +25,33 @@ const tenant: Tenant = {
   header_bg_color: '#313131',
   footer_bg_color: '#313131',
   header_logo: 'https://example.com/header.png',
-  footer_logo: 'https://example.com/footer.png'
+  footer_logo: 'https://example.com/footer.png',
+  social_media: [
+    {
+      code: 'instagram',
+      icon: 'instagram',
+      name: 'Instagram',
+      url: 'https://instagram.com/test',
+    },
+    {
+      code: 'whatsapp',
+      icon: 'whatsapp',
+      name: 'WhatsApp',
+      url: 'https://wa.me/5493410000000',
+    },
+    {
+      code: 'facebook',
+      icon: 'facebook',
+      name: 'Facebook',
+      url: 'https://facebook.com/test',
+    },
+    {
+      code: 'linkedin',
+      icon: 'fa-brands fa-linkedin-in',
+      name: 'LinkedIn',
+      url: 'https://linkedin.com/company/test',
+    },
+  ],
 };
 
 describe('StoreLayoutComponent', () => {

src/app/core/layout/store-layout/store-layout.component.ts

@@ -2,11 +2,7 @@ import { Component, computed, inject, OnInit, signal } from '@angular/core';
 import { Router, RouterOutlet } from '@angular/router';
 import { TenantService } from '../../services/tenant.service';
 import { CartService } from '../../services/cart/cart.service';
-import {
-  StoreFooterComponent,
-  StoreFooterSection,
-  StoreSocialLink,
-} from './store-footer/store-footer.component';
+import { StoreFooterComponent, StoreFooterSection } from './store-footer/store-footer.component';
 import { StoreHeaderComponent } from './store-header/store-header.component';
 import { CartComponent, CartItemMock } from '../../../shared/components/cart/cart.component';
 import { ButtonComponent } from '../../../shared/components/button/button.component';
@@ -122,22 +118,4 @@ export class StoreLayoutComponent implements OnInit {
     },
   ];
 
-  protected readonly socialLinks: StoreSocialLink[] = [
-    {
-      label: 'Instagram',
-      iconClass: 'fa-brands fa-instagram',
-    },
-    {
-      label: 'WhatsApp',
-      iconClass: 'fa-brands fa-whatsapp',
-    },
-    {
-      label: 'Facebook',
-      iconClass: 'fa-brands fa-facebook',
-    },
-    {
-      label: 'LinkedIn',
-      iconClass: 'fa-brands fa-linkedin-in',
-    },
-  ];
 }

src/app/core/services/tenant.interface.ts

@@ -29,6 +29,13 @@ export interface Menu {
   route: string;
 }
 
+export interface SocialMedia {
+  code: string;
+  icon: string;
+  name: string;
+  url: string;
+}
+
 export interface Tenant {
   id: number;
   codigo: string;
@@ -47,6 +54,7 @@ export interface Tenant {
   hero_config?: HeroConfig | null;
   event_config?: EventConfig | null;
   main_carousel_images?: string[];
+  social_media?: SocialMedia[];
   menues?: Menu[];
 }