Skip to content

Commit

Permalink
feat: display fields in checkout and myaccount
Browse files Browse the repository at this point in the history
  • Loading branch information
dhhyi committed Dec 15, 2023
1 parent d5cc3bd commit 024aa24
Show file tree
Hide file tree
Showing 13 changed files with 102 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ <h2>{{ 'approval.detailspage.order_details.heading' | translate }}</h2>
<ish-basket-merchant-message-view [data]="requisition" />
</div>

<ish-basket-custom-fields-view [data]="requisition" />

<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 @@ -13,6 +13,7 @@ import { AddressComponent } from 'ish-shared/components/address/address/address.
import { BasketCostSummaryComponent } from 'ish-shared/components/basket/basket-cost-summary/basket-cost-summary.component';
import { BasketMerchantMessageViewComponent } from 'ish-shared/components/basket/basket-merchant-message-view/basket-merchant-message-view.component';
import { BasketShippingMethodComponent } from 'ish-shared/components/basket/basket-shipping-method/basket-shipping-method.component';
import { BasketCustomFieldsViewComponent } from 'ish-shared/components/checkout/basket-custom-fields-view/basket-custom-fields-view.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 @@ -38,6 +39,7 @@ describe('Requisition Detail Page Component', () => {
declarations: [
MockComponent(AddressComponent),
MockComponent(BasketCostSummaryComponent),
MockComponent(BasketCustomFieldsViewComponent),
MockComponent(BasketMerchantMessageViewComponent),
MockComponent(BasketShippingMethodComponent),
MockComponent(ErrorMessageComponent),
Expand Down Expand Up @@ -80,6 +82,7 @@ describe('Requisition Detail Page Component', () => {
"ish-requisition-summary",
"ish-requisition-cost-center-approval",
"ish-basket-merchant-message-view",
"ish-basket-custom-fields-view",
"ish-info-box",
"ish-address",
"ish-info-box",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,8 @@ <h1>{{ 'account.orderdetails.heading.default' | translate }}</h1>
<ish-basket-merchant-message-view [data]="order" />
</ng-container>

<ish-basket-custom-fields-view [data]="order" />

<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 @@ -10,6 +10,7 @@ import { AddressComponent } from 'ish-shared/components/address/address/address.
import { BasketCostSummaryComponent } from 'ish-shared/components/basket/basket-cost-summary/basket-cost-summary.component';
import { BasketMerchantMessageViewComponent } from 'ish-shared/components/basket/basket-merchant-message-view/basket-merchant-message-view.component';
import { BasketShippingMethodComponent } from 'ish-shared/components/basket/basket-shipping-method/basket-shipping-method.component';
import { BasketCustomFieldsViewComponent } from 'ish-shared/components/checkout/basket-custom-fields-view/basket-custom-fields-view.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 @@ -26,6 +27,7 @@ describe('Account Order Component', () => {
AccountOrderComponent,
MockComponent(AddressComponent),
MockComponent(BasketCostSummaryComponent),
MockComponent(BasketCustomFieldsViewComponent),
MockComponent(BasketMerchantMessageViewComponent),
MockComponent(BasketShippingMethodComponent),
MockComponent(FaIconComponent),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@
</ish-info-box>
</div>

<ish-basket-custom-fields-view [data]="order" />

<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 @@ -10,6 +10,7 @@ import { AddressComponent } from 'ish-shared/components/address/address/address.
import { BasketCostSummaryComponent } from 'ish-shared/components/basket/basket-cost-summary/basket-cost-summary.component';
import { BasketMerchantMessageViewComponent } from 'ish-shared/components/basket/basket-merchant-message-view/basket-merchant-message-view.component';
import { BasketShippingMethodComponent } from 'ish-shared/components/basket/basket-shipping-method/basket-shipping-method.component';
import { BasketCustomFieldsViewComponent } from 'ish-shared/components/checkout/basket-custom-fields-view/basket-custom-fields-view.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 @@ -26,6 +27,7 @@ describe('Checkout Receipt Component', () => {
CheckoutReceiptComponent,
MockComponent(AddressComponent),
MockComponent(BasketCostSummaryComponent),
MockComponent(BasketCustomFieldsViewComponent),
MockComponent(BasketMerchantMessageViewComponent),
MockComponent(BasketShippingMethodComponent),
MockComponent(FaIconComponent),
Expand Down Expand Up @@ -64,6 +66,7 @@ describe('Checkout Receipt Component', () => {
expect(findAllCustomElements(element)).toMatchInlineSnapshot(`
[
"ish-basket-merchant-message-view",
"ish-basket-custom-fields-view",
"ish-info-box",
"ish-address",
"ish-info-box",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,9 @@ <h1 class="d-flex flex-wrap align-items-baseline">
<ish-basket-buyer [object]="basket" editRouterLink="/checkout/shipping" />
</ish-info-box>
</div>

<ish-basket-custom-fields-view [data]="basket" editRouterLink="/basket" />

<div class="row d-flex">
<!-- Invoice Address -->
<ish-info-box
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { BasketCostSummaryComponent } from 'ish-shared/components/basket/basket-
import { BasketMerchantMessageViewComponent } from 'ish-shared/components/basket/basket-merchant-message-view/basket-merchant-message-view.component';
import { BasketShippingMethodComponent } from 'ish-shared/components/basket/basket-shipping-method/basket-shipping-method.component';
import { BasketValidationResultsComponent } from 'ish-shared/components/basket/basket-validation-results/basket-validation-results.component';
import { BasketCustomFieldsViewComponent } from 'ish-shared/components/checkout/basket-custom-fields-view/basket-custom-fields-view.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';
import { ModalDialogLinkComponent } from 'ish-shared/components/common/modal-dialog-link/modal-dialog-link.component';
Expand All @@ -39,6 +40,7 @@ describe('Checkout Review Component', () => {
MockComponent(AddressComponent),
MockComponent(BasketApprovalInfoComponent),
MockComponent(BasketCostSummaryComponent),
MockComponent(BasketCustomFieldsViewComponent),
MockComponent(BasketMerchantMessageViewComponent),
MockComponent(BasketShippingMethodComponent),
MockComponent(BasketValidationResultsComponent),
Expand Down Expand Up @@ -113,6 +115,7 @@ describe('Checkout Review Component', () => {
"ish-error-message",
"ish-basket-validation-results",
"ish-basket-merchant-message-view",
"ish-basket-custom-fields-view",
"ish-info-box",
"ish-address",
"ish-info-box",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<ng-container *ngIf="visible$ | async">
<ish-info-box [editRouterLink]="editRouterLink" heading="checkout.widget.custom_fields" class="infobox-wrapper">
<p>
<ish-custom-fields-view [fields]="fields$ | async" />
</p>
</ish-info-box>
</ng-container>
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { EMPTY } from 'rxjs';
import { instance, mock, when } from 'ts-mockito';

import { AppFacade } from 'ish-core/facades/app.facade';

import { BasketCustomFieldsViewComponent } from './basket-custom-fields-view.component';

describe('Basket Custom Fields View Component', () => {
let component: BasketCustomFieldsViewComponent;
let fixture: ComponentFixture<BasketCustomFieldsViewComponent>;
let element: HTMLElement;

beforeEach(async () => {
const appFacade = mock(AppFacade);
when(appFacade.customFieldsForScope$('Basket')).thenReturn(EMPTY);

await TestBed.configureTestingModule({
declarations: [BasketCustomFieldsViewComponent],
providers: [{ provide: AppFacade, useFactory: () => instance(appFacade) }],
}).compileComponents();
});

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

it('should be created', () => {
expect(component).toBeTruthy();
expect(element).toBeTruthy();
expect(() => fixture.detectChanges()).not.toThrow();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
import { Observable, ReplaySubject, combineLatest, map } from 'rxjs';

import { AppFacade } from 'ish-core/facades/app.facade';
import { CustomFields, CustomFieldsComponentInput } from 'ish-core/models/custom-field/custom-field.model';

@Component({
selector: 'ish-basket-custom-fields-view',
templateUrl: './basket-custom-fields-view.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BasketCustomFieldsViewComponent implements OnInit {
@Input() set data(val: { customFields?: CustomFields }) {
this._customFields.next(val.customFields || {});
}
@Input() editRouterLink: string;

private _customFields = new ReplaySubject<CustomFields>(1);

fields$: Observable<CustomFieldsComponentInput[]>;
visible$: Observable<boolean>;

constructor(private appFacade: AppFacade) {}

ngOnInit(): void {
this.fields$ = combineLatest([
this._customFields.asObservable(),
this.appFacade.customFieldsForScope$('Basket'),
]).pipe(
map(([customFields, customFieldsForScope]) =>
customFieldsForScope.map(({ name, editable }) => ({ name, value: customFields[name], editable }))
)
);

this.visible$ = this.fields$.pipe(map(fields => fields.some(field => field.value)));
}
}
2 changes: 2 additions & 0 deletions src/app/shared/shared.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ import { BasketValidationItemsComponent } from './components/basket/basket-valid
import { BasketValidationProductsComponent } from './components/basket/basket-validation-products/basket-validation-products.component';
import { BasketValidationResultsComponent } from './components/basket/basket-validation-results/basket-validation-results.component';
import { MiniBasketContentComponent } from './components/basket/mini-basket-content/mini-basket-content.component';
import { BasketCustomFieldsViewComponent } from './components/checkout/basket-custom-fields-view/basket-custom-fields-view.component';
import { BasketInvoiceAddressWidgetComponent } from './components/checkout/basket-invoice-address-widget/basket-invoice-address-widget.component';
import { BasketShippingAddressWidgetComponent } from './components/checkout/basket-shipping-address-widget/basket-shipping-address-widget.component';
import { AccordionItemComponent } from './components/common/accordion-item/accordion-item.component';
Expand Down Expand Up @@ -301,6 +302,7 @@ const exportedComponents = [
CustomFieldsFormlyComponent,
LineItemCustomFieldsComponent,
CustomFieldsViewComponent,
BasketCustomFieldsViewComponent,
PromotionDetailsComponent,
PromotionRemoveComponent,
SearchBoxComponent,
Expand Down
1 change: 1 addition & 0 deletions src/assets/i18n/en_US.json
Original file line number Diff line number Diff line change
Expand Up @@ -816,6 +816,7 @@
"checkout.widget.buyer.costcenter": "Cost Center",
"checkout.widget.buyer.heading": "Buyer",
"checkout.widget.buyer.orderReferenceId": "Customer Order ID",
"checkout.widget.custom_fields": "Custom Fields",
"checkout.widget.message_to_merchant": "Message to Merchant",
"checkout.widget.payment_method.heading": "Payment Method",
"checkout.widget.promotion.discount": "Discount",
Expand Down

0 comments on commit 024aa24

Please sign in to comment.