158 lines
8.2 KiB
HTML
158 lines
8.2 KiB
HTML
<div class="basic-details-container">
|
|
<mat-card class="details-card mat-elevation-z4">
|
|
<mat-card-content>
|
|
<div class="loading-shade" *ngIf="isLoading">
|
|
<mat-spinner diameter="50"></mat-spinner>
|
|
</div>
|
|
|
|
<form [formGroup]="basicDetailsForm" class="details-form" (ngSubmit)="saveBasicDetails()">
|
|
|
|
<!-- Holder Information -->
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline" class="name">
|
|
<mat-label>Holder Name</mat-label>
|
|
<input matInput formControlName="holderName" required>
|
|
<mat-error *ngIf="f['holderName'].errors?.['required']">
|
|
Name is required
|
|
</mat-error>
|
|
<mat-error *ngIf="f['holderName'].errors?.['maxlength']">
|
|
Maximum 100 characters allowed
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="lookup-code">
|
|
<mat-label>DBA Name</mat-label>
|
|
<input matInput formControlName="dbaName">
|
|
<mat-error *ngIf="f['dbaName'].errors?.['required']">
|
|
DBA name is required
|
|
</mat-error>
|
|
<mat-error *ngIf="f['dbaName'].errors?.['maxlength']">
|
|
Maximum 20 characters allowed
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline" class="holder-number">
|
|
<mat-label>Tax ID No</mat-label>
|
|
<input matInput formControlName="holderNumber" required>
|
|
<mat-error *ngIf="f['holderNumber'].errors?.['required']">
|
|
Tax ID No is required
|
|
</mat-error>
|
|
<mat-error *ngIf="f['holderNumber'].errors?.['maxlength']">
|
|
Maximum 20 characters allowed
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-radio-group formControlName="holderType" class="radio-group">
|
|
<mat-label>Holder Type </mat-label>
|
|
<mat-radio-button value="CORP">Corporation</mat-radio-button>
|
|
<mat-radio-button value="IND">Individual</mat-radio-button>
|
|
<mat-radio-button value="GOV ">Government Agency </mat-radio-button>
|
|
</mat-radio-group>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<mat-radio-group formControlName="uscibMember" class="radio-group">
|
|
<mat-label>Are you a member of USCIB ?</mat-label>
|
|
<mat-radio-button [value]="true">Yes</mat-radio-button>
|
|
<mat-radio-button [value]="false">No</mat-radio-button>
|
|
</mat-radio-group>
|
|
<mat-radio-group formControlName="govAgency" class="radio-group">
|
|
<mat-label>Are you belong to Government Agency ?</mat-label>
|
|
<mat-radio-button [value]="true">Yes</mat-radio-button>
|
|
<mat-radio-button [value]="false">No</mat-radio-button>
|
|
</mat-radio-group>
|
|
</div>
|
|
|
|
<!-- Address Information -->
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline" class="address1">
|
|
<mat-label>Address Line 1</mat-label>
|
|
<input matInput formControlName="address1" required>
|
|
<mat-error *ngIf="f['address1'].errors?.['required']">
|
|
Address is required
|
|
</mat-error>
|
|
<mat-error *ngIf="f['address1'].errors?.['maxlength']">
|
|
Maximum 100 characters allowed
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline" class="address2">
|
|
<mat-label>Address Line 2 (Optional)</mat-label>
|
|
<input matInput formControlName="address2">
|
|
<mat-error *ngIf="f['address2'].errors?.['maxlength']">
|
|
Maximum 100 characters allowed
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<!-- Location Information -->
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline" class="city">
|
|
<mat-label>City</mat-label>
|
|
<input matInput formControlName="city" required>
|
|
<mat-error *ngIf="f['city'].errors?.['required']">
|
|
City is required
|
|
</mat-error>
|
|
<mat-error *ngIf="f['city'].errors?.['maxlength']">
|
|
Maximum 50 characters allowed
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="country">
|
|
<mat-label>Country</mat-label>
|
|
<mat-select formControlName="country" required
|
|
(selectionChange)="onCountryChange($event.value)">
|
|
<mat-option *ngFor="let country of countries" [value]="country.value">
|
|
{{ country.name }}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="f['country'].errors?.['required']">
|
|
Country is required
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="state">
|
|
<mat-label>State/Province</mat-label>
|
|
<mat-select formControlName="state" required>
|
|
<mat-option *ngFor="let state of states" [value]="state.value">
|
|
{{ state.name }}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="f['state'].errors?.['required']">
|
|
State is required
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="zip">
|
|
<mat-label>ZIP/Postal Code</mat-label>
|
|
<input matInput formControlName="zip" required>
|
|
<mat-error *ngIf="f['zip'].errors?.['required']">
|
|
ZIP/Postal code is required
|
|
</mat-error>
|
|
<mat-error
|
|
*ngIf="f['country']?.value === 'US' && f['zip']?.touched && f['zip']?.errors?.['invalidUSZip']">
|
|
Please enter a valid 5-digit US ZIP code
|
|
</mat-error>
|
|
<mat-error
|
|
*ngIf="f['country']?.value === 'CA' && f['zip']?.touched && f['zip']?.errors?.['invalidCanadaPostal']">
|
|
Please enter a valid postal code (e.g., A1B2C3)
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button mat-raised-button color="accent" *ngIf="currentApplicationDetails" type="button"
|
|
(click)="goBackToCarnetApplication()">
|
|
<mat-icon>chevron_left</mat-icon> Back to application
|
|
</button>
|
|
<button mat-raised-button color="primary" type="submit"
|
|
[disabled]="basicDetailsForm.invalid || !basicDetailsForm.dirty">
|
|
{{ isEditMode ? 'Update' : 'Save' }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</div> |