This commit is contained in:
Jonas Hendrickx 2024-11-25 15:23:51 +01:00
parent 6b97fb0462
commit 0aa90e1583
2 changed files with 38 additions and 76 deletions

View File

@ -19,47 +19,39 @@
<input bitInput type="text" formControlName="postalCode" autocomplete="postal-code" />
</bit-form-field>
</div>
<div class="tw-col-span-6" *ngIf="isTaxSupported">
<bit-form-control>
<input bitCheckbox type="checkbox" formControlName="includeTaxId" />
<bit-label>{{ "includeVAT" | i18n }}</bit-label>
</bit-form-control>
</div>
<div class="tw-grid tw-grid-cols-12 tw-gap-4">
<div class="tw-col-span-6">
<bit-form-field>
<bit-label>{{ "taxIdNumber" | i18n }}</bit-label>
<input bitInput type="text" formControlName="taxId" />
</bit-form-field>
</div>
</div>
<ng-container *ngIf="showTaxIdFields">
<div class="tw-grid tw-grid-cols-12 tw-gap-4">
<div class="tw-col-span-6">
<bit-form-field>
<bit-label>{{ "taxIdNumber" | i18n }}</bit-label>
<input bitInput type="text" formControlName="taxId" />
</bit-form-field>
</div>
<div class="tw-grid tw-grid-cols-12 tw-gap-4">
<div class="tw-col-span-6">
<bit-form-field>
<bit-label>{{ "address1" | i18n }}</bit-label>
<input bitInput type="text" formControlName="line1" autocomplete="address-line1" />
</bit-form-field>
</div>
<div class="tw-grid tw-grid-cols-12 tw-gap-4">
<div class="tw-col-span-6">
<bit-form-field>
<bit-label>{{ "address1" | i18n }}</bit-label>
<input bitInput type="text" formControlName="line1" autocomplete="address-line1" />
</bit-form-field>
</div>
<div class="tw-col-span-6">
<bit-form-field>
<bit-label>{{ "address2" | i18n }}</bit-label>
<input bitInput type="text" formControlName="line2" autocomplete="address-line2" />
</bit-form-field>
</div>
<div class="tw-col-span-6">
<bit-form-field>
<bit-label for="addressCity">{{ "cityTown" | i18n }}</bit-label>
<input bitInput type="text" formControlName="city" autocomplete="address-level2" />
</bit-form-field>
</div>
<div class="tw-col-span-6">
<bit-form-field>
<bit-label>{{ "stateProvince" | i18n }}</bit-label>
<input bitInput type="text" formControlName="state" autocomplete="address-level1" />
</bit-form-field>
</div>
<div class="tw-col-span-6">
<bit-form-field>
<bit-label>{{ "address2" | i18n }}</bit-label>
<input bitInput type="text" formControlName="line2" autocomplete="address-line2" />
</bit-form-field>
</div>
</ng-container>
<div class="tw-col-span-6">
<bit-form-field>
<bit-label for="addressCity">{{ "cityTown" | i18n }}</bit-label>
<input bitInput type="text" formControlName="city" autocomplete="address-level2" />
</bit-form-field>
</div>
<div class="tw-col-span-6">
<bit-form-field>
<bit-label>{{ "stateProvince" | i18n }}</bit-label>
<input bitInput type="text" formControlName="state" autocomplete="address-level1" />
</bit-form-field>
</div>
</div>
</form>

View File

@ -10,7 +10,6 @@ import { TaxServiceAbstraction } from "@bitwarden/common/billing/abstractions/ta
import { CountryListItem } from "@bitwarden/common/billing/models/domain";
import { ExpandedTaxInfoUpdateRequest } from "@bitwarden/common/billing/models/request/expanded-tax-info-update.request";
import { TaxInfoUpdateRequest } from "@bitwarden/common/billing/models/request/tax-info-update.request";
import { TaxRateResponse } from "@bitwarden/common/billing/models/response/tax-rate.response";
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
import { SharedModule } from "../../shared";
@ -46,7 +45,6 @@ export class TaxInfoComponent implements OnInit, OnDestroy {
organizationId: string;
providerId: string;
countryList: CountryListItem[] = this.taxService.getCountries();
taxRates: TaxRateResponse[];
constructor(
private apiService: ApiService,
@ -84,10 +82,6 @@ export class TaxInfoComponent implements OnInit, OnDestroy {
return this.taxFormGroup.controls.state.value;
}
protected get includeTaxId(): boolean {
return this.taxFormGroup.controls.includeTaxId.value;
}
async ngOnInit() {
// Provider setup
// eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
@ -108,7 +102,7 @@ export class TaxInfoComponent implements OnInit, OnDestroy {
this.taxFormGroup.controls.line2.setValue(taxInfo.line2);
this.taxFormGroup.controls.city.setValue(taxInfo.city);
this.taxFormGroup.controls.postalCode.setValue(taxInfo.postalCode);
this.taxFormGroup.controls.country.setValue(taxInfo.country || "US");
this.taxFormGroup.controls.country.setValue(taxInfo.country);
this.taxFormGroup.controls.includeTaxId.setValue(
!!taxInfo.taxId ||
!!taxInfo.line1 ||
@ -125,7 +119,7 @@ export class TaxInfoComponent implements OnInit, OnDestroy {
const taxInfo = await this.apiService.getTaxInfo();
if (taxInfo) {
this.taxFormGroup.controls.postalCode.setValue(taxInfo.postalCode);
this.taxFormGroup.controls.country.setValue(taxInfo.country || "US");
this.taxFormGroup.controls.country.setValue(taxInfo.country);
}
} catch (e) {
this.logService.error(e);
@ -141,20 +135,18 @@ export class TaxInfoComponent implements OnInit, OnDestroy {
this.taxFormGroup.controls.postalCode.updateValueAndValidity();
}
if (this.country !== "US") {
this.onCountryChanged.emit();
}
this.onCountryChanged.emit();
});
this.taxFormGroup.controls.country.valueChanges
.pipe(debounceTime(1000), takeUntil(this.destroy$))
.subscribe((value) => {
if (value === "US") {
this.taxFormGroup.get("postalCode").setValidators([Validators.required]);
this.taxFormGroup.controls.postalCode.setValidators([Validators.required]);
} else {
this.taxFormGroup.get("postalCode").clearValidators();
this.taxFormGroup.controls.postalCode.clearValidators();
}
this.taxFormGroup.get("postalCode").updateValueAndValidity();
this.taxFormGroup.controls.postalCode.updateValueAndValidity();
this.changeCountry();
this.onTaxInformationChanged.emit();
});
@ -177,16 +169,7 @@ export class TaxInfoComponent implements OnInit, OnDestroy {
this.clearTaxInformationFields();
});
try {
const taxRates = await this.apiService.getTaxRates();
if (taxRates) {
this.taxRates = taxRates.data;
}
} catch (e) {
this.logService.error(e);
} finally {
this.loading = false;
}
this.loading = false;
}
ngOnDestroy() {
@ -194,19 +177,6 @@ export class TaxInfoComponent implements OnInit, OnDestroy {
this.destroy$.complete();
}
get taxRate() {
if (this.taxRates != null) {
const localTaxRate = this.taxRates.find(
(x) => x.country === this.country && x.postalCode === this.postalCode,
);
return localTaxRate?.rate ?? null;
}
}
get showTaxIdFields(): boolean {
return this.includeTaxId && this.isTaxSupported;
}
getTaxInfoRequest(): TaxInfoUpdateRequest {
const request = new ExpandedTaxInfoUpdateRequest();
request.country = this.country;