@colijnit/transaction 12.1.153 → 12.1.154

package/lib/cache/service/business-object-cache-manager.service.d.ts

@@ -52,6 +52,9 @@ export declare class BusinessObjectCacheManagerService implements OnDestroy {
     getSingleCacheItem<T extends BusinessObject>(key: {
         new (): T;
     }, id?: BusinessObjectIDType): CacheField<T>;
+    deleteSingleCacheItem<T extends BusinessObject>(key: {
+        new (): T;
+    }, id?: BusinessObjectIDType): void;
     getSelectMultipleParameterCacheItem<T extends BusinessObject>(key: any): ParameterCacheField<T[]>;
     getSelectSingleParameterCacheItem<T>(key: any): ParameterCacheField<T>;
     private _reset;

package/lib/cache/service/select-single-cache.service.d.ts

@@ -1,12 +1,12 @@
-import { BusinessObjectCacheManagerService } from "./business-object-cache-manager.service";
-import { BusinessObject } from "@colijnit/ioneconnector/build/model/business-object";
-import { CacheField } from "../cache-field";
-import { BusinessObjectIDType } from "@colijnit/ioneconnector/build/type/business-object-id-type";
+import { BusinessObjectCacheManagerService } from './business-object-cache-manager.service';
+import { BusinessObject } from '@colijnit/ioneconnector/build/model/business-object';
+import { CacheField } from '../cache-field';
+import { BusinessObjectIDType } from '@colijnit/ioneconnector/build/type/business-object-id-type';
 export declare class SelectSingleCacheService {
     private _boCacheManager;
     constructor(_boCacheManager: BusinessObjectCacheManagerService);
     requestCache<T extends BusinessObject>(clazz: {
         new (): T;
-    }, sourceId: BusinessObjectIDType, loadFunction: () => Promise<T>): CacheField<T>;
+    }, sourceId: BusinessObjectIDType, loadFunction: () => Promise<T>, reload?: boolean): CacheField<T>;
     private _createCacheItem;
 }

package/lib/component/checkout/checkout.component.d.ts

