371 lines
19 KiB
HTML
371 lines
19 KiB
HTML
<div class="shipping-container">
|
|
<div class="loading-shade" *ngIf="isLoading">
|
|
<mat-spinner diameter="50"></mat-spinner>
|
|
</div>
|
|
|
|
<form [formGroup]="shippingForm" (ngSubmit)="onSubmit(false)">
|
|
<!-- Insurance Section -->
|
|
<div class="section">
|
|
<h3>Insurance & Bond</h3>
|
|
<div class="checkbox-group">
|
|
<!-- <mat-checkbox formControlName="needsBond">Do you need Bond from
|
|
us?</mat-checkbox> -->
|
|
<mat-checkbox formControlName="needsInsurance">Do you need insurance for your
|
|
goods?</mat-checkbox>
|
|
<mat-checkbox formControlName="needsLostDocProtection">Do you need Lost document
|
|
protection?</mat-checkbox>
|
|
|
|
<mat-form-field appearance="outline" class="formofsecurity">
|
|
<mat-label>Form Of Security</mat-label>
|
|
<mat-select formControlName="formOfSecurity" required>
|
|
<mat-option *ngFor="let formOfSecurity of formOfSecurities" [value]="formOfSecurity.value">
|
|
{{ formOfSecurity.name }}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="shippingForm.get('formOfSecurity')?.errors?.['required']">
|
|
Form Of Security is required
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Shipping Section -->
|
|
<div class="section">
|
|
<h3>Ship To</h3>
|
|
<mat-radio-group formControlName="shipTo" class="radio-group" (change)="onShipToChange($event)">
|
|
<mat-radio-button value="PREPARER">Preparer</mat-radio-button>
|
|
<mat-radio-button value="HOLDER">Holder</mat-radio-button>
|
|
<mat-radio-button value="3RDPARTY">3rd Party</mat-radio-button>
|
|
</mat-radio-group>
|
|
|
|
<mat-card appearance="outlined" *ngIf="!showAddressForm && !showContactForm">
|
|
<mat-card-content>
|
|
<div class="presaved-address">
|
|
<div class="presaved-address-content">
|
|
<p>{{getAddressLabel()}}</p>
|
|
<p>{{getContactLabel()}}</p>
|
|
</div>
|
|
<div class="presaved-address-actions">
|
|
<!-- <button type="button" mat-icon-button color="primary" matTooltip="Edit">
|
|
<mat-icon>edit</mat-icon>
|
|
</button> -->
|
|
<button type="button" mat-icon-button color="primary" *ngIf="!isViewMode"
|
|
(click)="selectContact()" matTooltip="Change contact">
|
|
<mat-icon>compare_arrows</mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
<div *ngIf="showAddressForm" class="address-form" formGroupName="address">
|
|
<h4>Shipping Address</h4>
|
|
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline" class="companyName">
|
|
<mat-label>Company Name</mat-label>
|
|
<input matInput formControlName="companyName" required>
|
|
<mat-error *ngIf="shippingForm.get('address.companyName')?.errors?.['required']">
|
|
Company name is required
|
|
</mat-error>
|
|
<mat-error *ngIf="shippingForm.get('address.companyName')?.errors?.['maxlength']">
|
|
Maximum 100 characters allowed
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</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="shippingForm.get('address.address1')?.errors?.['required']">
|
|
Address is required
|
|
</mat-error>
|
|
<mat-error *ngIf="shippingForm.get('address.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="shippingForm.get('address.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="shippingForm.get('address.city')?.errors?.['required']">
|
|
City is required
|
|
</mat-error>
|
|
<mat-error *ngIf="shippingForm.get('address.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="shippingForm.get('address.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="shippingForm.get('address.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="shippingForm.get('address.zip')?.errors?.['required']">
|
|
ZIP/Postal code is required
|
|
</mat-error>
|
|
<mat-error
|
|
*ngIf="shippingForm.get('address.country')?.value === 'US' && shippingForm.get('address.zip')?.touched && shippingForm.get('address.zip')?.errors?.['invalidUSZip']">
|
|
Please enter a valid 5-digit US ZIP code
|
|
</mat-error>
|
|
<mat-error
|
|
*ngIf="shippingForm.get('address.country')?.value === 'CA' && shippingForm.get('address.zip')?.touched && shippingForm.get('address.zip')?.errors?.['invalidCanadaPostal']">
|
|
Please enter a valid postal code (e.g., A1B2C3)
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<div class="form-actions" *ngIf="showAddressForm && shippingForm.get('shipTo')?.value !== '3RDPARTY'">
|
|
<button mat-button type="button" (click)="cancelEditAddressForm()">Cancel</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="showContactForm" class="contact-form" formGroupName="contact">
|
|
<h4>Contact Information</h4>
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>First Name</mat-label>
|
|
<input matInput formControlName="firstName" required>
|
|
<mat-icon matSuffix>person</mat-icon>
|
|
<mat-error *ngIf="shippingForm.get('contact.firstName')?.errors?.['required']">
|
|
First name is required
|
|
</mat-error>
|
|
<mat-error *ngIf="shippingForm.get('contact.firstName')?.errors?.['maxlength']">
|
|
Maximum 50 characters allowed
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="small-field">
|
|
<mat-label>Middle Initial</mat-label>
|
|
<input matInput formControlName="middleInitial" maxlength="1">
|
|
<mat-error *ngIf="shippingForm.get('contact.middleInitial')?.errors?.['maxlength']">
|
|
Only 1 character allowed
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Last Name</mat-label>
|
|
<input matInput formControlName="lastName" required>
|
|
<mat-icon matSuffix>person</mat-icon>
|
|
<mat-error *ngIf="shippingForm.get('contact.lastName')?.errors?.['required']">
|
|
Last name is required
|
|
</mat-error>
|
|
<mat-error *ngIf="shippingForm.get('contact.lastName')?.errors?.['maxlength']">
|
|
Maximum 50 characters allowed
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Title</mat-label>
|
|
<input matInput formControlName="title" required>
|
|
<mat-icon matSuffix>work</mat-icon>
|
|
<mat-error *ngIf="shippingForm.get('contact.title')?.errors?.['required']">
|
|
Title is required
|
|
</mat-error>
|
|
<mat-error *ngIf="shippingForm.get('contact.title')?.errors?.['maxlength']">
|
|
Maximum 100 characters allowed
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Phone</mat-label>
|
|
<input matInput formControlName="phone" required>
|
|
<mat-icon matSuffix>phone</mat-icon>
|
|
<mat-error *ngIf="shippingForm.get('contact.phone')?.errors?.['required']">
|
|
Phone is required
|
|
</mat-error>
|
|
<mat-error *ngIf="shippingForm.get('contact.phone')?.errors?.['pattern']">
|
|
Please enter a valid phone number (10-15 digits)
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Mobile</mat-label>
|
|
<input matInput formControlName="mobile">
|
|
<mat-icon matSuffix>smartphone</mat-icon>
|
|
<mat-error *ngIf="shippingForm.get('contact.mobile')?.errors?.['required']">
|
|
Mobile is required
|
|
</mat-error>
|
|
<mat-error *ngIf="shippingForm.get('contact.mobile')?.errors?.['pattern']">
|
|
Please enter a valid mobile number (10-15 digits)
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Fax</mat-label>
|
|
<input matInput formControlName="fax">
|
|
<mat-icon matSuffix>fax</mat-icon>
|
|
<mat-error *ngIf="shippingForm.get('contact.fax')?.errors?.['pattern']">
|
|
Please enter a valid fax number (10-15 digits)
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Email</mat-label>
|
|
<input matInput formControlName="email" required>
|
|
<mat-icon matSuffix>email</mat-icon>
|
|
<mat-error *ngIf="shippingForm.get('contact.email')?.errors?.['required']">
|
|
Email is required
|
|
</mat-error>
|
|
<mat-error *ngIf="shippingForm.get('contact.email')?.errors?.['email']">
|
|
Please enter a valid email address
|
|
</mat-error>
|
|
<mat-error *ngIf="shippingForm.get('contact.email')?.errors?.['maxlength']">
|
|
Maximum 100 characters allowed
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline" class="full-width">
|
|
<mat-label>Reference Number</mat-label>
|
|
<input matInput formControlName="refNumber">
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline" class="full-width">
|
|
<mat-label>Notes</mat-label>
|
|
<textarea matInput formControlName="notes" rows="2"></textarea>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<div class="form-actions" *ngIf="showAddressForm && shippingForm.get('shipTo')?.value !== '3RDPARTY'">
|
|
<button mat-button type="button" (click)="cancelEditAddressForm()">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delivery Section -->
|
|
<div class="section">
|
|
<h3>Delivery</h3>
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Delivery Type</mat-label>
|
|
<mat-select formControlName="deliveryType" required (change)="onDeliveryTypeChange()">
|
|
<mat-option *ngFor="let deliveryType of deliveryTypes" [value]="deliveryType.value">
|
|
{{ deliveryType.name }}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="shippingForm.get('deliveryType')?.errors?.['required']">
|
|
Delivery Type is required
|
|
</mat-error>
|
|
<mat-hint align="start" *ngIf="deliveryEstimate && !isViewMode" class="delivery-estimate">
|
|
<span>{{ deliveryEstimate }}</span>
|
|
</mat-hint>
|
|
</mat-form-field>
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Delivery Method</mat-label>
|
|
<mat-select formControlName="deliveryMethod" required
|
|
(selectionChange)="onDeliveryMethodChange($event.value)">
|
|
<mat-option *ngFor="let deliveryMethod of deliveryMethods" [value]="deliveryMethod.value">
|
|
{{ deliveryMethod.name }}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="shippingForm.get('deliveryMethod')?.errors?.['required']">
|
|
Delivery Method is required
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<div *ngIf="shippingForm.get('deliveryMethod')?.value === 'CLC'" class="form-row">
|
|
<mat-form-field appearance="outline" class="full-width">
|
|
<mat-label>Courier Account Number</mat-label>
|
|
<input matInput formControlName="courierAccount">
|
|
<mat-error *ngIf="shippingForm.get('courierAccount')?.errors?.['required']">
|
|
Required when using customer courier
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Payment Section -->
|
|
<div class="section">
|
|
<h3>Payment Method</h3>
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Payment Method</mat-label>
|
|
<mat-select formControlName="paymentMethod" required>
|
|
<mat-option *ngFor="let paymentType of paymentTypes" [value]="paymentType.value">
|
|
{{ paymentType.name }}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="shippingForm.get('paymentMethod')?.errors?.['required']">
|
|
Payment Method is required
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<!-- <div class="form-row">
|
|
<mat-form-field appearance="outline" class="full-width">
|
|
<mat-label>Payment Notes</mat-label>
|
|
<textarea matInput formControlName="notes" rows="2"></textarea>
|
|
</mat-form-field>
|
|
</div> -->
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button mat-raised-button color="primary" type="button" (click)="showEstimatedFees()"
|
|
*ngIf="showEstimatedFeesButton && !isViewMode">
|
|
<span>Estimated Fees</span>
|
|
</button>
|
|
|
|
<button mat-raised-button color="primary" type="submit" *ngIf="!isViewMode"
|
|
[disabled]="shippingForm.invalid || changeInProgress">
|
|
Save
|
|
</button>
|
|
|
|
<button mat-raised-button color="primary" type="button" (click)="processApplication()"
|
|
[disabled]="!enableSubmitButton" *ngIf="showProcessButton && !isViewMode">
|
|
<span>Process Application</span>
|
|
</button>
|
|
|
|
<button mat-raised-button color="primary" type="button" (click)="submitApplication()"
|
|
[disabled]="!enableSubmitButton" *ngIf="showSubmitButton && !isViewMode">
|
|
<span>Submit Application</span>
|
|
</button>
|
|
|
|
<button mat-raised-button color="primary" type="button" (click)="returnToHome()" *ngIf="isViewMode">
|
|
Back
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div> |