302 lines
16 KiB
HTML
302 lines
16 KiB
HTML
<div class="shipping-container">
|
|
<form [formGroup]="shippingForm" (ngSubmit)="onSubmit()">
|
|
<!-- Insurance Section -->
|
|
<div class="section">
|
|
<h3>Insurance & Bond</h3>
|
|
<div class="checkbox-group">
|
|
<mat-checkbox labelPosition="before" formControlName="needsBond">Do you need Bond from
|
|
us?</mat-checkbox>
|
|
<mat-checkbox labelPosition="before" formControlName="needsInsurance">Do you need insurance for your
|
|
goods?</mat-checkbox>
|
|
<mat-checkbox labelPosition="before" formControlName="needsLostDocProtection">Do you need Lost document
|
|
protection?</mat-checkbox>
|
|
</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="thirdParty">3rd Party</mat-radio-button>
|
|
</mat-radio-group>
|
|
|
|
<mat-card appearance="outlined" *ngIf="!showAddressForm && !showContactForm">
|
|
<mat-card-content>
|
|
<p>{{getAddressLabel()}}</p>
|
|
</mat-card-content>
|
|
<mat-card-actions>
|
|
<button mat-button (click)="editAddressForm()">Edit</button>
|
|
</mat-card-actions>
|
|
</mat-card>
|
|
<div *ngIf="showAddressForm" class="address-form" formGroupName="address">
|
|
<h4>Shipping Address</h4>
|
|
|
|
<!-- 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 !== 'thirdParty'">
|
|
<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>
|
|
</div>
|
|
|
|
<!-- Delivery Section -->
|
|
<div class="section">
|
|
<h3>Delivery Method</h3>
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Delivery Type</mat-label>
|
|
<mat-select formControlName="deliveryType" required>
|
|
<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-form-field>
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Delivery Method</mat-label>
|
|
<mat-select formControlName="deliveryMethod" required>
|
|
<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 === 'customerCourier'" class="form-row">
|
|
<mat-form-field appearance="outline" class="full-width">
|
|
<mat-label>Courier Account Number</mat-label>
|
|
<input matInput formControlName="courierAccount">
|
|
<mat-error>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="submit" [disabled]="shippingForm.invalid || isLoading">
|
|
<span *ngIf="!isLoading">Save</span>
|
|
<mat-spinner *ngIf="isLoading" diameter="24"></mat-spinner>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div> |