From c901ec1e49bad19d2e90692b4e17add7166ad033 Mon Sep 17 00:00:00 2001 From: sdarbinyan Date: Sun, 5 Jul 2026 04:17:31 +0400 Subject: [PATCH] refactor: finalize bootstrap-driven layout and widget runtime --- .../components/footer/footer.component.html | 14 +- src/app/components/footer/footer.component.ts | 149 +---------- .../core/config/footer-resolver.service.ts | 246 ++++++++++++++++++ .../section-engine/section-engine.service.ts | 110 +++++++- .../section-renderer.service.ts | 4 + .../widget-host/widget-host.model.ts | 4 + .../dynamic-page-layout.component.ts | 33 ++- .../models/config/bootstrap-config.model.ts | 6 + .../models/config/footer-config.model.ts | 15 ++ src/app/shared/models/config/index.ts | 3 + src/app/shared/models/config/layout.model.ts | 6 + src/app/shared/models/config/page.model.ts | 3 +- .../models/config/widget-registry.model.ts | 3 + src/app/shared/models/config/widget.model.ts | 9 + .../registry/widget-manifest.service.ts | 50 +++- .../widget-registry.bootstrap.service.ts | 23 +- .../widgets/ui/categories-widget.component.ts | 8 +- src/assets/mock/bootstrap/bootstrap.json | 100 ++++++- src/styles.scss | 92 ++++++- 19 files changed, 697 insertions(+), 181 deletions(-) create mode 100644 src/app/core/config/footer-resolver.service.ts create mode 100644 src/app/shared/models/config/footer-config.model.ts create mode 100644 src/app/shared/models/config/layout.model.ts create mode 100644 src/app/shared/models/config/widget-registry.model.ts diff --git a/src/app/components/footer/footer.component.html b/src/app/components/footer/footer.component.html index 1f15d27..dd7e89b 100644 --- a/src/app/components/footer/footer.component.html +++ b/src/app/components/footer/footer.component.html @@ -24,15 +24,21 @@

{{ 'footer.payment' | translate }}

- MIR - Visa - Mastercard + @for (icon of paymentIcons(); track icon.src) { + + }
-

© {{ currentYear }} {{ brandName }}. {{ 'footer.allRightsReserved' | translate }}

+

+ @if (copyrightText()) { + {{ copyrightText() }} + } @else { + © {{ currentYear }} {{ brandName }}. {{ 'footer.allRightsReserved' | translate }} + } +

