fix: UI fixes for cost summary

intershop · Sep 19, 2024 · 52d05fb · 52d05fb
1 parent 6a1da0a
commit 52d05fb
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 44 deletions.
diff --git a/src/app/pages/account-recurring-order/account-recurring-order-page.component.html b/src/app/pages/account-recurring-order/account-recurring-order-page.component.html
@@ -37,25 +37,23 @@ <h1>{{ 'account.recurring_order.heading' | translate }}</h1>
         <dd class="col-6" data-testing-id="rec-order-number">{{ recurringOrder.number }}</dd>
       </dl>
 
-      <dl class="row dl-horizontal dl-separator">
+      <dl *ngIf="recurringOrder.approvalStatuses" class="row dl-horizontal dl-separator">
         <dt class="col-6">{{ 'account.recurring_order.details.requisition_number.label' | translate }}</dt>
         <dd class="col-6">
           <a [routerLink]="['/account/requisitions/buyer', recurringOrder.id, { status: 'APPROVED' }]">{{
             recurringOrder.number
           }}</a
           ><br />
-          <ng-container *ngIf="recurringOrder.approvalStatuses">
-            (<ng-container *ngFor="let approval of recurringOrder.approvalStatuses; let last = last"
-              >{{
-                'account.recurring_order.details.approved.text'
-                  | translate
-                    : {
-                        name: approval.approver.firstName + ' ' + approval.approver.lastName,
-                        date: approval.approvalDate | ishDate : 'shortDate'
-                      }
-              }}<span *ngIf="!last">, </span></ng-container
-            >)</ng-container
-          >
+          (<ng-container *ngFor="let approval of recurringOrder.approvalStatuses; let last = last"
+            >{{
+              'account.recurring_order.details.approved.text'
+                | translate
+                  : {
+                      name: approval.approver.firstName + ' ' + approval.approver.lastName,
+                      date: approval.approvalDate | ishDate : 'shortDate'
+                    }
+            }}<span *ngIf="!last">, </span></ng-container
+          >)
         </dd>
       </dl>
 
@@ -135,7 +133,7 @@ <h1>{{ 'account.recurring_order.heading' | translate }}</h1>
       class="infobox-wrapper col-md-6"
       cssClass="pb-3"
     >
-      <dl class="row dl-horizontal dl-separator">
+      <dl *ngIf="recurringOrder.costCenterId" class="row dl-horizontal dl-separator">
         <dt class="col-5">{{ 'account.recurring_order.details.cost_center.label' | translate }}</dt>
         <dd class="col-7">{{ recurringOrder.costCenterId }} {{ recurringOrder.costCenterName }}</dd>
       </dl>

diff --git a/...app/pages/basket/basket-order-recurrence-edit/basket-order-recurrence-edit.component.html b/...app/pages/basket/basket-order-recurrence-edit/basket-order-recurrence-edit.component.html
@@ -1,5 +1,5 @@
 <div id="order-recurrence">
-  <div>
+  <div class="mt-1 mb-2">
     <input
       type="radio"
       id="order_recurrence_single"

diff --git a/...app/pages/basket/basket-order-recurrence-edit/basket-order-recurrence-edit.component.scss b/...app/pages/basket/basket-order-recurrence-edit/basket-order-recurrence-edit.component.scss
@@ -3,6 +3,7 @@
 #order-recurrence {
   padding: ($space-default * 0.5) ($space-default * 1.5);
   margin: ($space-default * 1) ($space-default * -1.5);
+  font-size: $font-size-corporate;
   background-color: $white;
 }
 

diff --git a/src/app/pages/basket/basket-order-recurrence-edit/basket-order-recurrence-edit.component.ts b/src/app/pages/basket/basket-order-recurrence-edit/basket-order-recurrence-edit.component.ts
@@ -59,7 +59,7 @@ export class BasketOrderRecurrenceEditComponent implements OnChanges, OnInit {
         {
           key: 'duration',
           type: 'ish-number-field',
-          className: 'col-12 col-md-4',
+          className: 'col-12 col-lg-5',
           props: {
             label: 'Recur every',
             labelClass: 'col-md-12',
@@ -70,7 +70,7 @@ export class BasketOrderRecurrenceEditComponent implements OnChanges, OnInit {
         {
           key: 'period',
           type: 'ish-select-field',
-          className: 'col-12 col-md-8',
+          className: 'col-12 col-lg-7',
           props: {
             options: this.periodOptions,
             label: 'Recur every',
@@ -100,7 +100,7 @@ export class BasketOrderRecurrenceEditComponent implements OnChanges, OnInit {
           props: {
             label: 'Until',
             value: 'date',
-            labelClass: 'col-md-12',
+            labelClass: 'col-md-12 pl-0',
             fieldClass: 'col-md-12',
           },
         },
@@ -127,21 +127,22 @@ export class BasketOrderRecurrenceEditComponent implements OnChanges, OnInit {
         {
           key: 'ending',
           type: 'ish-radio-field',
-          className: 'col-12 col-md-4',
+          className: 'col-12 col-md-3 col-lg-5 mr-lg-0',
           props: {
             label: 'Until after',
             value: 'repetitions',
-            labelClass: 'col-md-12',
+            labelClass: 'col-md-12 pl-0',
             fieldClass: 'col-md-12',
           },
         },
         {
           key: 'repetitions',
           type: 'ish-number-field',
-          className: 'col-12 col-md-5',
+          className: 'col-5 col-md-4 col-lg-3 pl-md-3 pl-lg-0 pr-md-0',
           props: {
             labelClass: 'col-md-12',
             fieldClass: 'col-md-12',
+            inputClass: 'testClass',
             min: 1,
           },
           expressions: {
@@ -152,9 +153,9 @@ export class BasketOrderRecurrenceEditComponent implements OnChanges, OnInit {
         },
         {
           type: 'ish-information-field',
-          className: 'col-12 col-md-3',
+          className: 'col-7 col-md-5 col-lg-4 pl-0 pt-2 pt-md-0',
           props: {
-            containerClass: 'p-2',
+            containerClass: 'p-md-2',
             localizationKey: 'order.recurrence.form.info.text',
           },
         },

diff --git a/src/app/pages/basket/shopping-basket-payment/shopping-basket-payment.component.html b/src/app/pages/basket/shopping-basket-payment/shopping-basket-payment.component.html
@@ -12,21 +12,22 @@
 
   <!-- container for displaying of fast checkout payment methods -->
   <ng-container *ngIf="paymentMethods$ | async as paymentMethods">
-    <li class="d-block text-center p-2">{{ 'shopping_cart.payment.or.text' | translate }}</li>
-    <li *ngFor="let paymentMethod of paymentMethods" class="d-block">
-      <button
-        (click)="fastCheckout(paymentMethod.id)"
-        class="btn btn-lg btn-block btn-secondary"
-        [disabled]="paymentMethod.isRestricted"
-      >
-        {{ paymentMethod.displayName }}
-      </button>
-      <!-- payment cost information -->
-      <ish-basket-payment-cost-info
-        [basket]="basket"
-        [paymentMethod]="paymentMethod"
-        [priceType]="priceType$ | async"
-      />
-    </li>
-  </ng-container>
+    <ng-container *ngIf="paymentMethods.length > 0">
+      <li class="d-block text-center p-2">{{ 'shopping_cart.payment.or.text' | translate }}</li>
+      <li *ngFor="let paymentMethod of paymentMethods" class="d-block">
+        <button
+          (click)="fastCheckout(paymentMethod.id)"
+          class="btn btn-lg btn-block btn-secondary"
+          [disabled]="paymentMethod.isRestricted"
+        >
+          {{ paymentMethod.displayName }}
+        </button>
+        <!-- payment cost information -->
+        <ish-basket-payment-cost-info
+          [basket]="basket"
+          [paymentMethod]="paymentMethod"
+          [priceType]="priceType$ | async"
+        />
+      </li> </ng-container
+  ></ng-container>
 </ul>
diff --git a/src/styles/pages/checkout/shopping-cart.scss b/src/styles/pages/checkout/shopping-cart.scss
@@ -96,10 +96,6 @@
     margin-bottom: $space-default;
     border-bottom-width: 1px;
   }
-
-  .form-control {
-    padding: 0;
-  }
 }
 
 .product-out-of-stock {