fix(project-editor): validate footer payment/social links, add footer logo picker

- header-section: raw checkboxes -> app-toggle, wrap in SectionCard - footer-section: replace unvalidated pipe-delimited textareas for payment icons/social links with KeyValueEditor + MediaPickerComponent, add missing footer logo picker, validate social link URLs (http/https), wrap in SectionCard - i18n: add footer logo / key-value-editor labels and URL validation message Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-16 02:06:26 +04:00
parent ccbf8c6e5c
commit 475e5ad528
8 changed files with 199 additions and 27 deletions
--- a/src/app/features/project-editor/sections/footer-section.component.html
+++ b/src/app/features/project-editor/sections/footer-section.component.html
@@ -1,15 +1,65 @@
@if (bootstrap(); as bootstrap) {
-<section class="editor-section-card">
-  <h2>{{ 'builder.footer' | translate }}</h2>
+<app-section-card [title]="'builder.footer' | translate">
  <div class="editor-grid two">
    <app-form-field [label]="'builder.companyName' | translate" [hint]="'builder.companyNameDesc' | translate"><app-input [ngModel]="bootstrap.company.companyName" (ngModelChange)="updateCompanyName($event)" /></app-form-field>
    <app-form-field [label]="'builder.address' | translate" [hint]="'builder.addressDesc' | translate"><app-input [ngModel]="bootstrap.company.address.street || ''" (ngModelChange)="updateAddress($event)" /></app-form-field>
    <app-form-field [label]="'builder.phone' | translate" [hint]="'builder.phoneDesc' | translate"><app-input [ngModel]="bootstrap.company.contacts.phone || ''" (ngModelChange)="updatePhone($event)" /></app-form-field>
    <app-form-field [label]="'builder.email' | translate" [hint]="'builder.emailDesc' | translate"><app-input [ngModel]="bootstrap.company.contacts.email" (ngModelChange)="updateEmail($event)" /></app-form-field>
    <app-form-field class="full" [label]="'builder.copyright' | translate" [hint]="'builder.copyrightDesc' | translate"><app-input [ngModel]="copyrightValue()" (ngModelChange)="updateCopyright($event)" /></app-form-field>
-    <label class="full"><span>{{ 'builder.paymentIcons' | translate }}</span><small class="field-desc">{{ 'builder.paymentIconsDesc' | translate }}</small><textarea rows="4" [ngModel]="paymentIconsValue()" (ngModelChange)="updatePaymentIcons($event)"></textarea></label>
-    <label class="full"><span>{{ 'builder.socialLinks' | translate }}</span><small class="field-desc">{{ 'builder.socialLinksDesc' | translate }}</small><textarea rows="4" [ngModel]="socialLinksValue()" (ngModelChange)="updateSocialLinks($event)"></textarea></label>
+    <app-form-field class="full" [label]="'builder.footerLogo' | translate" [hint]="'builder.footerLogoDesc' | translate">
+      <div class="media-field-row">
+        <app-input [ngModel]="bootstrap.footer?.logoUrl || ''" (ngModelChange)="updateLogo($event)" />
+        <app-button variant="secondary" size="sm" (click)="openLogoPicker()">{{ 'adminCategories.chooseImage' | translate }}</app-button>
+      </div>
+    </app-form-field>
+
+    <div class="full">
+      <label><span>{{ 'builder.paymentIcons' | translate }}</span><small class="field-desc">{{ 'builder.paymentIconsDesc' | translate }}</small></label>
+      <app-key-value-editor
+        [rows]="paymentIconRows()"
+        [addLabel]="'builder.addPaymentIcon' | translate"
+        [removeLabel]="'builder.removePaymentIcon' | translate"
+        [createRow]="createPaymentIconRow"
+        (rowsChange)="onPaymentIconsChange($event)"
+      >
+        <ng-template let-row let-index="index">
+          <div class="media-field-row">
+            <app-input [ngModel]="row.src" (ngModelChange)="updatePaymentIconSrc(index, $event)" [placeholder]="'builder.iconLabel' | translate" />
+            <app-button variant="secondary" size="sm" (click)="openPaymentIconPicker(index)">{{ 'adminCategories.chooseImage' | translate }}</app-button>
+            <app-input [ngModel]="row.alt" (ngModelChange)="updatePaymentIconAlt(index, $event)" [placeholder]="'builder.iconAltLabel' | translate" />
+          </div>
+        </ng-template>
+      </app-key-value-editor>
+    </div>
+
+    <div class="full">
+      <label><span>{{ 'builder.socialLinks' | translate }}</span><small class="field-desc">{{ 'builder.socialLinksDesc' | translate }}</small></label>
+      <app-key-value-editor
+        [rows]="socialLinkRows()"
+        [addLabel]="'builder.addSocialLink' | translate"
+        [removeLabel]="'builder.removeSocialLink' | translate"
+        [createRow]="createSocialLinkRow"
+        (rowsChange)="onSocialLinksChange($event)"
+      >
+        <ng-template let-row let-index="index">
+          <div class="editor-grid two compact">
+            <app-form-field [label]="'builder.socialLinkLabel' | translate">
+              <app-input [ngModel]="row.label" (ngModelChange)="updateSocialLinkLabel(index, $event)" />
+            </app-form-field>
+            <app-form-field
+              [label]="'builder.socialLinkUrl' | translate"
+              [hint]="isValidUrl(row.url) ? ('builder.socialLinkUrlDesc' | translate) : null"
+              [error]="isValidUrl(row.url) ? null : ('builder.invalidUrl' | translate)"
+            >
+              <app-input type="url" [ngModel]="row.url" (ngModelChange)="updateSocialLinkUrl(index, $event)" />
+            </app-form-field>
+          </div>
+        </ng-template>
+      </app-key-value-editor>
+    </div>
+
    <app-form-field class="full" [label]="'builder.staticPages' | translate" [hint]="'builder.staticPagesFieldDesc' | translate"><app-input [ngModel]="staticPagesValue()" (ngModelChange)="updateStaticPages($event)" /></app-form-field>
  </div>
-</section>
+  <app-media-picker [open]="mediaPickerOpen" (selected)="onImagePicked($event)" (closed)="mediaPickerOpen = false" />
+</app-section-card>
 }
