Skip to content

Commit

Permalink
feat: display purchaser widget for b2b customers on checkout and orde…
Browse files Browse the repository at this point in the history
…r details pages
  • Loading branch information
SGrueber committed Dec 16, 2020
1 parent 0b11e51 commit d31ee1b
Show file tree
Hide file tree
Showing 17 changed files with 180 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ describe('Requisition Mapper', () => {
"customerApprovers": undefined,
"status": "APPROVED",
},
"attributes": undefined,
"bucketId": undefined,
"commonShipToAddress": undefined,
"commonShippingMethod": undefined,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,12 @@ <h1>{{ 'account.orderdetails.heading.default' | translate }}</h1>
</div>

<ng-container *ngIf="order">
<div *ishFeature="'businessCustomerRegistration'" class="row">
<!-- Purchaser-->
<ish-info-box heading="checkout.widget.purchaser.heading" class="infobox-wrapper col-md-6">
<ish-basket-purchaser [object]="order"></ish-basket-purchaser>
</ish-info-box>
</div>
<div class="row d-flex">
<!-- Invoice Address -->
<ish-info-box heading="checkout.widget.billing-address.heading" class="infobox-wrapper col-md-6">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,14 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
import { TranslateModule } from '@ngx-translate/core';
import { MockComponent, MockPipe } from 'ng-mocks';
import { MockComponent, MockDirective, MockPipe } from 'ng-mocks';

import { FeatureToggleDirective } from 'ish-core/directives/feature-toggle.directive';
import { DatePipe } from 'ish-core/pipes/date.pipe';
import { BasketMockData } from 'ish-core/utils/dev/basket-mock-data';
import { AddressComponent } from 'ish-shared/components/address/address/address.component';
import { BasketCostSummaryComponent } from 'ish-shared/components/basket/basket-cost-summary/basket-cost-summary.component';
import { BasketPurchaserComponent } from 'ish-shared/components/basket/basket-purchaser/basket-purchaser.component';
import { InfoBoxComponent } from 'ish-shared/components/common/info-box/info-box.component';
import { LineItemListComponent } from 'ish-shared/components/line-item/line-item-list/line-item-list.component';

Expand All @@ -24,9 +26,11 @@ describe('Account Order Component', () => {
AccountOrderComponent,
MockComponent(AddressComponent),
MockComponent(BasketCostSummaryComponent),
MockComponent(BasketPurchaserComponent),
MockComponent(FaIconComponent),
MockComponent(InfoBoxComponent),
MockComponent(LineItemListComponent),
MockDirective(FeatureToggleDirective),
MockPipe(DatePipe),
],
imports: [RouterTestingModule, TranslateModule.forRoot()],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,13 @@ <h3 class="subheading">{{ 'checkout.addresses.billing_address.heading' | transla
data-testing-id="invoiceAddressForm"
[parentForm]="invoiceAddressForm"
></ish-address-form-container>
<!-- Taxation ID input field -->
<ish-input
*ishFeature="'businessCustomerRegistration'"
[form]="form"
controlName="taxationID"
label="account.address.taxation.label"
></ish-input>
<!-- Email address input field-->
<ish-input
[form]="form"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
import { TranslateModule } from '@ngx-translate/core';
import { MockComponent } from 'ng-mocks';
import { MockComponent, MockDirective } from 'ng-mocks';
import { anything, instance, mock, verify } from 'ts-mockito';

import { FeatureToggleDirective } from 'ish-core/directives/feature-toggle.directive';
import { CheckoutFacade } from 'ish-core/facades/checkout.facade';
import { makeHttpError } from 'ish-core/utils/dev/api-service-utils';
import { AddressFormContainerComponent } from 'ish-shared/address-forms/components/address-form-container/address-form-container.component';
Expand All @@ -31,6 +32,7 @@ describe('Checkout Address Anonymous Component', () => {
MockComponent(ErrorMessageComponent),
MockComponent(IdentityProviderLoginComponent),
MockComponent(InputComponent),
MockDirective(FeatureToggleDirective),
],
imports: [NgbCollapseModule, ReactiveFormsModule, TranslateModule.forRoot()],
providers: [{ provide: CheckoutFacade, useFactory: () => instance(checkoutFacade) }],
Expand Down Expand Up @@ -118,6 +120,7 @@ describe('Checkout Address Anonymous Component', () => {
it('should create address for valid invoice address form', () => {
component.form = fb.group({
email: new FormControl(''),
taxationID: new FormControl(''),
shipOption: new FormControl('shipToInvoiceAddress'),
});
component.invoiceAddressForm = fb.group({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ export class CheckoutAddressAnonymousComponent implements OnChanges, OnInit, OnD
ngOnInit() {
// create address form for basket addresses
this.form = this.fb.group({
taxationID: [''],
email: ['', [Validators.required, SpecialValidators.email]],
shipOption: ['shipToInvoiceAddress', [Validators.required]],
});
Expand Down Expand Up @@ -126,6 +127,12 @@ export class CheckoutAddressAnonymousComponent implements OnChanges, OnInit, OnD
? undefined
: this.shippingAddressForm.get('address').value;

if (this.form.get('taxationID').value) {
this.checkoutFacade.setBasketCustomAttribute({ name: 'taxationID', value: this.form.get('taxationID').value });
} else {
this.checkoutFacade.deleteBasketCustomAttribute('taxationID');
}

if (shippingAddress) {
this.checkoutFacade.createBasketAddress(invoiceAddress, 'invoice');
this.checkoutFacade.createBasketAddress(shippingAddress, 'shipping');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,13 @@
<!-- header as content -->
<ng-content></ng-content>

<div *ishFeature="'businessCustomerRegistration'" class="row">
<!-- Purchaser-->
<ish-info-box heading="checkout.widget.purchaser.heading" class="infobox-wrapper col-md-6">
<ish-basket-purchaser [object]="order"></ish-basket-purchaser>
</ish-info-box>
</div>

<div class="row d-flex">
<!-- Invoice Address -->
<ish-info-box heading="checkout.widget.billing-address.heading" class="infobox-wrapper col-md-6">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
import { TranslateModule } from '@ngx-translate/core';
import { MockComponent } from 'ng-mocks';
import { MockComponent, MockDirective } from 'ng-mocks';

import { FeatureToggleDirective } from 'ish-core/directives/feature-toggle.directive';
import { BasketMockData } from 'ish-core/utils/dev/basket-mock-data';
import { AddressComponent } from 'ish-shared/components/address/address/address.component';
import { BasketCostSummaryComponent } from 'ish-shared/components/basket/basket-cost-summary/basket-cost-summary.component';
import { BasketPurchaserComponent } from 'ish-shared/components/basket/basket-purchaser/basket-purchaser.component';
import { InfoBoxComponent } from 'ish-shared/components/common/info-box/info-box.component';
import { LineItemListComponent } from 'ish-shared/components/line-item/line-item-list/line-item-list.component';

Expand All @@ -22,9 +24,11 @@ describe('Checkout Receipt Component', () => {
CheckoutReceiptComponent,
MockComponent(AddressComponent),
MockComponent(BasketCostSummaryComponent),
MockComponent(BasketPurchaserComponent),
MockComponent(FaIconComponent),
MockComponent(InfoBoxComponent),
MockComponent(LineItemListComponent),
MockDirective(FeatureToggleDirective),
],
imports: [TranslateModule.forRoot()],
}).compileComponents();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,12 @@ <h1 class="d-flex flex-wrap align-items-baseline">
</p>
</div>
<ish-basket-approval-info *ngIf="basket.approval" [approval]="basket.approval"></ish-basket-approval-info>
<div *ishFeature="'businessCustomerRegistration'" class="row">
<!-- Purchaser-->
<ish-info-box heading="checkout.widget.purchaser.heading" class="infobox-wrapper col-md-6">
<ish-basket-purchaser [object]="basket"></ish-basket-purchaser>
</ish-info-box>
</div>
<div class="row d-flex">
<!-- Invoice Address -->
<ish-info-box
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { TranslateModule } from '@ngx-translate/core';
import { MockComponent, MockDirective } from 'ng-mocks';
import { spy, verify } from 'ts-mockito';

import { FeatureToggleDirective } from 'ish-core/directives/feature-toggle.directive';
import { ServerHtmlDirective } from 'ish-core/directives/server-html.directive';
import { BasketApproval } from 'ish-core/models/basket-approval/basket-approval.model';
import { makeHttpError } from 'ish-core/utils/dev/api-service-utils';
Expand All @@ -13,6 +14,7 @@ import { ContentIncludeComponent } from 'ish-shared/cms/components/content-inclu
import { AddressComponent } from 'ish-shared/components/address/address/address.component';
import { BasketApprovalInfoComponent } from 'ish-shared/components/basket/basket-approval-info/basket-approval-info.component';
import { BasketCostSummaryComponent } from 'ish-shared/components/basket/basket-cost-summary/basket-cost-summary.component';
import { BasketPurchaserComponent } from 'ish-shared/components/basket/basket-purchaser/basket-purchaser.component';
import { BasketValidationResultsComponent } from 'ish-shared/components/basket/basket-validation-results/basket-validation-results.component';
import { ErrorMessageComponent } from 'ish-shared/components/common/error-message/error-message.component';
import { InfoBoxComponent } from 'ish-shared/components/common/info-box/info-box.component';
Expand All @@ -34,6 +36,7 @@ describe('Checkout Review Component', () => {
MockComponent(AddressComponent),
MockComponent(BasketApprovalInfoComponent),
MockComponent(BasketCostSummaryComponent),
MockComponent(BasketPurchaserComponent),
MockComponent(BasketValidationResultsComponent),
MockComponent(CheckboxComponent),
MockComponent(ContentIncludeComponent),
Expand All @@ -42,6 +45,7 @@ describe('Checkout Review Component', () => {
MockComponent(InfoBoxComponent),
MockComponent(LineItemListComponent),
MockComponent(ModalDialogLinkComponent),
MockDirective(FeatureToggleDirective),
MockDirective(ServerHtmlDirective),
],
imports: [ReactiveFormsModule, TranslateModule.forRoot()],
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<div *ngIf="object">
<ng-container *ngIf="customer$ | async as customer; else companyFromInvoice">
{{ customer.companyName }} {{ customer.companyName2 }}
</ng-container>
<ng-template #companyFromInvoice>
{{ object.invoiceToAddress.companyName1 }} {{ object.invoiceToAddress.companyName2 }}
</ng-template>
<span *ngIf="taxationID" data-testing-id="taxationID">
<br />{{ 'checkout.widget.purchaser.TaxationID' | translate }} {{ taxationID }}
</span>
<p>
{{ userName }}<br />
{{ object.email || object.invoiceToAddress?.email }}
</p>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TranslateModule } from '@ngx-translate/core';
import { of } from 'rxjs';
import { instance, mock, when } from 'ts-mockito';

import { AccountFacade } from 'ish-core/facades/account.facade';
import { Customer } from 'ish-core/models/customer/customer.model';
import { User } from 'ish-core/models/user/user.model';
import { BasketMockData } from 'ish-core/utils/dev/basket-mock-data';

import { BasketPurchaserComponent } from './basket-purchaser.component';

describe('Basket Purchaser Component', () => {
let component: BasketPurchaserComponent;
let fixture: ComponentFixture<BasketPurchaserComponent>;
let element: HTMLElement;
let accountFacade: AccountFacade;

beforeEach(async () => {
accountFacade = mock(AccountFacade);

await TestBed.configureTestingModule({
imports: [TranslateModule.forRoot()],
declarations: [BasketPurchaserComponent],
providers: [{ provide: AccountFacade, useFactory: () => instance(accountFacade) }],
}).compileComponents();
});

beforeEach(() => {
accountFacade = mock(AccountFacade);

fixture = TestBed.createComponent(BasketPurchaserComponent);
component = fixture.componentInstance;
element = fixture.nativeElement;

component.object = BasketMockData.getBasket();

when(accountFacade.user$).thenReturn(of({ firstName: 'Patricia', lastName: 'Miller' } as User));
when(accountFacade.customer$).thenReturn(of({ companyName: 'OilCorp', taxationID: '1234' } as Customer));
});

it('should be created', () => {
expect(component).toBeTruthy();
expect(element).toBeTruthy();
expect(() => fixture.detectChanges()).not.toThrow();
});

it('should display the taxation id of the customer', () => {
fixture.detectChanges();
expect(element.querySelector('[data-testing-id="taxationID"]')).toBeTruthy();
expect(element.querySelector('[data-testing-id="taxationID"]').innerHTML).toContain('1234');
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { first, takeUntil } from 'rxjs/operators';

import { AccountFacade } from 'ish-core/facades/account.facade';
import { Basket } from 'ish-core/models/basket/basket.model';
import { Customer } from 'ish-core/models/customer/customer.model';
import { Order } from 'ish-core/models/order/order.model';
import { User } from 'ish-core/models/user/user.model';
import { whenTruthy } from 'ish-core/utils/operators';

@Component({
selector: 'ish-basket-purchaser',
templateUrl: './basket-purchaser.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BasketPurchaserComponent implements OnInit, OnDestroy {
@Input() object: Basket | Order;

customer$: Observable<Customer>;
user$: Observable<User>;

taxationID: string;
userName: string;

private destroy$ = new Subject();

constructor(private accountFacade: AccountFacade) {}

ngOnInit() {
// default values for anonymous users
this.taxationID = this.object.attributes?.find(attr => attr.name === 'taxationID')?.value as string;
this.userName = `${this.object.invoiceToAddress?.firstName} ${this.object.invoiceToAddress?.lastName}`;

this.customer$ = this.accountFacade.customer$;
this.user$ = this.accountFacade.user$;

// values for registered users
this.customer$.pipe(whenTruthy(), first(), takeUntil(this.destroy$)).subscribe(customer => {
this.taxationID = customer?.taxationID;
});

this.user$.pipe(whenTruthy(), first(), takeUntil(this.destroy$)).subscribe(user => {
this.userName = `${user.firstName} ${user.lastName}`;
});
}

ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
}
2 changes: 2 additions & 0 deletions src/app/shared/shared.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ import { BasketInfoComponent } from './components/basket/basket-info/basket-info
import { BasketItemsSummaryComponent } from './components/basket/basket-items-summary/basket-items-summary.component';
import { BasketPromotionCodeComponent } from './components/basket/basket-promotion-code/basket-promotion-code.component';
import { BasketPromotionComponent } from './components/basket/basket-promotion/basket-promotion.component';
import { BasketPurchaserComponent } from './components/basket/basket-purchaser/basket-purchaser.component';
import { BasketValidationItemsComponent } from './components/basket/basket-validation-items/basket-validation-items.component';
import { BasketValidationProductsComponent } from './components/basket/basket-validation-products/basket-validation-products.component';
import { BasketValidationResultsComponent } from './components/basket/basket-validation-results/basket-validation-results.component';
Expand Down Expand Up @@ -186,6 +187,7 @@ const exportedComponents = [
BasketItemsSummaryComponent,
BasketPromotionCodeComponent,
BasketPromotionComponent,
BasketPurchaserComponent,
BasketShippingAddressWidgetComponent,
BasketValidationResultsComponent,
BreadcrumbComponent,
Expand Down
2 changes: 2 additions & 0 deletions src/assets/i18n/de_DE.json
Original file line number Diff line number Diff line change
Expand Up @@ -658,6 +658,8 @@
"checkout.widget.billing-address.heading": "Rechnungsadresse",
"checkout.widget.payment_method.heading": "Zahlungsart",
"checkout.widget.promotion.discount": "Rabatt",
"checkout.widget.purchaser.TaxationID": "Steuernummer:",
"checkout.widget.purchaser.heading": "Einkäufer",
"checkout.widget.return_to_cart.link": "Zurück zum Warenkorb",
"checkout.widget.security_privacy_policy.link": "<a href=\"{{0}}\" target=\"_blank\">Sicherheits- und Datenschutzhinweise lesen</a>",
"checkout.widget.shipping-address.heading": "Lieferadresse",
Expand Down
2 changes: 2 additions & 0 deletions src/assets/i18n/en_US.json
Original file line number Diff line number Diff line change
Expand Up @@ -660,6 +660,8 @@
"checkout.widget.billing-address.heading": "Invoice Address",
"checkout.widget.payment_method.heading": "Payment Method",
"checkout.widget.promotion.discount": "Discount",
"checkout.widget.purchaser.TaxationID": "Taxation ID:",
"checkout.widget.purchaser.heading": "Purchaser",
"checkout.widget.return_to_cart.link": "Return to Cart",
"checkout.widget.security_privacy_policy.link": "<a href=\"{{0}}\" target=\"_blank\">Read our Security & Privacy Policy</a>",
"checkout.widget.shipping-address.heading": "Shipping Address",
Expand Down
2 changes: 2 additions & 0 deletions src/assets/i18n/fr_FR.json
Original file line number Diff line number Diff line change
Expand Up @@ -660,6 +660,8 @@
"checkout.widget.billing-address.heading": "Adresse de facturation",
"checkout.widget.payment_method.heading": "Mode de paiement",
"checkout.widget.promotion.discount": "Réduction",
"checkout.widget.purchaser.TaxationID": "ID de taxation:",
"checkout.widget.purchaser.heading": "Acheteur",
"checkout.widget.return_to_cart.link": "Retour au panier",
"checkout.widget.security_privacy_policy.link": "<a href=\"{{0}}\" target=\"_blank\">Lire notre Politique de sécurité et de confidentialité</a>",
"checkout.widget.shipping-address.heading": "Adresse de livraison",
Expand Down

1 comment on commit d31ee1b

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Azure Demo Servers are available:

Please sign in to comment.