@@ -30,6 +30,10 @@ export declare class CheckoutComponent implements OnInit, OnDestroy {
     checkoutDelivery: CheckoutOverviewDeliveryEditComponent;
     checkoutPayment: PaymentComponent;
     newTransaction: boolean;
+    /**
+     * When set, this is the relation be used for the checkout
+     */
+    relationNr: number;
     sellerId: number;
     transactionType: TransactionKind;
     showCreateTransactionButton: boolean;

package/lib/component/deposit-payment/style/_layout.scss

@@ -2,11 +2,13 @@
   .co-deposit-payment {
     font-family: $tp-down-payment-font-family;
     font-size: $tp-down-payment-font-size;
+    font-weight: 600;
     display: flex;
     flex-direction: column;
     row-gap: $tp-down-payment-row-gap;
     .co-payment-tile {
       height: 100%;
+      min-width: 0;
     }
     .co-tile {
       .co-tile-wrapper {
@@ -15,6 +17,7 @@
         min-height: initial;
         width: auto;
         height: auto;
+        padding: 0;
         .co-tile-select-wrapper {
           display: none;
         }
@@ -57,7 +60,6 @@
     .down-payment-amount-wrapper {
       display: flex;
       flex-direction: row;
-      width: 100%;
       justify-content: space-between;
       .down-payment-amount {
         font-size: $tp-down-payment-amount-font-size;

package/lib/component/deposit-payment/style/_material-definition.scss

@@ -1,6 +1,6 @@
 $tp-down-payment-font-family: $tp-font-family !default;
 $tp-down-payment-font-size: $tp-font-size !default;
-$tp-down-payment-row-gap: 20px !default;
+$tp-down-payment-row-gap: 15px !default;
 $tp-down-payment-payments-height: 50px !default;
 $tp-down-payment-payments-padding: 0 !default;
 $tp-down-payment-payments-background-color: white !default;
@@ -14,7 +14,7 @@ $tp-down-payment-amount-row-gap: 10px !default;
 $tp-down-payment-amount-spacer-width: $tp-down-payment-amount-row-gap !default;
 $tp-down-payment-date-font-size: $tp-font-size !default;
 $tp-down-payment-date-font-weight: normal !default;
-$tp-down-payment-payment-padding: 0 20px !default;
+$tp-down-payment-payment-padding: 0 15px !default;
 $tp-down-payment-payment-border-style: solid !default;
 $tp-down-payment-payment-border-width: 0 0 1px 0 !default;
 $tp-down-payment-payment-border-color: $tp-color-border !default;

package/lib/component/payment/payment.component.d.ts

@@ -7,11 +7,13 @@ import { SharedService } from '../../service/shared.service';
 import { PaymentMethod } from '@colijnit/transactionapi/build/model/payment-method.bo';
 import { PaymentViewmodel } from '../../model/payment.viewmodel';
 import { TransactionEventService } from '../../service/transaction-event.service';
+import { IconCacheService } from "../../service/icon-cache.service";
 export declare class PaymentComponent implements OnInit, OnDestroy {
     private _transactionService;
     private _sharedService;
     private _paymentService;
     private _transactionEventService;
+    iconCacheService: IconCacheService;
     readonly icons: typeof Icon;
     transId: number;
     transactionUuid: string;
@@ -33,6 +35,7 @@ export declare class PaymentComponent implements OnInit, OnDestroy {
     qrCodeImage: string;
     showLoader: boolean;
     amountToPay: number;
+    depositAmount: number;
     statusMessage: string;
     private _amount;
     private _paymentStatusInterval;
@@ -41,7 +44,7 @@ export declare class PaymentComponent implements OnInit, OnDestroy {
     private _paymentStatusPollIntervalCount;
     private _paymentResult;
     private _subs;
-    constructor(_transactionService: TransactionService, _sharedService: SharedService, _paymentService: PaymentService, _transactionEventService: TransactionEventService);
+    constructor(_transactionService: TransactionService, _sharedService: SharedService, _paymentService: PaymentService, _transactionEventService: TransactionEventService, iconCacheService: IconCacheService);
     ngOnInit(): Promise<void>;
     ngOnDestroy(): void;
     paymentMethodSelected(method: PaymentMethod, index: number): void;

package/lib/component/payment/style/_layout.scss

@@ -4,19 +4,35 @@
   .co-payment {
     font-family: $tp-payment-font-family;
     font-size: $tp-payment-font-size;
+    .co-tile {
+      &.selected {
+        transform: none;
+      }
+    }
     .co-tile-wrapper {
-      min-width: $tp-payment-tile-width;
-      min-height: $tp-payment-tile-height;
-      width: $tp-payment-tile-width;
-      height: $tp-payment-tile-height;
+      min-width: 100%;
+      min-height: 50px;
+      width: 100%;
+      height: 50px;
     }
-    .payment-wrapper {
-      padding: $tp-payment-padding;
+    .co-tile-select-wrapper {
+      display: none;
     }
-    .payment-wrapper, .payment-cash-register-wrapper {
+    .payment-wrapper {
       display: flex;
       flex-direction: column;
+      row-gap: 30px;
+    }
+    .payment-methods-wrapper, .payment-cash-register-wrapper {
+      display: flex;
       row-gap: $tp-payment-row-gap;
+      flex: 1;
+      flex-direction: column;
+    }
+    .payment-methods-register-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: $tp-payment-row-gap;
     }
     .payment-methods-header {
       display: flex;
@@ -32,12 +48,11 @@
     }
     .payment-methods {
       position: relative;
-      min-height: 50px;
       display: flex;
       flex-direction: row;
       column-gap: $tp-payment-methods-column-gap;
       row-gap: $tp-payment-methods-row-gap;
-      flex-wrap: wrap;
+      max-width: 620px;
       .loader {
         position: absolute;
         top: 50%;
@@ -49,30 +64,9 @@
       display: grid;
       grid-template-columns: auto auto;
       grid-template-rows: auto auto auto;
-      row-gap: 10px;
-      column-gap: 10px;
-    }
-    .payment-to-pay {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      row-gap: $tp-payment-row-gap;
-      grid-column: 1 / 1;
-      grid-row: 1 / 1;
+      row-gap: 20px;
+      column-gap: 20px;
     }
-    .payment-amount {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: $tp-payment-amount-height;
-      border: $tp-payment-amount-border;
-      font-family: $tp-payment-amount-font-family;
-      font-size: $tp-payment-amount-font-size;
-      font-weight: $tp-payment-amount-font-weight;
-      border-radius: 5px;
-      width: 100%;
-    }
-
     .payment-deposit {
       grid-column: 1 / 1;
       grid-row: 2 / 2;
@@ -80,10 +74,34 @@
         display: none;
       }
     }
-
+    .payment-to-pay-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      .payment-header-title, .payment-total-pay {
+        font-size: 26px;
+        font-weight: bold;
+      }
+    }
+    .co-payment-to-pay {
+      width: 100%;
+    }
+    .payment-input-button {
+      display: flex;
+      align-items: center;
+      row-gap: 10px;
+      column-gap: 10px;
+    }
+    .payment-to-pay-total {
+      display: flex;
+      flex-direction: column;
+      row-gap: 20px;
+      column-gap: 20px;
+    }
     .payment-to-pay-button {
-      grid-column: 1 / 1;
-      grid-row: 3 / 3;
+      width: 55px;
+      height: 55px;
+      cursor: pointer;
       .payment-error-message {
         margin: $tp-payment-error-margin;
         font-family: $tp-payment-error-font-family;
@@ -93,6 +111,17 @@
       .co-button {
         justify-content: center;
         border-radius: 5px;
+        background-color: #f1fcff;
+        filter: brightness(1);
+        height: 55px;
+        width: 55px;
+        border: 2px solid #0084de;
+        .co-icon {
+          height: 60%;
+          svg {
+            fill: #0084de;
+          }
+        }
       }
       &.no-deposit {
         grid-row: 2 / 2;

package/lib/component/payment/style/_material-definition.scss

@@ -5,7 +5,7 @@ $tp-payment-tile-height: $tp-tile-min-height !default;
 $tp-payment-padding: 10px !default;
 $tp-payment-header-font-family: $tp-font-family !default;
 $tp-payment-header-font-size: $tp-font-size !default;
-$tp-payment-header-font-weight: bold !default;
+$tp-payment-header-font-weight: 600 !default;
 $tp-payment-header-extra-font-color: $tp-color-colijn-orange !default;
 $tp-payment-row-gap: 20px !default;
 $tp-payment-methods-column-gap: 5px !default;

package/lib/component/payment/style/_theme.scss

@@ -11,9 +11,6 @@
       .payment-error-message {
         color: $tp-payment-error-font-color;
       }
-      .co-button {
-        background-color: $tp-color-colijn-orange;
-      }
     }
   }
 }

package/lib/component/payment-tile/style/_layout.scss

@@ -3,20 +3,22 @@
 @include export-module('co-payment-tile-layout') {
   .co-payment-tile {
     display: flex;
+    min-width: 120px;
     .payment-tile-wrapper {
       display: flex;
-      flex-direction: column;
+      flex-direction: row;
       width: 100%;
       height: 100%;
       align-items: center;
-      justify-content: center;
+      justify-content: flex-start;
+      gap: 15px;
     }
     .payment-tile-description {
     }
     .payment-tile-icon, .payment-tile-image {
       display: block;
       height: 80%;
-      width: 50%;
+      width: 30px;
       object-fit: contain;
     }
   }

package/lib/component/payment-to-pay/style/_layout.scss

@@ -5,21 +5,22 @@
       display: flex;
       flex-direction: column;
       align-items: flex-start;
+      justify-content: space-between;
+      border: $tp-payment-to-pay-amount-border;
       row-gap: $tp-payment-to-pay-row-gap;
-      grid-column: 1 / 1;
-      grid-row: 1 / 1;
+      height: $tp-payment-to-pay-amount-height;
+      padding: 5px;
+      border-radius: 5px;
     }
 
     .payment-amount {
       display: flex;
       align-items: center;
       justify-content: center;
-      height: $tp-payment-to-pay-amount-height;
-      border: $tp-payment-to-pay-amount-border;
       font-family: $tp-payment-to-pay-amount-font-family;
       font-size: $tp-payment-to-pay-amount-font-size;
       font-weight: $tp-payment-to-pay-amount-font-weight;
-      border-radius: 5px;
+      line-height: $tp-payment-to-pay-amount-font-size;
       width: 100%;
     }
   }

package/lib/component/payment-to-pay/style/_material-definition.scss

@@ -1,6 +1,6 @@
-$tp-payment-to-pay-row-gap: 20px !default;
-$tp-payment-to-pay-amount-height: 60px !default;
-$tp-payment-to-pay-amount-border: 1px solid !default;
+$tp-payment-to-pay-row-gap: 0px !default;
+$tp-payment-to-pay-amount-height: 55px !default;
+$tp-payment-to-pay-amount-border: 2px solid #0084de !default;
 $tp-payment-to-pay-amount-font-family: $tp-font-family !default;
-$tp-payment-to-pay-amount-font-size: 32px !default;
+$tp-payment-to-pay-amount-font-size: 28px !default;
 $tp-payment-to-pay-amount-font-weight: bold !default;

package/lib/component/stepper/style/_material-definition.scss

@@ -18,11 +18,11 @@ $tp-co-stepper-step-incomplete-description-color: rgba(0, 0, 0, 0.3) !default;
 $tp-co-stepper-step-incomplete-description-font-weight: normal !default;
 
 $tp-co-stepper-step-title-padding: 30px !default;
-$tp-co-stepper-step-title-column-gap: 20px !default;
+$tp-co-stepper-step-title-column-gap: 10px !default;
 $tp-co-stepper-step-title-font-family: $tp-font-family !default;
-$tp-co-stepper-step-title-font-size: 28px !default;
-$tp-co-stepper-step-title-font-weight: bold !default;
-$tp-co-stepper-step-title-icon-size: 30px !default;
+$tp-co-stepper-step-title-font-size: 20px !default;
+$tp-co-stepper-step-title-font-weight: 600 !default;
+$tp-co-stepper-step-title-icon-size: 17px !default;
 
 $tp-co-stepper-step-button-color: $tp-color-action !default;
 $tp-co-stepper-step-button-background-color: $tp-default-background-accent !default;

package/lib/component/transaction/style/_layout.scss

@@ -26,7 +26,7 @@
       justify-content: flex-end;
       align-items: center;
       padding: $tp-transaction-transaction-lines-header-padding;
-      flex-wrap: wrap-reverse;
+      flex-wrap: nowrap;
       .transaction-lines-header-item {
         flex-basis: 33%;
         &.right {

package/lib/component/transaction-header/transaction-header-payment/style/_layout.scss

@@ -94,5 +94,22 @@
         background: $tp-co-transaction-header-payment-button-wrapper-border-color;
       }
     }
+    .payment-dialog {
+      .payment-wrapper-popup-title {
+        display: flex;
+        align-items: center;
+        grid-column-gap: 10px;
+        column-gap: 10px;
+        margin-bottom: 20px;
+        .co-icon {
+          height: 20px;
+          width: 20px;
+          margin: 0;
+        }
+        .co-dialog-header-title {
+          margin: 0;
+        }
+      }
+    }
   }
 }

package/lib/component/transaction-line-fields/transaction-line-delivery-date-button.component.d.ts

@@ -18,10 +18,10 @@ export declare class TransactionLineDeliveryDateButtonComponent extends Transact
     protected changeDetector: ChangeDetectorRef;
     private _overlayService;
     readonly icons: typeof Icon;
-    commitWhenDateSelected: boolean;
-    showCalender: boolean;
     parentComponent: ElementRef;
     showClass(): boolean;
+    commitWhenDateSelected: boolean;
+    showCalender: boolean;
     constructor(transactionEventService: TransactionEventService, service: TransactionService, iconCacheService: IconCacheService, transactionScreenConfigurationService: TransactionScreenConfigurationService, dictionaryService: DictionaryService, imageService: TransactionImageService, changeDetector: ChangeDetectorRef, _overlayService: OverlayService);
     private _calendarPopupComponentRef;
     handleShowHideClick(): void;

package/lib/component/transaction-line-fields/transaction-line-supplier-delivery-date-button.component.d.ts

@@ -19,8 +19,13 @@ export declare class TransactionLineSupplierDeliveryDateButtonComponent extends
     private _overlayService;
     private _elementRef;
     readonly icons: typeof Icon;
+    parentComponent: ElementRef;
     showClass(): boolean;
+    showCalender: boolean;
     private _calendarPopupComponentRef;
     constructor(transactionEventService: TransactionEventService, service: TransactionService, iconCacheService: IconCacheService, transactionScreenConfigurationService: TransactionScreenConfigurationService, dictionaryService: DictionaryService, imageService: TransactionImageService, changeDetector: ChangeDetectorRef, _overlayService: OverlayService, _elementRef: ElementRef);
-    handleShowDialog(event: MouseEvent): void;
+    handleShowHideClick(): void;
+    private _showPopup;
+    private _handleDateChanged;
+    private _hidePopup;
 }

package/lib/service/transaction-base.service.d.ts

@@ -17,6 +17,7 @@ import { GetPurchasePortalLine } from '@colijnit/transactionapi/build/model/get-
 import { RefTransaction } from '@colijnit/transactionapi/build/model/ref-transaction.bo';
 import { TransactionSearchViewRequest } from '@colijnit/transactionapi/build/model/transaction-search-view-request';
 import { TransactionSearchResult } from '../model/transaction-search-result';
+import { RelationKind } from '@colijnit/articleapi/build/enum/relation-kind.enum';
 import { TransactionTypeCategory } from '../enum/transaction-type-category.enum';
 import { Icon } from '../enum/icon.enum';
 import { BaseModuleService } from '@colijnit/corecomponents_v12';
@@ -101,6 +102,7 @@ export declare class TransactionBaseService extends BaseModuleService {
     constructor(optionsService: TransactionSettingsService, dialogService: DialogService, connector: TransactionConnectorService, sharedService: SharedService, articleConnector: ArticleConnectorService, dictionaryService: DictionaryService, transactionEventService: TransactionEventService, relationService: RelationService, screenConfigService: TransactionScreenConfigurationService);
     init(options: any, resetCurrentTransaction?: boolean): Promise<void>;
     createNewRelation(): void;
+    setRelationOnTransaction(relationNr: number, relationKind: RelationKind): Promise<void>;
     resetCurrentTransaction(): void;
     saveTransaction(rememberTransaction?: boolean): Promise<TransactionInfoResponse>;
     commit(): Promise<boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/transaction",
-  "version": "12.1.153",
+  "version": "12.1.154",
   "description": "Colijn IT transaction module for Angular 12",
   "repository": "npm/npm",
   "author": "Colijn IT",