import { DecimalPipe, JsonPipe } from '@angular/common'; import { Component, signal } from '@angular/core'; import { AfricaniesIconComponent } from '@africanies/africanies-icons'; import { AddressInputComponent, type AddressPlace, CheckboxComponent, DatePickerComponent, FileUploadComponent, type FileUploadResult, NumberInputComponent, OtpInputComponent, PhoneInputComponent, RadioComponent, type RadioOption, SelectComponent, type SelectOption, TextareaComponent, TextInputComponent, ToggleComponent, } from '@africanies/africanies-ui'; import { DemoSectionComponent } from '../shared/demo-section.component'; import { PageHeaderComponent } from '../shared/page-header.component'; import { FORMS_ADDRESS, FORMS_CHOICE, FORMS_DATE_FILE, FORMS_FILE_UPLOAD, FORMS_LIVE_VALUES, FORMS_NUMBER, FORMS_OTP, FORMS_PHONE, FORMS_SELECT, FORMS_TEXT, FORMS_TEXTAREA, } from '../snippets'; /** * */ @Component({ selector: 'app-forms-page', standalone: true, imports: [ DecimalPipe, JsonPipe, TextInputComponent, TextareaComponent, SelectComponent, AddressInputComponent, PhoneInputComponent, NumberInputComponent, OtpInputComponent, FileUploadComponent, CheckboxComponent, RadioComponent, ToggleComponent, DatePickerComponent, AfricaniesIconComponent, PageHeaderComponent, DemoSectionComponent, ], template: `
$ kg 
{{ pickupAddress() | json }}

Last placeSelected: {{ lastPlaceSelected()?.formattedAddress || '—' }}

Last completed: {{ lastOtpCompleted() || '—' }} · Resend clicks: {{ otpResendCount() }}

Tracking
{{ tracking() || '—' }}
Phone
{{ phone() || '—' }}
Amount
{{ amount() === null || amount() === undefined ? '—' : (amount() | number: '1.0-6') }}
Warehouse
{{ selectedWarehouse()?.label ?? '—' }}
Tags
{{ tagSummary() }}
Service
{{ serviceLevel() ?? '—' }}
Files
{{ files().length ? files() .map((f) => f.file.name) .join(', ') : '—' }}
`, }) export class FormsPage { protected readonly tracking = signal('AWB-10482'); protected readonly reference = signal('PO-7781'); protected readonly email = signal('not-an-email'); protected readonly locked = signal('WH-LOCKED-01'); protected readonly instructions = signal('Fragile — keep upright'); protected readonly notesError = signal('x'.repeat(12)); protected readonly amount = signal(12500); protected readonly weight = signal(24.5); protected readonly phone = signal('+2348012345678'); protected readonly lockedPhone = signal('+233244123456'); protected readonly phoneError = signal('+15551212'); protected readonly warehouses = signal[]>([ { label: 'Lagos Hub', value: 'los', prefix: 'warehouse', suffix: 'globe' }, { label: 'Accra Depot', value: 'acc', prefix: 'warehouse' }, { label: 'Johannesburg FC', value: 'jnb', prefix: 'warehouse', suffix: 'flag', }, { label: 'Cairo Gateway', value: 'cai', prefix: 'warehouse' }, ]); protected readonly selectedWarehouse = signal | null>({ label: 'Lagos Hub', value: 'los', prefix: 'warehouse', suffix: 'globe', }); protected readonly tags = signal[]>([ { label: 'Fragile', value: 'fragile', prefix: 'warning' }, { label: 'Priority', value: 'priority', prefix: 'alarm' }, { label: 'Bonded', value: 'bonded', prefix: 'anchor' }, ]); protected readonly selectedTags = signal[]>([ { label: 'Fragile', value: 'fragile', prefix: 'warning' }, { label: 'Priority', value: 'priority', prefix: 'alarm' }, ]); protected readonly incoterms: SelectOption[] = [ { label: 'DDP', value: 'ddp' }, { label: 'DAP', value: 'dap' }, { label: 'EXW', value: 'exw' }, { label: 'FOB', value: 'fob' }, ]; protected readonly selectedIncoterm = signal | null>({ label: 'DDP', value: 'ddp', }); protected readonly carriers: SelectOption[] = [ { label: 'DHL Express', value: 'dhl', prefix: 'airplane', suffix: 'check-circle', }, { label: 'FedEx', value: 'fedex', prefix: 'airplane' }, { label: 'UPS', value: 'ups', prefix: 'airplane', suffix: 'globe' }, ]; protected readonly selectedCarrier = signal | null>( null, ); protected readonly pickupAddress = signal({ placeId: 'place-lagos-1', formattedAddress: '12 Broad Street, Lagos, Nigeria', name: '12 Broad Street', lat: 6.4541, lng: 3.3947, locality: 'Lagos', country: 'Nigeria', countryCode: 'NG', }); protected readonly lastPlaceSelected = signal(null); protected readonly signature = signal(true); protected readonly insured = signal(false); protected readonly terms = signal(false); protected readonly smsNotify = signal(true); protected readonly holdAtDepot = signal(false); protected readonly customsHold = signal(false); protected readonly customsHoldSaving = signal(false); protected readonly serviceLevels: RadioOption[] = [ { label: 'Economy', value: 'economy' }, { label: 'Standard', value: 'standard' }, { label: 'Express', value: 'express' }, ]; protected readonly serviceLevel = signal('standard'); protected readonly readyDate = signal('2026-08-15'); protected readonly cutoffDate = signal('2026-08-14'); protected readonly files = signal([]); protected readonly buttonFiles = signal([]); protected readonly compactFiles = signal([]); protected readonly otpCodeValue = signal('482913'); protected readonly otpPin = signal('7391'); protected readonly otpError = signal('0000'); protected readonly lastOtpCompleted = signal(''); protected readonly otpResendCount = signal(0); protected readonly textCode = FORMS_TEXT; protected readonly textareaCode = FORMS_TEXTAREA; protected readonly numberCode = FORMS_NUMBER; protected readonly phoneCode = FORMS_PHONE; protected readonly selectCode = FORMS_SELECT; protected readonly addressCode = FORMS_ADDRESS; protected readonly choiceCode = FORMS_CHOICE; protected readonly otpCode = FORMS_OTP; protected readonly dateFileCode = FORMS_DATE_FILE; protected readonly fileUploadCode = FORMS_FILE_UPLOAD; protected readonly liveValuesCode = FORMS_LIVE_VALUES; protected onPlaceSelected(place: AddressPlace): void { this.lastPlaceSelected.set(place); } protected onFiles(next: FileUploadResult[]): void { this.files.set(next); } protected onButtonFiles(next: FileUploadResult[]): void { this.buttonFiles.set(next); } protected onCompactFiles(next: FileUploadResult[]): void { this.compactFiles.set(next); } protected onOtpCompleted(code: string): void { this.lastOtpCompleted.set(code); } protected onOtpResend(): void { this.otpResendCount.update((n) => n + 1); } protected saveCustomsHold(next: boolean): void { this.customsHoldSaving.set(true); window.setTimeout(() => { this.customsHold.set(next); this.customsHoldSaving.set(false); }, 1200); } protected tagSummary(): string { const selected = this.selectedTags(); if (!selected.length) { return '—'; } return selected.map((t) => t.label).join(', '); } }