--- a/src/app/features/project-editor/sections/footer-section.component.ts
+++ b/src/app/features/project-editor/sections/footer-section.component.ts
@@ -4,11 +4,31 @@ import { ProjectEditorFacade } from '../facade/project-editor.facade';
 import { TranslatePipe } from '../../../i18n/translate.pipe';
 import { InputComponent } from '../../../shared/ui/input/input.component';
 import { FormFieldComponent } from '../../../shared/ui/form-field/form-field.component';
+import { ButtonComponent } from '../../../shared/ui/button/button.component';
+import { SectionCardComponent } from '../../../shared/ui/section-card/section-card.component';
+import { KeyValueEditorComponent } from '../../../shared/ui/key-value-editor/key-value-editor.component';
+import { MediaPickerComponent } from '../../../shared/media/media-picker/media-picker.component';
+import { MediaAsset } from '../../../core/media/models/media-asset.model';
+import { FooterPaymentIconConfig, FooterSocialLinkConfig } from '../../../shared/models/config';
+
+/** Mirrors the HTTP_URL check in project-validator.service.ts (kept as a local duplicate: shared/ui must not import from features). */
+const HTTP_URL = /^https?:\/\/\S+$/;
+
+type FooterMediaTarget = 'logo' | { type: 'paymentIcon'; index: number };