@if (contactEmail) { {{ contactEmail }} } diff --git a/src/app/components/footer/footer.component.ts b/src/app/components/footer/footer.component.ts index 26a6f2d..9d33f68 100644 --- a/src/app/components/footer/footer.component.ts +++ b/src/app/components/footer/footer.component.ts @@ -5,22 +5,7 @@ import { TranslatePipe } from '../../i18n/translate.pipe'; import { LogoComponent } from '../logo/logo.component'; import { UiRuntimeFacade } from '../../facades/runtime/ui-runtime.facade'; import { LangRoutePipe } from '../../pipes/lang-route.pipe'; -import { ConfigService } from '../../core/config/config.service'; -import { StaticPageResolverService } from '../../core/config/static-page-resolver.service'; -import { BootstrapConfig, FooterNavigationGroupConfig, NavigationConfig, NavigationItemConfig, FooterNavigationItemConfig } from '../../shared/models/config'; -import { LanguageService } from '../../services/language.service'; - -interface FooterResolvedItem { - id: string; - label: string; - route: string; -} - -interface FooterResolvedGroup { - id: string; - title: string; - items: FooterResolvedItem[]; -} +import { FooterPaymentIcon, FooterResolvedGroup, FooterResolverService } from '../../core/config/footer-resolver.service'; @Component({ selector: 'app-footer', @@ -31,19 +16,23 @@ interface FooterResolvedGroup { }) export class FooterComponent { readonly footerGroups = signal([]); + readonly paymentIcons = signal([]); + readonly copyrightText = signal(''); constructor( private readonly uiRuntime: UiRuntimeFacade, - private readonly configService: ConfigService, - private readonly staticPageResolver: StaticPageResolverService, - private readonly languageService: LanguageService + private readonly footerResolver: FooterResolverService ) { - this.configService.loadBootstrap().pipe(take(1)).subscribe({ - next: bootstrap => { - this.footerGroups.set(this.resolveFooterGroups(bootstrap)); + this.footerResolver.resolveFooterModel().pipe(take(1)).subscribe({ + next: model => { + this.footerGroups.set(model.groups); + this.paymentIcons.set(model.paymentIcons); + this.copyrightText.set(model.copyrightText); }, error: () => { this.footerGroups.set([]); + this.paymentIcons.set([]); + this.copyrightText.set(''); } }); } @@ -57,120 +46,4 @@ export class FooterComponent { get contactEmail(): string { return this.uiRuntime.contactEmail(); } - - private resolveFooterGroups(bootstrap: BootstrapConfig): FooterResolvedGroup[] { - const footer = bootstrap.navigation?.footer ?? []; - const lang = this.languageService.currentLanguage(); - - if (this.isGroupedFooter(footer)) { - return footer - .map((group, index) => this.resolveGroupFromConfig(group, bootstrap, lang, index)) - .filter((group): group is FooterResolvedGroup => group != null && group.items.length > 0); - } - - const items = (footer as NavigationItemConfig[]) - .map(item => this.resolveLegacyItem(item, bootstrap, lang)) - .filter((item): item is FooterResolvedItem => item != null); - - if (!items.length) { - return []; - } - - return [{ - id: 'footer-group-default', - title: '', - items - }]; - } - - private resolveGroupFromConfig( - group: FooterNavigationGroupConfig, - bootstrap: BootstrapConfig, - lang: string, - index: number - ): FooterResolvedGroup | null { - const items = (group.items ?? []) - .map(item => this.resolveGroupItem(item, bootstrap, lang)) - .filter((item): item is FooterResolvedItem => item != null); - - if (!items.length) { - return null; - } - - return { - id: `footer-group-${index}`, - title: this.staticPageResolver.resolveFooterTitle(group.groupTitle, lang), - items - }; - } - - private resolveGroupItem( - item: FooterNavigationItemConfig, - bootstrap: BootstrapConfig, - lang: string - ): FooterResolvedItem | null { - if (item.visible === false) { - return null; - } - - if (item.type === 'staticPage' && item.key) { - const staticPage = this.staticPageResolver.resolveByKeyFromBootstrap(bootstrap, item.key, lang); - if (!staticPage) { - return null; - } - - return { - id: `static-${item.key}`, - label: staticPage.title, - route: staticPage.route - }; - } - - const label = typeof item.label === 'string' - ? item.label - : this.staticPageResolver.resolveFooterTitle(item.label, lang); - - if (!item.route || !label) { - return null; - } - - return { - id: `${item.type}-${label}`, - label, - route: item.route - }; - } - - private resolveLegacyItem(item: NavigationItemConfig, bootstrap: BootstrapConfig, lang: string): FooterResolvedItem | null { - if (item.visible === false) { - return null; - } - - if (item.type === 'staticPage' && item.key) { - const staticPage = this.staticPageResolver.resolveByKeyFromBootstrap(bootstrap, item.key, lang); - if (!staticPage) { - return null; - } - - return { - id: item.id, - label: staticPage.title, - route: staticPage.route - }; - } - - if (!item.route) { - return null; - } - - return { - id: item.id, - label: item.labelKey ?? item.id, - route: item.route - }; - } - - private isGroupedFooter(footer: NavigationConfig['footer']): footer is FooterNavigationGroupConfig[] { - return Array.isArray(footer) && footer.length > 0 && 'items' in footer[0]; - } } diff --git a/src/app/core/config/footer-resolver.service.ts b/src/app/core/config/footer-resolver.service.ts new file mode 100644 index 0000000..b566966 --- /dev/null +++ b/src/app/core/config/footer-resolver.service.ts @@ -0,0 +1,246 @@ +import { Injectable } from '@angular/core'; +import { map, Observable } from 'rxjs'; +import { ConfigService } from './config.service'; +import { + BootstrapConfig, + FooterConfig, + FooterNavigationGroupConfig, + FooterNavigationItemConfig, + NavigationConfig, + NavigationItemConfig +} from '../../shared/models/config'; +import { StaticPageResolverService } from './static-page-resolver.service'; +import { LanguageService } from '../../services/language.service'; + +export interface FooterResolvedItem { + id: string; + label: string; + route: string; +} + +export interface FooterResolvedGroup { + id: string; + title: string; + items: FooterResolvedItem[]; +} + +export interface FooterPaymentIcon { + src: string; + alt: string; + width: number; + height: number; +} + +export interface FooterResolvedModel { + groups: FooterResolvedGroup[]; + paymentIcons: FooterPaymentIcon[]; + copyrightText: string; +} + +@Injectable({ providedIn: 'root' }) +export class FooterResolverService { + constructor( + private readonly configService: ConfigService, + private readonly staticPageResolver: StaticPageResolverService, + private readonly languageService: LanguageService + ) {} + + resolveFooterModel(): Observable { + return this.configService.loadBootstrap().pipe( + map((bootstrap) => ({ + groups: this.resolveFooterGroups(bootstrap), + paymentIcons: this.resolvePaymentIcons(bootstrap.footer), + copyrightText: this.resolveCopyrightText(bootstrap) + })) + ); + } + + private resolveFooterGroups(bootstrap: BootstrapConfig): FooterResolvedGroup[] { + const footer = bootstrap.navigation?.footer ?? []; + const lang = this.languageService.currentLanguage(); + const legalKeys = bootstrap.footer?.legalPageKeys ?? []; + const legalItems = legalKeys + .map(key => { + const page = this.staticPageResolver.resolveByKeyFromBootstrap(bootstrap, key, lang); + if (!page) { + return null; + } + + return { + id: `legal-${key}`, + label: page.title, + route: page.route + } as FooterResolvedItem; + }) + .filter((item): item is FooterResolvedItem => item != null); + + if (this.isGroupedFooter(footer)) { + const groups = footer + .map((group, index) => this.resolveGroupFromConfig(group, bootstrap, lang, index)) + .filter((group): group is FooterResolvedGroup => group != null && group.items.length > 0); + + if (legalItems.length > 0) { + groups.push({ + id: 'footer-group-legal', + title: 'Legal', + items: legalItems + }); + } + + return groups; + } + + const items = (footer as NavigationItemConfig[]) + .map(item => this.resolveLegacyItem(item, bootstrap, lang)) + .filter((item): item is FooterResolvedItem => item != null); + + if (!items.length) { + return legalItems.length + ? [{ id: 'footer-group-legal', title: 'Legal', items: legalItems }] + : []; + } + + const groups: FooterResolvedGroup[] = [{ + id: 'footer-group-default', + title: '', + items + }]; + + if (legalItems.length > 0) { + groups.push({ + id: 'footer-group-legal', + title: 'Legal', + items: legalItems + }); + } + + return groups; + } + + private resolveGroupFromConfig( + group: FooterNavigationGroupConfig, + bootstrap: BootstrapConfig, + lang: string, + index: number + ): FooterResolvedGroup | null { + const items = (group.items ?? []) + .map(item => this.resolveGroupItem(item, bootstrap, lang)) + .filter((item): item is FooterResolvedItem => item != null); + + if (!items.length) { + return null; + } + + return { + id: `footer-group-${index}`, + title: this.staticPageResolver.resolveFooterTitle(group.groupTitle, lang), + items + }; + } + + private resolveGroupItem( + item: FooterNavigationItemConfig, + bootstrap: BootstrapConfig, + lang: string + ): FooterResolvedItem | null { + if (item.visible === false) { + return null; + } + + if (item.type === 'staticPage' && item.key) { + const staticPage = this.staticPageResolver.resolveByKeyFromBootstrap(bootstrap, item.key, lang); + if (!staticPage) { + return null; + } + + return { + id: `static-${item.key}`, + label: staticPage.title, + route: staticPage.route + }; + } + + const label = typeof item.label === 'string' + ? item.label + : this.staticPageResolver.resolveFooterTitle(item.label, lang); + + if (!item.route || !label) { + return null; + } + + return { + id: `${item.type}-${label}`, + label, + route: item.route + }; + } + + private resolveLegacyItem(item: NavigationItemConfig, bootstrap: BootstrapConfig, lang: string): FooterResolvedItem | null { + if (item.visible === false) { + return null; + } + + if (item.type === 'staticPage' && item.key) { + const staticPage = this.staticPageResolver.resolveByKeyFromBootstrap(bootstrap, item.key, lang); + if (!staticPage) { + return null; + } + + return { + id: item.id, + label: staticPage.title, + route: staticPage.route + }; + } + + if (!item.route) { + return null; + } + + return { + id: item.id, + label: item.labelKey ?? item.id, + route: item.route + }; + } + + private isGroupedFooter(footer: NavigationConfig['footer']): footer is FooterNavigationGroupConfig[] { + return Array.isArray(footer) && footer.length > 0 && 'items' in footer[0]; + } + + private resolvePaymentIcons(footerConfig: FooterConfig | undefined): FooterPaymentIcon[] { + const fallback: FooterPaymentIcon[] = [ + { src: '/assets/images/mir-logo.svg', alt: 'MIR', width: 40, height: 28 }, + { src: '/assets/images/visa-logo.svg', alt: 'Visa', width: 40, height: 28 }, + { src: '/assets/images/mastercard-logo.svg', alt: 'Mastercard', width: 40, height: 28 } + ]; + + if (!footerConfig?.paymentIcons?.length) { + return fallback; + } + + return footerConfig.paymentIcons + .filter(icon => !!icon?.src) + .map(icon => ({ + src: icon.src, + alt: icon.alt || 'Payment icon', + width: icon.width ?? 40, + height: icon.height ?? 28 + })); + } + + private resolveCopyrightText(bootstrap: BootstrapConfig): string { + const configured = bootstrap.footer?.copyrightText; + const lang = this.languageService.currentLanguage(); + + if (typeof configured === 'string' && configured.trim()) { + return configured; + } + + if (configured && typeof configured === 'object') { + return this.staticPageResolver.resolveFooterTitle(configured, lang); + } + + return ''; + } +} \ No newline at end of file diff --git a/src/app/dynamic-renderer/section-engine/section-engine.service.ts b/src/app/dynamic-renderer/section-engine/section-engine.service.ts index 5a7f5e7..889c163 100644 --- a/src/app/dynamic-renderer/section-engine/section-engine.service.ts +++ b/src/app/dynamic-renderer/section-engine/section-engine.service.ts @@ -2,13 +2,17 @@ import { Injectable } from '@angular/core'; import { PageConfig } from '../../shared/models/config'; import { PageRenderModel } from '../page-renderer/page-renderer.model'; import { SectionRendererService } from '../section-renderer/section-renderer.service'; +import { PlatformLayoutConfig, PlatformLayoutType } from '../../shared/models/config'; +import { SectionConfig } from '../../shared/models/config'; @Injectable({ providedIn: 'root' }) export class SectionEngineService { constructor(private readonly sectionRenderer: SectionRendererService) {} toPageRenderModel(page: PageConfig): PageRenderModel { - const sections = (page.sections ?? []) + const layoutType = this.resolveLayoutType(page.layout); + + const sections = this.normalizeSectionsByLayout(page.sections ?? [], layoutType) .filter((section) => section.visible !== false) .sort((a, b) => a.order - b.order) .map((section) => this.sectionRenderer.toRenderNode(section)); @@ -17,9 +21,111 @@ export class SectionEngineService { id: page.id, key: page.key, title: page.title, - layout: page.layout, + layout: layoutType, sections, source: page }; } + + private resolveLayoutType(layout: PageConfig['layout']): string { + if (typeof layout === 'string') { + return layout; + } + + return (layout as PlatformLayoutConfig)?.type ?? 'default'; + } + + private normalizeSectionsByLayout(sections: PageConfig['sections'], layoutType: string): PageConfig['sections'] { + const normalized = [...sections]; + const lowerLayout = (layoutType as PlatformLayoutType).toLowerCase(); + + if (lowerLayout === 'minimal') { + return normalized.filter(section => { + const type = section.type.toLowerCase(); + return type === 'product-collection' || type === 'products' || type === 'catalog'; + }); + } + + if (lowerLayout === 'sidebar-left') { + return this.composeSidebarLayout(normalized); + } + + if (lowerLayout === 'carousel-home') { + return normalized.sort((left, right) => this.getCarouselPriority(left.type) - this.getCarouselPriority(right.type)); + } + + if (lowerLayout === 'default') { + return normalized.sort((left, right) => this.getDefaultPriority(left.type) - this.getDefaultPriority(right.type)); + } + + return normalized; + } + + private getDefaultPriority(type: string): number { + const normalizedType = type.toLowerCase(); + if (normalizedType === 'categories') return 10; + if (normalizedType === 'product-collection' || normalizedType === 'products') return 20; + if (normalizedType === 'hero') return 30; + return 100; + } + + private getSidebarPriority(type: string): number { + const normalizedType = type.toLowerCase(); + if (normalizedType === 'categories') return 10; + if (normalizedType === 'product-collection' || normalizedType === 'products') return 20; + if (normalizedType === 'hero') return 30; + return 100; + } + + private getCarouselPriority(type: string): number { + const normalizedType = type.toLowerCase(); + if (normalizedType === 'hero' || normalizedType === 'banner') return 10; + if (normalizedType === 'product-collection' || normalizedType === 'product-carousel') return 20; + if (normalizedType === 'categories') return 30; + return 100; + } + + private composeSidebarLayout(sections: PageConfig['sections']): PageConfig['sections'] { + const categoriesSection = sections.find(section => section.type.toLowerCase() === 'categories'); + const productsSection = sections.find(section => { + const type = section.type.toLowerCase(); + return type === 'product-collection' || type === 'products' || type === 'catalog'; + }); + + if (!categoriesSection || !productsSection) { + return [...sections].sort((left, right) => this.getSidebarPriority(left.type) - this.getSidebarPriority(right.type)); + } + + const combined: SectionConfig = { + ...categoriesSection, + id: `${categoriesSection.id}-sidebar-layout`, + type: 'sidebar-left', + order: Math.min(categoriesSection.order, productsSection.order), + layout: { + strategy: 'grid', + columns: 2, + gap: '1.5rem', + align: 'start' + }, + widgets: [ + ...categoriesSection.widgets.map((widget, index) => ({ + ...widget, + order: index, + padding: widget.padding ?? '0', + visibility: widget.visibility ?? { desktop: true, tablet: true, mobile: true } + })), + ...productsSection.widgets.map((widget, index) => ({ + ...widget, + order: 100 + index, + padding: widget.padding ?? '0', + visibility: widget.visibility ?? { desktop: true, tablet: true, mobile: true } + })) + ] + }; + + return [ + combined, + ...sections.filter(section => section.id !== categoriesSection.id && section.id !== productsSection.id) + ].sort((left, right) => left.order - right.order); + } } \ No newline at end of file diff --git a/src/app/dynamic-renderer/section-renderer/section-renderer.service.ts b/src/app/dynamic-renderer/section-renderer/section-renderer.service.ts index 7f82186..ef744a6 100644 --- a/src/app/dynamic-renderer/section-renderer/section-renderer.service.ts +++ b/src/app/dynamic-renderer/section-renderer/section-renderer.service.ts @@ -8,10 +8,14 @@ export class SectionRendererService { toRenderNode(section: SectionConfig): SectionRenderNode { const widgets = (section.widgets ?? []) .filter(widget => widget.visible !== false) + .sort((a, b) => (a.order ?? 0) - (b.order ?? 0)) .map(widget => ({ id: widget.id, type: widget.type, version: widget.version, + order: widget.order, + padding: widget.padding, + visibility: widget.visibility, props: widget.props ?? {}, featureFlag: widget.featureFlag, visible: widget.visible, diff --git a/src/app/dynamic-renderer/widget-host/widget-host.model.ts b/src/app/dynamic-renderer/widget-host/widget-host.model.ts index e6709ad..be57379 100644 --- a/src/app/dynamic-renderer/widget-host/widget-host.model.ts +++ b/src/app/dynamic-renderer/widget-host/widget-host.model.ts @@ -1,11 +1,15 @@ import { Type } from '@angular/core'; import { WidgetConfig } from '../../shared/models/config'; import { SectionConfig } from '../../shared/models/config'; +import { WidgetVisibilityConfig } from '../../shared/models/config'; export interface WidgetRenderNode { id: string; type: string; version: string; + order?: number; + padding?: string; + visibility?: WidgetVisibilityConfig; props: Record; featureFlag?: string; visible?: boolean; diff --git a/src/app/layouts/containers/dynamic-page-layout.component.ts b/src/app/layouts/containers/dynamic-page-layout.component.ts index d55a4ee..2a0587e 100644 --- a/src/app/layouts/containers/dynamic-page-layout.component.ts +++ b/src/app/layouts/containers/dynamic-page-layout.component.ts @@ -34,7 +34,14 @@ import { Category } from '../../core/categories/models/category-domain.model'; [style.--section-align]="section.layout?.align ?? null" > @for (widget of section.widgets; track widget.id) { -
+
@if (resolveWidget(widget, section, model.id) | async; as resolved) { } @@ -51,12 +58,28 @@ import { Category } from '../../core/categories/models/category-domain.model'; ` .dynamic-page-layout { display: block; } + .dynamic-page-layout[data-layout='sidebar-left'] .dynamic-section[data-section-type='sidebar-left'] .dynamic-section__content { + grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); + } + + .dynamic-page-layout[data-layout='minimal'] .dynamic-section[data-section-type='hero'] { + display: none; + } + + .dynamic-page-layout[data-layout='carousel-home'] .dynamic-section[data-section-type='hero'] { + order: -1; + } + .dynamic-section__content { display: grid; gap: var(--section-gap, 1rem); align-items: var(--section-align, stretch); } + .dynamic-widget { + padding: var(--widget-padding, 0); + } + .dynamic-section[data-section-layout='grid'] .dynamic-section__content { grid-template-columns: repeat(var(--section-columns, 1), minmax(0, 1fr)); } @@ -69,11 +92,19 @@ import { Category } from '../../core/categories/models/category-domain.model'; @media (max-width: 1023px) { .dynamic-section--tablet-hidden { display: none; } + .dynamic-widget--tablet-hidden { display: none; } + + .dynamic-page-layout[data-layout='sidebar-left'] .dynamic-section[data-section-type='sidebar-left'] .dynamic-section__content { + grid-template-columns: 1fr; + } } @media (max-width: 767px) { .dynamic-section--mobile-hidden { display: none; } + .dynamic-widget--mobile-hidden { display: none; } } + + .dynamic-widget--desktop-hidden { display: none; } ` ], changeDetection: ChangeDetectionStrategy.OnPush diff --git a/src/app/shared/models/config/bootstrap-config.model.ts b/src/app/shared/models/config/bootstrap-config.model.ts index db9ccaa..4fdf644 100644 --- a/src/app/shared/models/config/bootstrap-config.model.ts +++ b/src/app/shared/models/config/bootstrap-config.model.ts @@ -2,6 +2,8 @@ import { ApiEndpointsConfig } from './api-endpoints.model'; import { BrandingConfig } from './branding.model'; import { CompanyConfig } from './company.model'; import { FeatureFlagsConfig } from './feature-flags.model'; +import { FooterConfig } from './footer-config.model'; +import { PlatformLayoutConfig } from './layout.model'; import { LocalizationConfig } from './localization.model'; import { NavigationConfig } from './navigation.model'; import { PageConfig } from './page.model'; @@ -10,6 +12,7 @@ import { SeoConfig } from './seo.model'; import { StaticPagesConfig } from './static-page.model'; import { TenantConfig } from './tenant.model'; import { ThemeConfig } from './theme.model'; +import { WidgetRegistryConfig } from './widget-registry.model'; export interface BootstrapConfig { schemaVersion: string; @@ -23,7 +26,10 @@ export interface BootstrapConfig { localization: LocalizationConfig; seo: SeoConfig; permissions: PermissionsConfig; + layout?: PlatformLayoutConfig; navigation: NavigationConfig; + footer?: FooterConfig; pages: PageConfig[]; staticPages?: StaticPagesConfig; + widgetRegistry?: WidgetRegistryConfig; } diff --git a/src/app/shared/models/config/footer-config.model.ts b/src/app/shared/models/config/footer-config.model.ts new file mode 100644 index 0000000..0406ed7 --- /dev/null +++ b/src/app/shared/models/config/footer-config.model.ts @@ -0,0 +1,15 @@ +import { LocalizedTextContent } from './static-page.model'; + +export interface FooterPaymentIconConfig { + src: string; + alt: string; + width?: number; + height?: number; +} + +export interface FooterConfig { + logoUrl?: string; + paymentIcons?: FooterPaymentIconConfig[]; + copyrightText?: string | LocalizedTextContent; + legalPageKeys?: string[]; +} \ No newline at end of file diff --git a/src/app/shared/models/config/index.ts b/src/app/shared/models/config/index.ts index bf3a0db..4c0c22f 100644 --- a/src/app/shared/models/config/index.ts +++ b/src/app/shared/models/config/index.ts @@ -3,6 +3,8 @@ export * from './bootstrap-config.model'; export * from './branding.model'; export * from './company.model'; export * from './feature-flags.model'; +export * from './footer-config.model'; +export * from './layout.model'; export * from './localization.model'; export * from './navigation.model'; export * from './page.model'; @@ -13,3 +15,4 @@ export * from './static-page.model'; export * from './tenant.model'; export * from './theme.model'; export * from './widget.model'; +export * from './widget-registry.model'; diff --git a/src/app/shared/models/config/layout.model.ts b/src/app/shared/models/config/layout.model.ts new file mode 100644 index 0000000..cf515d8 --- /dev/null +++ b/src/app/shared/models/config/layout.model.ts @@ -0,0 +1,6 @@ +export type PlatformLayoutType = 'default' | 'sidebar-left' | 'carousel-home' | 'minimal' | string; + +export interface PlatformLayoutConfig { + type: PlatformLayoutType; + options?: Record; +} \ No newline at end of file diff --git a/src/app/shared/models/config/page.model.ts b/src/app/shared/models/config/page.model.ts index fd8061c..1e5b56b 100644 --- a/src/app/shared/models/config/page.model.ts +++ b/src/app/shared/models/config/page.model.ts @@ -1,4 +1,5 @@ import { SectionConfig } from './section.model'; +import { PlatformLayoutConfig } from './layout.model'; export interface PageRouteConfig { path: string; @@ -10,7 +11,7 @@ export interface PageConfig { key: string; title: string; route: PageRouteConfig; - layout: string; + layout: string | PlatformLayoutConfig; sections: SectionConfig[]; seoKey?: string; featureFlag?: string; diff --git a/src/app/shared/models/config/widget-registry.model.ts b/src/app/shared/models/config/widget-registry.model.ts new file mode 100644 index 0000000..130777d --- /dev/null +++ b/src/app/shared/models/config/widget-registry.model.ts @@ -0,0 +1,3 @@ +export interface WidgetRegistryConfig { + manifestUrl: string; +} \ No newline at end of file diff --git a/src/app/shared/models/config/widget.model.ts b/src/app/shared/models/config/widget.model.ts index 48b0c02..e54ebbb 100644 --- a/src/app/shared/models/config/widget.model.ts +++ b/src/app/shared/models/config/widget.model.ts @@ -4,10 +4,19 @@ export interface WidgetActionConfig { payload?: Record; } +export interface WidgetVisibilityConfig { + desktop?: boolean; + tablet?: boolean; + mobile?: boolean; +} + export interface WidgetConfig { id: string; type: string; version: string; + order?: number; + padding?: string; + visibility?: WidgetVisibilityConfig; props: Record; actions?: Record; featureFlag?: string; diff --git a/src/app/widgets/registry/widget-manifest.service.ts b/src/app/widgets/registry/widget-manifest.service.ts index 129f627..e040bd0 100644 --- a/src/app/widgets/registry/widget-manifest.service.ts +++ b/src/app/widgets/registry/widget-manifest.service.ts @@ -1,27 +1,36 @@ import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; -import { Observable, catchError, map, of, shareReplay } from 'rxjs'; +import { Observable, catchError, map, of, shareReplay, switchMap, take } from 'rxjs'; import { WidgetManifestEntry, WidgetManifestFile } from '../contracts/widget-manifest.contract'; +import { ConfigService } from '../../core/config/config.service'; @Injectable({ providedIn: 'root' }) export class WidgetManifestService { - private readonly manifestUrl = '/assets/mock/bootstrap/widget-manifest.json'; - private manifest$?: Observable; + private readonly fallbackManifestUrl = '/assets/mock/bootstrap/widget-manifest.json'; + private readonly manifestByUrl = new Map>(); - constructor(private readonly http: HttpClient) {} + constructor( + private readonly http: HttpClient, + private readonly configService: ConfigService + ) {} getManifest(): Observable { - if (!this.manifest$) { - this.manifest$ = this.http.get(this.manifestUrl).pipe( - shareReplay({ bufferSize: 1, refCount: true }), - catchError(() => { - this.manifest$ = undefined; - return of({ widgets: [] }); - }) - ); - } + return this.resolveManifestUrl().pipe( + switchMap((manifestUrl) => { + const cached = this.manifestByUrl.get(manifestUrl); + if (cached) { + return cached; + } - return this.manifest$; + const manifest$ = this.http.get(manifestUrl).pipe( + shareReplay({ bufferSize: 1, refCount: true }), + catchError(() => of({ widgets: [] })) + ); + + this.manifestByUrl.set(manifestUrl, manifest$); + return manifest$; + }) + ); } getWidgets(): Observable { @@ -31,4 +40,17 @@ export class WidgetManifestService { getWidget(type: string): Observable { return this.getWidgets().pipe(map((widgets) => widgets.find((widget) => widget.type === type))); } + + private resolveManifestUrl(): Observable { + const snapshotUrl = this.configService.getBootstrapSnapshot()?.widgetRegistry?.manifestUrl; + if (snapshotUrl) { + return of(snapshotUrl); + } + + return this.configService.loadBootstrap().pipe( + take(1), + map((bootstrap) => bootstrap.widgetRegistry?.manifestUrl || this.fallbackManifestUrl), + catchError(() => of(this.fallbackManifestUrl)) + ); + } } \ No newline at end of file diff --git a/src/app/widgets/registry/widget-registry.bootstrap.service.ts b/src/app/widgets/registry/widget-registry.bootstrap.service.ts index b7335d5..d0da558 100644 --- a/src/app/widgets/registry/widget-registry.bootstrap.service.ts +++ b/src/app/widgets/registry/widget-registry.bootstrap.service.ts @@ -1,21 +1,10 @@ import { Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; import { Observable, map, of } from 'rxjs'; import { catchError } from 'rxjs/operators'; import { CategoriesWidgetComponent, FooterNavigationWidgetComponent, HeroWidgetComponent, ProductCarouselWidgetComponent } from '../ui'; import { RegisteredWidget } from '../contracts/widget-component.contract'; import { WidgetRegistryService } from './widget-registry.service'; - -interface WidgetManifestItem { - type: string; - version: string; - componentKey: string; - enabled?: boolean; -} - -interface WidgetManifest { - widgets: WidgetManifestItem[]; -} +import { WidgetManifestService } from './widget-manifest.service'; const APPROVED_WIDGET_COMPONENTS: Record = { 'hero': HeroWidgetComponent, @@ -28,17 +17,15 @@ const APPROVED_WIDGET_COMPONENTS: Record @Injectable({ providedIn: 'root' }) export class WidgetRegistryBootstrapService { - private readonly manifestUrl = '/assets/mock/bootstrap/widget-manifest.json'; - constructor( private readonly registry: WidgetRegistryService, - private readonly http: HttpClient + private readonly widgetManifest: WidgetManifestService ) {} registerFromManifest(): Observable { - return this.http.get(this.manifestUrl).pipe( - map((manifest) => { - const widgets = (manifest.widgets ?? []) + return this.widgetManifest.getWidgets().pipe( + map((manifestWidgets) => { + const widgets = manifestWidgets .filter((item) => item.enabled !== false) .map((item): RegisteredWidget | null => { const component = APPROVED_WIDGET_COMPONENTS[item.componentKey]; diff --git a/src/app/widgets/ui/categories-widget.component.ts b/src/app/widgets/ui/categories-widget.component.ts index 4da4979..344e5f6 100644 --- a/src/app/widgets/ui/categories-widget.component.ts +++ b/src/app/widgets/ui/categories-widget.component.ts @@ -1,9 +1,11 @@ import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; +import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, inject } from '@angular/core'; +import { Router } from '@angular/router'; import { SectionConfig } from '../../shared/models/config'; import { CatalogCategoryGridComponent } from '../../features/website/catalog/components/category-grid/category-grid.component'; import { CategoriesWidgetData } from '../contracts/widget-data.contract'; import { Category } from '../../core/categories/models/category-domain.model'; +import { LanguageService } from '../../services/language.service'; @Component({ selector: 'app-categories-widget', @@ -36,11 +38,15 @@ import { Category } from '../../core/categories/models/category-domain.model'; changeDetection: ChangeDetectionStrategy.OnPush }) export class CategoriesWidgetComponent { + private readonly router = inject(Router); + private readonly languageService = inject(LanguageService); + @Input() section: SectionConfig | null = null; @Input() data: CategoriesWidgetData | null = null; @Output() categorySelected = new EventEmitter(); onCategorySelected(category: Category): void { this.categorySelected.emit(category); + this.router.navigate([`/${this.languageService.currentLanguage()}/catalog`, category.id]); } } \ No newline at end of file diff --git a/src/assets/mock/bootstrap/bootstrap.json b/src/assets/mock/bootstrap/bootstrap.json index db0758d..d1ca77a 100644 --- a/src/assets/mock/bootstrap/bootstrap.json +++ b/src/assets/mock/bootstrap/bootstrap.json @@ -170,6 +170,9 @@ } ] }, + "layout": { + "type": "default" + }, "navigation": { "header": [ { @@ -215,6 +218,78 @@ } ] }, + "footer": { + "paymentIcons": [ + { + "src": "/assets/images/mir-logo.svg", + "alt": "MIR", + "width": 40, + "height": 28 + }, + { + "src": "/assets/images/visa-logo.svg", + "alt": "Visa", + "width": 40, + "height": 28 + }, + { + "src": "/assets/images/mastercard-logo.svg", + "alt": "Mastercard", + "width": 40, + "height": 28 + } + ], + "copyrightText": { + "ru": "© 2026 Marketplace. Все права защищены.", + "en": "© 2026 Marketplace. All rights reserved.", + "hy": "© 2026 Marketplace. Բոլոր իրավունքները պաշտպանված են:" + }, + "legalPageKeys": ["about-us", "privacy-policy", "terms-of-service"] + }, + "widgetRegistry": { + "manifestUrl": "/assets/mock/bootstrap/widget-manifest.json" + }, + "staticPages": { + "about-us": { + "route": "/about-us", + "title": { + "ru": "О компании", + "en": "About Us", + "hy": "Մեր մասին" + }, + "content": { + "ru": "

О компании

Marketplace — мультиарендная B2B commerce-платформа.

", + "en": "

About Us

Marketplace is a multi-tenant B2B commerce platform.

", + "hy": "

Մեր մասին

Marketplace-ը բազմավարձակալ B2B առևտրային հարթակ է։

" + } + }, + "privacy-policy": { + "route": "/privacy-policy", + "title": { + "ru": "Политика конфиденциальности", + "en": "Privacy Policy", + "hy": "Գաղտնիության քաղաքականություն" + }, + "content": { + "ru": "

Политика конфиденциальности

Мы обрабатываем только необходимые данные.

", + "en": "

Privacy Policy

We process only the data required for service operations.

", + "hy": "

Գաղտնիության քաղաքականություն

Մենք մշակում ենք միայն ծառայության համար անհրաժեշտ տվյալները։

" + } + }, + "terms-of-service": { + "route": "/terms-of-service", + "title": { + "ru": "Условия использования", + "en": "Terms of Service", + "hy": "Օգտագործման պայմաններ" + }, + "content": { + "ru": "

Условия использования

Использование платформы регулируется публичной офертой.

", + "en": "

Terms of Service

Platform usage is governed by public offer terms.

", + "hy": "

Օգտագործման պայմաններ

Հարթակի օգտագործումը կարգավորվում է հրապարակային առաջարկի պայմաններով։

" + } + } + }, "pages": [ { "id": "page-home", @@ -224,7 +299,9 @@ "path": "/", "exact": true }, - "layout": "default-public", + "layout": { + "type": "default" + }, "seoKey": "home", "visible": true, "sections": [ @@ -249,6 +326,13 @@ "id": "widget-hero-main", "type": "hero", "version": "1.0.0", + "order": 1, + "padding": "0.5rem 0", + "visibility": { + "desktop": true, + "tablet": true, + "mobile": true + }, "visible": true, "props": { "title": "Welcome to Marketplace Platform", @@ -279,6 +363,13 @@ "id": "widget-categories-root", "type": "categories", "version": "1.0.0", + "order": 1, + "padding": "0.25rem 0", + "visibility": { + "desktop": true, + "tablet": true, + "mobile": true + }, "visible": true, "props": { "title": "Categories", @@ -309,6 +400,13 @@ "id": "widget-featured-products", "type": "product-collection", "version": "1.0.0", + "order": 1, + "padding": "0", + "visibility": { + "desktop": true, + "tablet": true, + "mobile": true + }, "visible": true, "props": { "title": "Featured Products", diff --git a/src/styles.scss b/src/styles.scss index 5982fa4..5ffb604 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -147,7 +147,9 @@ a, button, input, textarea, select { } .section { - margin: 24px 0; + margin: 0; + padding-block: clamp(16px, 2.5vw, 32px); + animation: section-fade-in 320ms ease-out both; } .grid { @@ -155,6 +157,94 @@ a, button, input, textarea, select { gap: 16px; } +.card { + background: var(--bg-primary); + border: 1px solid var(--border-color); + border-radius: var(--radius-md); + box-shadow: var(--shadow-sm); + transition: transform 180ms ease, box-shadow 180ms ease; +} + +.card:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-md); +} + +.product-card, +.item-card, +.catalog-product-card { + transition: transform 180ms ease, box-shadow 180ms ease; +} + +.product-card:hover, +.item-card:hover, +.catalog-product-card:hover { + transform: translateY(-2px) scale(1.01); +} + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + border: 1px solid transparent; + border-radius: var(--radius-md); + padding: 0.625rem 1rem; + font-weight: 600; + line-height: 1.2; + cursor: pointer; + text-decoration: none; + transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease; +} + +.btn:hover { + transform: translateY(-1px); +} + +.btn-primary { + background: var(--primary-color); + color: #fff; + border-color: var(--primary-color); +} + +.btn-primary:hover { + background: var(--primary-hover); + border-color: var(--primary-hover); +} + +.btn-secondary { + background: var(--secondary-color); + color: #fff; + border-color: var(--secondary-color); +} + +.btn-secondary:hover { + background: var(--secondary-hover); + border-color: var(--secondary-hover); +} + +.btn-ghost { + background: transparent; + color: var(--text-primary); + border-color: var(--border-color); +} + +.btn-ghost:hover { + background: rgba(73, 118, 113, 0.08); + border-color: var(--primary-color); +} + +@keyframes section-fade-in { + from { + opacity: 0; + transform: translateY(6px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }