Skip to content

Commit

Permalink
fix: change and display an anonymous user`s email during the checkout…
Browse files Browse the repository at this point in the history
… process (#1312)
  • Loading branch information
SGrueber committed Nov 21, 2022
1 parent 5ba41ec commit b2c265b
Show file tree
Hide file tree
Showing 20 changed files with 191 additions and 56 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ <h2>{{ 'approval.detailspage.order_details.heading' | translate }}</h2>
<div class="row d-flex">
<!-- Invoice Address -->
<ish-info-box heading="checkout.widget.billing-address.heading" class="infobox-wrapper col-md-6">
<ish-address [address]="requisition.invoiceToAddress"></ish-address>
<ish-address [address]="requisition.invoiceToAddress" [displayEmail]="true"></ish-address>
</ish-info-box>

<!-- Payment Method -->
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,10 @@ <h3 class="subheading">{{ 'checkout.addresses.billing_address.heading' | transla
</ish-formly-address-form>

<!-- Taxation ID and Email address input field-->
<formly-form [form]="attributesForm" [fields]="attributesFields"></formly-form>
<ish-formly-address-extension-form
[form]="attributesForm"
[businessCustomer]="isBusinessCustomer"
></ish-formly-address-extension-form>

<!-- Shipping Address Selection Radio boxes-->
<div class="section">
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 } from 'ng-mocks';

import { FeatureToggleModule } from 'ish-core/feature-toggle.module';
import { FormlyAddressExtensionFormComponent } from 'ish-shared/formly-address-forms/components/formly-address-extension-form/formly-address-extension-form.component';
import { FormlyAddressFormComponent } from 'ish-shared/formly-address-forms/components/formly-address-form/formly-address-form.component';
import { FormlyTestingModule } from 'ish-shared/formly/dev/testing/formly-testing.module';

Expand All @@ -18,7 +19,11 @@ describe('Checkout Address Anonymous Form Component', () => {

beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [CheckoutAddressAnonymousFormComponent, MockComponent(FormlyAddressFormComponent)],
declarations: [
CheckoutAddressAnonymousFormComponent,
MockComponent(FormlyAddressExtensionFormComponent),
MockComponent(FormlyAddressFormComponent),
],
imports: [
FeatureToggleModule.forTesting('businessCustomerRegistration'),
FormlyTestingModule.withPresetMocks(['taxationID']),
Expand All @@ -43,11 +48,6 @@ describe('Checkout Address Anonymous Form Component', () => {
expect(() => fixture.detectChanges()).not.toThrow();
});

it('should set input field for taxation-id, when businessCustomerRegistration feature is enabled', () => {
fixture.detectChanges();
expect(component.parentForm.get('additionalAddressAttributes').value).toContainKey('taxationID');
});

it('should add shipping address form to parent form, when shipOption is set to shipToDifferentAddress', () => {
fixture.detectChanges();

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ export class CheckoutAddressAnonymousFormComponent implements OnInit, OnDestroy
attributesForm: FormGroup = new FormGroup({});
shipOptionForm: FormGroup = new FormGroup({});

attributesFields: FormlyFieldConfig[];
shipOptionFields: FormlyFieldConfig[];

isBusinessCustomer = false;
Expand All @@ -33,28 +32,7 @@ export class CheckoutAddressAnonymousFormComponent implements OnInit, OnDestroy
constructor(private featureToggleService: FeatureToggleService) {}

ngOnInit() {
this.attributesFields = [
{
type: 'ish-fieldset-field',
fieldGroup: [
{
key: 'email',
type: 'ish-email-field',
templateOptions: {
required: true,
label: 'checkout.addresses.email.label',
customDescription: {
key: 'account.address.email.hint',
},
postWrappers: [{ wrapper: 'description', index: -1 }],
},
},
],
},
];

if (this.featureToggleService.enabled('businessCustomerRegistration')) {
this.attributesFields = [this.createTaxationIDField(), ...this.attributesFields];
this.isBusinessCustomer = true;
}

Expand Down Expand Up @@ -93,17 +71,6 @@ export class CheckoutAddressAnonymousFormComponent implements OnInit, OnDestroy
});
}

private createTaxationIDField(): FormlyFieldConfig {
return {
type: 'ish-fieldset-field',
fieldGroup: [
{
type: '#taxationID',
},
],
};
}

ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<div class="row d-flex">
<!-- Invoice Address -->
<ish-info-box heading="checkout.widget.billing-address.heading" class="infobox-wrapper col-md-6">
<ish-address [address]="order.invoiceToAddress"></ish-address>
<ish-address [address]="order.invoiceToAddress" [displayEmail]="true"></ish-address>
</ish-info-box>

<!-- Shipping Address -->
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ <h1 class="d-flex flex-wrap align-items-baseline">
editRouterLink="/checkout/address"
class="infobox-wrapper col-md-6"
>
<ish-address [address]="basket.invoiceToAddress"></ish-address>
<ish-address [address]="basket.invoiceToAddress" [displayEmail]="true"></ish-address>
</ish-info-box>

<!-- Shipping Address -->
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<h5 class="float-left">{{ 'checkout.address.billing.label' | translate }}</h5>
</div>
<div data-testing-id="address-summary-invoice-to-address">
<ish-address [address]="basket.invoiceToAddress"></ish-address>
<ish-address [address]="basket.invoiceToAddress" [displayEmail]="true"></ish-address>
</div>

<!-- Shipping Address -->
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ <h2>{{ 'checkout.address.billing.label' | translate }}</h2>
</a>

<!-- display invoice address -->
<ish-address [address]="address"></ish-address>
<ish-address [address]="address" [displayEmail]="true"></ish-address>
</div>
<p *ngIf="!address && showErrors" class="text-danger">
{{ 'checkout.addresses.no_Selection.invoice.error' | translate }}
Expand All @@ -28,7 +28,7 @@ <h2>{{ 'checkout.address.billing.label' | translate }}</h2>
</ng-container>

<!-- Add a new Invoice to address -->
<div class="row" *ngIf="collapseChange | async">
<div class="row" *ngIf="(collapseChange | async) && (isLoggedIn$ | async)">
<button
data-testing-id="create-invoice-address-link"
class="btn btn-link"
Expand All @@ -45,6 +45,7 @@ <h2>{{ 'checkout.address.billing.label' | translate }}</h2>
<ish-formly-customer-address-form
[address]="editAddress"
[resetForm]="collapseChange | async"
[extension]="(isLoggedIn$ | async) === false"
(save)="saveAddress($event)"
(cancel)="cancelEditAddress()"
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ describe('Basket Invoice Address Widget Component', () => {

accountFacade = mock(AccountFacade);
when(accountFacade.addresses$()).thenReturn(EMPTY);
when(accountFacade.isLoggedIn$).thenReturn(of(true));

await TestBed.configureTestingModule({
imports: [FormlyTestingModule, TranslateModule.forRoot()],
Expand Down Expand Up @@ -160,11 +161,11 @@ describe('Basket Invoice Address Widget Component', () => {

component.addresses$.subscribe(addrs => {
expect(addrs.map(add => add.id)).toMatchInlineSnapshot(`
Array [
"3",
"4",
]
`);
Array [
"3",
"4",
]
`);
done();
});
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export class BasketInvoiceAddressWidgetComponent implements OnInit, OnDestroy {
invoiceAddress$: Observable<Address>;
addresses$: Observable<Address[]>;
customerAddresses$: Observable<Address[]>;
isLoggedIn$: Observable<boolean>;

form = new UntypedFormGroup({});
fields: FormlyFieldConfig[];
Expand Down Expand Up @@ -64,6 +65,7 @@ export class BasketInvoiceAddressWidgetComponent implements OnInit, OnDestroy {
addresses?.filter(address => address.invoiceToAddress).filter(address => address.id !== invoiceAddress?.id)
)
);
this.isLoggedIn$ = this.accountFacade.isLoggedIn$;