@Component({
  selector: 'app-project-editor-footer-section',
  standalone: true,
-  imports: [FormsModule, TranslatePipe, InputComponent, FormFieldComponent],
+  imports: [
+    FormsModule,
+    TranslatePipe,
+    InputComponent,
+    FormFieldComponent,
+    ButtonComponent,
+    SectionCardComponent,
+    KeyValueEditorComponent,
+    MediaPickerComponent
+  ],
  templateUrl: './footer-section.component.html',
  styleUrls: ['./section.shared.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
@@ -16,35 +36,88 @@ import { FormFieldComponent } from '../../../shared/ui/form-field/form-field.com
 export class ProjectEditorFooterSectionComponent {
  private readonly facade = inject(ProjectEditorFacade);
  readonly bootstrap = this.facade.bootstrap;
-  readonly paymentIconsValue = computed(() => (this.bootstrap()?.footer?.paymentIcons ?? []).map(icon => `${icon.src}|${icon.alt}`).join('\n'));
-  readonly socialLinksValue = computed(() => (this.bootstrap()?.footer?.socialLinks ?? []).map(link => `${link.id}|${link.label}|${link.url}`).join('\n'));
+
  readonly staticPagesValue = computed(() => (this.bootstrap()?.footer?.staticPageKeys ?? this.bootstrap()?.footer?.legalPageKeys ?? []).join(', '));
  readonly copyrightValue = computed(() => {
    const value = this.bootstrap()?.footer?.copyrightText;
    return typeof value === 'string' ? value : '';
  });
+  readonly paymentIconRows = computed<FooterPaymentIconConfig[]>(() => this.bootstrap()?.footer?.paymentIcons ?? []);
+  readonly socialLinkRows = computed<FooterSocialLinkConfig[]>(() => this.bootstrap()?.footer?.socialLinks ?? []);
+
+  protected mediaPickerOpen = false;
+  private mediaPickerTarget: FooterMediaTarget | null = null;
+
+  readonly createPaymentIconRow = (): FooterPaymentIconConfig => ({ src: '', alt: '' });
+
+  readonly createSocialLinkRow = (): FooterSocialLinkConfig => {
+    const index = (this.bootstrap()?.footer?.socialLinks?.length ?? 0) + 1;
+    return { id: `social-${index}`, label: '', url: '' };
+  };

  updateCompanyName(value: string): void { this.facade.updateBootstrap(current => ({ ...current, company: { ...current.company, companyName: value } })); }
  updateAddress(value: string): void { this.facade.updateBootstrap(current => ({ ...current, company: { ...current.company, address: { ...current.company.address, street: value } } })); }
  updatePhone(value: string): void { this.facade.updateBootstrap(current => ({ ...current, company: { ...current.company, contacts: { ...current.company.contacts, phone: value } }, branding: { ...current.branding, supportPhone: value } })); }
  updateEmail(value: string): void { this.facade.updateBootstrap(current => ({ ...current, company: { ...current.company, contacts: { ...current.company.contacts, email: value } }, branding: { ...current.branding, supportEmail: value } })); }
  updateCopyright(value: string): void { this.facade.updateBootstrap(current => ({ ...current, footer: { ...current.footer, copyrightText: value } })); }
-  updatePaymentIcons(value: string): void {
-    const paymentIcons = value.split('\n').map(line => line.trim()).filter(Boolean).map((line, index) => {
-      const [src, alt] = line.split('|');
-      return { src: src?.trim() ?? '', alt: alt?.trim() ?? `icon-${index + 1}` };
-    });
-    this.facade.updateBootstrap(current => ({ ...current, footer: { ...current.footer, paymentIcons } }));
-  }
-  updateSocialLinks(value: string): void {
-    const socialLinks = value.split('\n').map(line => line.trim()).filter(Boolean).map((line, index) => {
-      const [id, label, url] = line.split('|');
-      return { id: id?.trim() || `social-${index + 1}`, label: label?.trim() || '', url: url?.trim() || '' };
-    });
-    this.facade.updateBootstrap(current => ({ ...current, footer: { ...current.footer, socialLinks } }));
-  }
  updateStaticPages(value: string): void {
    const staticPageKeys = value.split(',').map(item => item.trim()).filter(Boolean);
    this.facade.updateBootstrap(current => ({ ...current, footer: { ...current.footer, staticPageKeys, legalPageKeys: staticPageKeys } }));
  }
+
+  updateLogo(value: string): void {
+    this.facade.updateBootstrap(current => ({ ...current, footer: { ...current.footer, logoUrl: value } }));
+  }
+
+  openLogoPicker(): void {
+    this.mediaPickerTarget = 'logo';
+    this.mediaPickerOpen = true;
+  }
+
+  openPaymentIconPicker(index: number): void {
+    this.mediaPickerTarget = { type: 'paymentIcon', index };
+    this.mediaPickerOpen = true;
+  }
+
+  onImagePicked(asset: MediaAsset): void {
+    const target = this.mediaPickerTarget;
+    if (target === 'logo') {
+      this.updateLogo(asset.url);
+    } else if (target?.type === 'paymentIcon') {
+      this.updatePaymentIconSrc(target.index, asset.url);
+    }
+    this.mediaPickerOpen = false;
+  }
+
+  onPaymentIconsChange(rows: FooterPaymentIconConfig[]): void {
+    this.facade.updateBootstrap(current => ({ ...current, footer: { ...current.footer, paymentIcons: rows } }));
+  }
+
+  updatePaymentIconSrc(index: number, src: string): void {
+    const rows = this.paymentIconRows().map((row, i) => (i === index ? { ...row, src } : row));
+    this.onPaymentIconsChange(rows);
+  }
+
+  updatePaymentIconAlt(index: number, alt: string): void {
+    const rows = this.paymentIconRows().map((row, i) => (i === index ? { ...row, alt } : row));
+    this.onPaymentIconsChange(rows);
+  }
+
+  onSocialLinksChange(rows: FooterSocialLinkConfig[]): void {
+    this.facade.updateBootstrap(current => ({ ...current, footer: { ...current.footer, socialLinks: rows } }));
+  }
+
+  updateSocialLinkLabel(index: number, label: string): void {
+    const rows = this.socialLinkRows().map((row, i) => (i === index ? { ...row, label } : row));
+    this.onSocialLinksChange(rows);
+  }
+
+  updateSocialLinkUrl(index: number, url: string): void {
+    const rows = this.socialLinkRows().map((row, i) => (i === index ? { ...row, url } : row));
+    this.onSocialLinksChange(rows);
+  }
+
+  isValidUrl(url: string): boolean {
+    return !url || HTTP_URL.test(url);
+  }
 }
--- a/src/app/features/project-editor/sections/header-section.component.html
+++ b/src/app/features/project-editor/sections/header-section.component.html
@@ -1,14 +1,13 @@
@if (bootstrap(); as bootstrap) {
-<section class="editor-section-card">
-  <h2>{{ 'builder.header' | translate }}</h2>
+<app-section-card [title]="'builder.header' | translate">
  <div class="editor-grid three toggles">
    @for (item of items; track item.key) {
      <label class="toggle-row">
-        <input type="checkbox" [checked]="isChecked(item.key)" (change)="toggle(item.key, $any($event.target).checked)" />
+        <app-toggle [ngModel]="isChecked(item.key)" (ngModelChange)="toggle(item.key, $event)" [ariaLabel]="item.label | translate" />
        <span>{{ item.label | translate }}</span>
        <small class="field-desc">{{ item.descKey | translate }}</small>
      </label>
    }
  </div>
-</section>
+</app-section-card>
 }
--- a/src/app/features/project-editor/sections/header-section.component.ts
+++ b/src/app/features/project-editor/sections/header-section.component.ts
@@ -3,11 +3,13 @@ import { FormsModule } from '@angular/forms';
 import { ProjectEditorFacade } from '../facade/project-editor.facade';
 import { TranslatePipe } from '../../../i18n/translate.pipe';
 import { HeaderConfig } from '../../../shared/models/config';
+import { SectionCardComponent } from '../../../shared/ui/section-card/section-card.component';
+import { ToggleComponent } from '../../../shared/ui/toggle/toggle.component';

@Component({
  selector: 'app-project-editor-header-section',
  standalone: true,
-  imports: [FormsModule, TranslatePipe],
+  imports: [FormsModule, TranslatePipe, SectionCardComponent, ToggleComponent],
  templateUrl: './header-section.component.html',
  styleUrls: ['./section.shared.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
--- a/src/app/i18n/en.ts
+++ b/src/app/i18n/en.ts
@@ -452,6 +452,15 @@ export const en: Translations = {
    copyright: 'Copyright',
    paymentIcons: 'Payment Icons',
    socialLinks: 'Social Links',
+    footerLogo: 'Footer Logo',
+    addPaymentIcon: 'Add Payment Icon',
+    removePaymentIcon: 'Remove',
+    iconAltLabel: 'Icon Label',
+    addSocialLink: 'Add Social Link',
+    removeSocialLink: 'Remove',
+    socialLinkLabel: 'Platform',
+    socialLinkUrl: 'URL',
+    invalidUrl: 'Enter a valid URL starting with http:// or https://.',
    createPage: 'Create Page',
    deletePage: 'Delete Page',
    pageId: 'Page ID',
@@ -590,6 +599,9 @@ export const en: Translations = {
    copyrightDesc: 'Copyright line shown at the bottom of every page.',
    paymentIconsDesc: 'One payment icon entry per line (image URL and label) shown in the footer.',
    socialLinksDesc: 'One social link entry per line (platform and URL) shown in the footer.',
+    footerLogoDesc: 'Logo shown in the footer, if different from the header logo.',
+    iconAltLabelDesc: 'Alt text describing the payment icon for accessibility.',
+    socialLinkUrlDesc: 'Full URL to the social media profile, must start with http:// or https://.',
    staticPagesFieldDesc: 'Static pages (about, terms, privacy, etc.) linked from the footer.',
    sectionVisibleDesc: 'Whether this homepage section is shown to shoppers.',
    layoutStrategyLabel: 'Layout strategy',
--- a/src/app/i18n/hy.ts
+++ b/src/app/i18n/hy.ts
@@ -452,6 +452,15 @@ export const hy: Translations = {
    copyright: 'Copyright',
    paymentIcons: 'Վճարման icon-ներ',
    socialLinks: 'Սոցիալական հղումներ',
+    footerLogo: 'Footer-ի լոգո',
+    addPaymentIcon: 'Ավելացնել վճարային icon',
+    removePaymentIcon: 'Հեռացնել',
+    iconAltLabel: 'Icon-ի պիտակ',
+    addSocialLink: 'Ավելացնել սոցիալական հղում',
+    removeSocialLink: 'Հեռացնել',
+    socialLinkLabel: 'Հարթակ',
+    socialLinkUrl: 'URL',
+    invalidUrl: 'Մուտքագրեք վավեր URL, որը սկսվում է http:// կամ https://։',
    createPage: 'Ստեղծել էջ',
    deletePage: 'Ջնջել էջը',
    pageId: 'Էջի ID',
@@ -590,6 +599,9 @@ export const hy: Translations = {
    copyrightDesc: 'Copyright տողը՝ ցուցադրվում է յուրաքանչյուր էջի ներքևում։',
    paymentIconsDesc: 'Մեկ վճարային icon մեկ տողում (պատկերի URL և պիտակ)՝ ցուցադրվում է footer-ում։',
    socialLinksDesc: 'Մեկ սոցիալական հղում մեկ տողում (հարթակ և URL)՝ ցուցադրվում է footer-ում։',
+    footerLogoDesc: 'Footer-ում ցուցադրվող լոգո, եթե տարբերվում է header-ի լոգոյից։',
+    iconAltLabelDesc: 'Վճարային icon-ի այլընտրանքային տեքստ՝ մատչելիության համար։',
+    socialLinkUrlDesc: 'Սոցիալական պրոֆիլի ամբողջական URL, պետք է սկսվի http:// կամ https://-ով։',
    staticPagesFieldDesc: 'Ստատիկ էջեր (մեր մասին, պայմաններ, գաղտնիության քաղաքականություն և այլն), որոնց հղում է անում footer-ը։',
    sectionVisibleDesc: 'Արդյո՞ք գլխավոր էջի այս սեկցիան ցուցադրվում է գնորդներին։',
    layoutStrategyLabel: 'Դասավորության ռազմավարություն',
--- a/src/app/i18n/ru.ts
+++ b/src/app/i18n/ru.ts
@@ -452,6 +452,15 @@ export const ru: Translations = {
    copyright: 'Копирайт',
    paymentIcons: 'Иконки оплаты',
    socialLinks: 'Социальные ссылки',
+    footerLogo: 'Логотип в футере',
+    addPaymentIcon: 'Добавить иконку оплаты',
+    removePaymentIcon: 'Удалить',
+    iconAltLabel: 'Подпись иконки',
+    addSocialLink: 'Добавить соцсеть',
+    removeSocialLink: 'Удалить',
+    socialLinkLabel: 'Платформа',
+    socialLinkUrl: 'URL',
+    invalidUrl: 'Введите корректный URL, начинающийся с http:// или https://.',
    createPage: 'Создать страницу',
    deletePage: 'Удалить страницу',
    pageId: 'ID страницы',
@@ -590,6 +599,9 @@ export const ru: Translations = {
    copyrightDesc: 'Строка копирайта внизу каждой страницы.',
    paymentIconsDesc: 'По одной иконке оплаты на строку (URL изображения и подпись), показываются в футере.',
    socialLinksDesc: 'По одной социальной ссылке на строку (платформа и URL), показываются в футере.',
+    footerLogoDesc: 'Логотип, отображаемый в футере, если отличается от логотипа в шапке.',
+    iconAltLabelDesc: 'Альтернативный текст для иконки оплаты (для доступности).',
+    socialLinkUrlDesc: 'Полный URL профиля в соцсети, должен начинаться с http:// или https://.',
    staticPagesFieldDesc: 'Статические страницы (о компании, условия, политика и т.д.), на которые ссылается футер.',
    sectionVisibleDesc: 'Показывать ли эту секцию главной страницы покупателям.',
    layoutStrategyLabel: 'Стратегия раскладки',
--- a/src/app/i18n/translations.ts
+++ b/src/app/i18n/translations.ts
@@ -450,6 +450,15 @@ export interface Translations {
    copyright: string;
    paymentIcons: string;
    socialLinks: string;
+    footerLogo: string;
+    addPaymentIcon: string;
+    removePaymentIcon: string;
+    iconAltLabel: string;
+    addSocialLink: string;
+    removeSocialLink: string;
+    socialLinkLabel: string;
+    socialLinkUrl: string;
+    invalidUrl: string;
    createPage: string;
    deletePage: string;
    pageId: string;
@@ -588,6 +597,9 @@ export interface Translations {
    copyrightDesc: string;
    paymentIconsDesc: string;
    socialLinksDesc: string;
+    footerLogoDesc: string;
+    iconAltLabelDesc: string;
+    socialLinkUrlDesc: string;
    staticPagesFieldDesc: string;
    sectionVisibleDesc: string;
    layoutStrategyLabel: string;