diff --git a/frontend/src/app/features/checkout/checkout.component.html b/frontend/src/app/features/checkout/checkout.component.html index 7c83827..7ae90a7 100644 --- a/frontend/src/app/features/checkout/checkout.component.html +++ b/frontend/src/app/features/checkout/checkout.component.html @@ -46,14 +46,11 @@ -
-
- {{ 'CONTACT.TYPE_PRIVATE' | translate }} -
-
- {{ 'CONTACT.TYPE_COMPANY' | translate }} -
-
+ + diff --git a/frontend/src/app/features/checkout/checkout.component.scss b/frontend/src/app/features/checkout/checkout.component.scss index edd1bfd..5d61af1 100644 --- a/frontend/src/app/features/checkout/checkout.component.scss +++ b/frontend/src/app/features/checkout/checkout.component.scss @@ -64,39 +64,7 @@ } } -/* User Type Selector - Matching Contact Form Style */ -.user-type-selector { - display: flex; - background-color: var(--color-neutral-100); - border-radius: var(--radius-md); - padding: 4px; - margin: var(--space-6) 0; - gap: 4px; - width: 100%; - max-width: 400px; -} - -.type-option { - flex: 1; - text-align: center; - padding: 8px 16px; - border-radius: var(--radius-sm); - cursor: pointer; - font-size: 0.875rem; - font-weight: 500; - color: var(--color-text-muted); - transition: all 0.2s ease; - user-select: none; - - &:hover { color: var(--color-text); } - - &.selected { - background-color: var(--color-brand); - color: #000; - font-weight: 600; - box-shadow: 0 1px 2px rgba(0,0,0,0.05); - } -} +/* User Type Selector CSS has been extracted to app-toggle-selector component */ .company-fields { display: flex; diff --git a/frontend/src/app/features/checkout/checkout.component.ts b/frontend/src/app/features/checkout/checkout.component.ts index f9632ed..0914b8c 100644 --- a/frontend/src/app/features/checkout/checkout.component.ts +++ b/frontend/src/app/features/checkout/checkout.component.ts @@ -7,6 +7,7 @@ import { QuoteEstimatorService } from '../calculator/services/quote-estimator.se import { AppInputComponent } from '../../shared/components/app-input/app-input.component'; import { AppButtonComponent } from '../../shared/components/app-button/app-button.component'; import { AppCardComponent } from '../../shared/components/app-card/app-card.component'; +import { AppToggleSelectorComponent, ToggleOption } from '../../shared/components/app-toggle-selector/app-toggle-selector.component'; @Component({ selector: 'app-checkout', @@ -17,7 +18,8 @@ import { AppCardComponent } from '../../shared/components/app-card/app-card.comp TranslateModule, AppInputComponent, AppButtonComponent, - AppCardComponent + AppCardComponent, + AppToggleSelectorComponent ], templateUrl: './checkout.component.html', styleUrls: ['./checkout.component.scss'] @@ -35,6 +37,11 @@ export class CheckoutComponent implements OnInit { isSubmitting = signal(false); // Add signal for submit state quoteSession = signal(null); // Add signal for session details + userTypeOptions: ToggleOption[] = [ + { label: 'CONTACT.TYPE_PRIVATE', value: 'PRIVATE' }, + { label: 'CONTACT.TYPE_COMPANY', value: 'BUSINESS' } + ]; + constructor() { this.checkoutForm = this.fb.group({ email: ['', [Validators.required, Validators.email]], @@ -73,9 +80,9 @@ export class CheckoutComponent implements OnInit { return this.checkoutForm.get('customerType')?.value === 'BUSINESS'; } - setCustomerType(isCompany: boolean) { - const type = isCompany ? 'BUSINESS' : 'PRIVATE'; + setCustomerType(type: string) { this.checkoutForm.patchValue({ customerType: type }); + const isCompany = type === 'BUSINESS'; const billingGroup = this.checkoutForm.get('billingAddress') as FormGroup; const companyControl = billingGroup.get('companyName'); diff --git a/frontend/src/app/features/order/order.component.ts b/frontend/src/app/features/order/order.component.ts index 3b032ea..f159b7d 100644 --- a/frontend/src/app/features/order/order.component.ts +++ b/frontend/src/app/features/order/order.component.ts @@ -107,6 +107,12 @@ export class OrderComponent implements OnInit { if (lang === 'de') { return 'https://go.twint.ch/static/img/button_dark_de.svg'; } + if (lang === 'it'){ + return 'https://go.twint.ch/static/img/button_dark_it.svg'; + } + if (lang === 'fr'){ + return 'https://go.twint.ch/static/img/button_dark_fr.svg'; + } // Default to EN for everything else (it, fr, en) as instructed or if not DE return 'https://go.twint.ch/static/img/button_dark_en.svg'; } diff --git a/frontend/src/app/shared/components/app-locations/app-locations.component.html b/frontend/src/app/shared/components/app-locations/app-locations.component.html index e8a827c..e008327 100644 --- a/frontend/src/app/shared/components/app-locations/app-locations.component.html +++ b/frontend/src/app/shared/components/app-locations/app-locations.component.html @@ -8,18 +8,11 @@
- - + +
@@ -43,12 +36,12 @@
diff --git a/frontend/src/app/shared/components/app-locations/app-locations.component.scss b/frontend/src/app/shared/components/app-locations/app-locations.component.scss index 2396f8d..1b7f704 100644 --- a/frontend/src/app/shared/components/app-locations/app-locations.component.scss +++ b/frontend/src/app/shared/components/app-locations/app-locations.component.scss @@ -34,36 +34,10 @@ } .location-tabs { - display: flex; - gap: 1rem; margin-bottom: 2rem; - background: var(--color-bg); - padding: 0.5rem; - border-radius: var(--radius-md); - border: 1px solid var(--color-border); + width: 100%; } -.tab-btn { - flex: 1; - padding: 0.75rem; - border: none; - background: transparent; - border-radius: var(--radius-sm); - color: var(--color-text-muted); - font-weight: 600; - cursor: pointer; - transition: all 0.2s ease; - - &:hover { - color: var(--color-text-main); - } - - &.active { - background: var(--color-primary-500); - color: var(--color-neutral-900); - box-shadow: var(--shadow-sm); - } -} .location-details { padding: 2rem; diff --git a/frontend/src/app/shared/components/app-locations/app-locations.component.ts b/frontend/src/app/shared/components/app-locations/app-locations.component.ts index 89988ff..b8e3471 100644 --- a/frontend/src/app/shared/components/app-locations/app-locations.component.ts +++ b/frontend/src/app/shared/components/app-locations/app-locations.component.ts @@ -2,18 +2,24 @@ import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { TranslateModule } from '@ngx-translate/core'; import { RouterLink } from '@angular/router'; +import { AppToggleSelectorComponent, ToggleOption } from '../app-toggle-selector/app-toggle-selector.component'; @Component({ selector: 'app-locations', standalone: true, - imports: [CommonModule, TranslateModule, RouterLink], + imports: [CommonModule, TranslateModule, RouterLink, AppToggleSelectorComponent], templateUrl: './app-locations.component.html', styleUrl: './app-locations.component.scss' }) export class AppLocationsComponent { selectedLocation: 'ticino' | 'bienne' = 'ticino'; - selectLocation(location: 'ticino' | 'bienne') { + locationOptions: ToggleOption[] = [ + { label: 'LOCATIONS.TICINO', value: 'ticino' }, + { label: 'LOCATIONS.BIENNE', value: 'bienne' }, + ]; + + selectLocation(location: any) { this.selectedLocation = location; } } diff --git a/frontend/src/app/shared/components/app-toggle-selector/app-toggle-selector.component.html b/frontend/src/app/shared/components/app-toggle-selector/app-toggle-selector.component.html new file mode 100644 index 0000000..5702aeb --- /dev/null +++ b/frontend/src/app/shared/components/app-toggle-selector/app-toggle-selector.component.html @@ -0,0 +1,9 @@ +
+ @for (option of options(); track option.value) { +
+ {{ option.label | translate }} +
+ } +
diff --git a/frontend/src/app/shared/components/app-toggle-selector/app-toggle-selector.component.scss b/frontend/src/app/shared/components/app-toggle-selector/app-toggle-selector.component.scss new file mode 100644 index 0000000..6e2737a --- /dev/null +++ b/frontend/src/app/shared/components/app-toggle-selector/app-toggle-selector.component.scss @@ -0,0 +1,34 @@ +:host { + display: block; +} + +.user-type-selector { + display: flex; + background-color: var(--color-neutral-100); + border-radius: var(--radius-md); + padding: 4px; + gap: 4px; + width: 100%; +} + +.type-option { + flex: 1; + text-align: center; + padding: 8px 16px; + border-radius: var(--radius-sm); + cursor: pointer; + font-size: 0.875rem; + font-weight: 500; + color: var(--color-text-muted); + transition: all 0.2s ease; + user-select: none; + + &:hover { color: var(--color-text); } + + &.selected { + background-color: var(--color-brand); + color: #000; + font-weight: 600; + box-shadow: 0 1px 2px rgba(0,0,0,0.05); + } +} diff --git a/frontend/src/app/shared/components/app-toggle-selector/app-toggle-selector.component.ts b/frontend/src/app/shared/components/app-toggle-selector/app-toggle-selector.component.ts new file mode 100644 index 0000000..35af98d --- /dev/null +++ b/frontend/src/app/shared/components/app-toggle-selector/app-toggle-selector.component.ts @@ -0,0 +1,26 @@ +import { Component, input, output } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { TranslateModule } from '@ngx-translate/core'; + +export interface ToggleOption { + label: string; + value: any; +} + +@Component({ + selector: 'app-toggle-selector', + standalone: true, + imports: [CommonModule, TranslateModule], + templateUrl: './app-toggle-selector.component.html', + styleUrl: './app-toggle-selector.component.scss' +}) +export class AppToggleSelectorComponent { + options = input.required(); + selectedValue = input.required(); + + selectionChange = output(); + + selectOption(value: any) { + this.selectionChange.emit(value); + } +} diff --git a/frontend/src/assets/i18n/en.json b/frontend/src/assets/i18n/en.json index 3397f0e..8bdd593 100644 --- a/frontend/src/assets/i18n/en.json +++ b/frontend/src/assets/i18n/en.json @@ -107,8 +107,8 @@ "SUBTITLE": "We have two locations to serve you better. Select a location to see details.", "TICINO": "Ticino", "BIENNE": "Bienne", - "ADDRESS_TICINO": "Ticino Office, Switzerland", - "ADDRESS_BIENNE": "Bienne Office, Switzerland", + "ADDRESS_TICINO": "Via G. Pioda 29a, 6710 Biasca (TI)", + "ADDRESS_BIENNE": "Lyss-strasse 71, Nidau 2560 Bienne", "CONTACT_US": "Contact Us" }, "LEGAL": { diff --git a/frontend/src/assets/i18n/it.json b/frontend/src/assets/i18n/it.json index d88c877..b73895c 100644 --- a/frontend/src/assets/i18n/it.json +++ b/frontend/src/assets/i18n/it.json @@ -102,7 +102,7 @@ "PROCESSING": "Elaborazione...", "NOTES_PLACEHOLDER": "Istruzioni specifiche...", "SETUP_NOTE": "* Include {{cost}} Costo di Setup", - "STEP_WARNING": "La visualizzazione 3D non è compatibile con i file step e 3mf, ma il calcolatore funziona." + "STEP_WARNING": "La visualizzazione 3D non è compatibile con i file step e 3mf" }, "QUOTE": { "PROCEED_ORDER": "Procedi con l'ordine", @@ -170,8 +170,8 @@ "SUBTITLE": "Siamo presenti in due sedi per coprire meglio il territorio. Seleziona la sede per vedere i dettagli.", "TICINO": "Ticino", "BIENNE": "Bienne", - "ADDRESS_TICINO": "Sede Ticino, Svizzera", - "ADDRESS_BIENNE": "Sede Bienne, Svizzera", + "ADDRESS_TICINO": "Via G. Pioda 29a, 6710 Biasca (TI)", + "ADDRESS_BIENNE": "Lyss-strasse 71, Nidau 2560 Bienne", "CONTACT_US": "Contattaci" }, "LEGAL": {