this.fields = [
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ <h2>{{ 'checkout.address.shipping.label' | translate }}</h2>
</ng-container>

<!-- Add a new Shipping to address -->
<div *ngIf="collapseChange | async" class="row">
<div *ngIf="displayAddAddressLink$ | async" class="row">
<button
data-testing-id="create-shipping-address-link"
class="btn btn-link"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,13 @@ describe('Basket Shipping Address Widget Component', () => {

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

when(checkoutFacade.basket$).thenReturn(EMPTY);
when(checkoutFacade.basketShippingAddress$).thenReturn(EMPTY);
when(checkoutFacade.basketInvoiceAndShippingAddressEqual$).thenReturn(of(false));

accountFacade = mock(AccountFacade);
when(accountFacade.isLoggedIn$).thenReturn(of(true));
when(accountFacade.addresses$()).thenReturn(EMPTY);

await TestBed.configureTestingModule({
Expand Down Expand Up @@ -74,6 +76,18 @@ describe('Basket Shipping Address Widget Component', () => {
`);
});

it('should not render create link if an anonymous user has different sinvoice and shipping address', () => {
when(accountFacade.isLoggedIn$).thenReturn(of(false));

fixture.detectChanges();

expect(findAllDataTestingIDs(fixture)).toMatchInlineSnapshot(`
Array [
"shipping-address-form",
]
`);
});

describe('with shipping address on basket', () => {
beforeEach(() => {
const address = BasketMockData.getAddress();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export class BasketShippingAddressWidgetComponent implements OnInit, OnDestroy {
shippingAddress$: Observable<Address>;
addresses$: Observable<Address[]>;
customerAddresses$: Observable<Address[]>;
displayAddAddressLink$: Observable<boolean>;

basketInvoiceAndShippingAddressEqual$: Observable<boolean>;
basketShippingAddressDeletable$: Observable<boolean>;
Expand Down Expand Up @@ -75,6 +76,12 @@ export class BasketShippingAddressWidgetComponent implements OnInit, OnDestroy {
)
);

this.displayAddAddressLink$ = combineLatest([
this.collapseChange,
this.accountFacade.isLoggedIn$,
this.basketInvoiceAndShippingAddressEqual$,
]).pipe(map(([collapseChange, loggedIn, addressesEqual]) => collapseChange && (loggedIn || addressesEqual)));

this.fields = [
{
key: 'id',
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormBuilder } from '@angular/forms';

import { FormlyTestingModule } from 'ish-shared/formly/dev/testing/formly-testing.module';

import { FormlyAddressExtensionFormComponent } from './formly-address-extension-form.component';

describe('Formly Address Extension Form Component', () => {
let component: FormlyAddressExtensionFormComponent;
let fixture: ComponentFixture<FormlyAddressExtensionFormComponent>;
let element: HTMLElement;
let fb: FormBuilder;

beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [FormlyAddressExtensionFormComponent],
imports: [FormlyTestingModule.withPresetMocks(['taxationID'])],
}).compileComponents();
});

beforeEach(() => {
fixture = TestBed.createComponent(FormlyAddressExtensionFormComponent);
component = fixture.componentInstance;
element = fixture.nativeElement;

fb = TestBed.inject(FormBuilder);

component.form = fb.group({});
});

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

it('should always set input field for email', () => {
fixture.detectChanges();
expect(component.form.value).toContainKey('email');
});

it('should set input field for taxation-id, when businessCustomerRegistration feature is enabled', () => {
component.businessCustomer = true;
fixture.detectChanges();
expect(component.form.value).toContainKey('taxationID');
});

it('should not set input field for taxation-id, when businessCustomerRegistration feature is disabled', () => {
component.businessCustomer = false;
fixture.detectChanges();
expect(component.form.value).not.toContainKey('taxationID');
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormlyFieldConfig } from '@ngx-formly/core';

/**
* Sub form with additional fields like email address and taxation id to extend the anonymous invoice address form.
*/
@Component({
selector: 'ish-formly-address-extension-form',
templateUrl: './formly-address-extension-form.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FormlyAddressExtensionFormComponent implements OnInit {
@Input() form: FormGroup;
@Input() businessCustomer: boolean;
@Input() model: Partial<{ email: string; taxationId: string }> = {}; // model with data for the update mode.

fields: FormlyFieldConfig[];

ngOnInit() {
this.fields = [
{
type: 'ish-fieldset-field',
fieldGroup: [
{
key: 'email',
type: 'ish-email-field',
templateOptions: {
required: true,
label: 'checkout.addresses.email.label',
customDescription: {
key: 'account.address.email.hint',
},
postWrappers: [{ wrapper: 'description', index: -1 }],
},
},
],
},
];
if (this.businessCustomer) {
this.fields = [this.createTaxationIDField(), ...this.fields];
}
}

private createTaxationIDField(): FormlyFieldConfig {
return {
type: 'ish-fieldset-field',
fieldGroup: [
{
type: '#taxationID',
},
],
};
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,12 @@
[prefilledAddress]="address"
></ish-formly-address-form>

<ish-formly-address-extension-form
*ngIf="extension"
[form]="extensionForm"
[model]="extensionModel"
></ish-formly-address-extension-form>

<div class="row">
<div class="offset-md-4 col-md-8 offset-lg-0 col-lg-12 offset-lg-4 col-xl-8">
<button [disabled]="formDisabled" type="submit" class="btn btn-primary">
Expand Down
Loading

0 comments on commit b2c265b

Please sign in to comment.