Merged PR 1502: #3358 Disable Pick Up Option in purchasing Modal if no valid targetBranch is...

#3358 Disable Pick Up Option in purchasing Modal if no valid targetBranch is selected

apps/page/checkout/src/lib/modals/purchasing-options-modal/option.scss

@@ -35,3 +35,7 @@ p {
 .select-option {
   @apply mt-4 mb-4 border-2 border-solid border-brand text-brand text-cta-l font-bold bg-white rounded-full py-3 px-6;
 }
+
+.select-option:disabled {
+  @apply bg-disabled-branch border-disabled-branch text-white;
+}

apps/page/checkout/src/lib/modals/purchasing-options-modal/pick-up-option/pick-up-option.component.html

@@ -9,6 +9,7 @@
     </p>
     <span class="price" *ngIf="price$ | async; let price">{{ price?.value?.value | currency: price?.value?.currency:'code' }}</span>
     <ui-branch-dropdown
+      class="min-h-[38px]"
       [branches]="branches$ | async"
       [selected]="selected$ | async"
       (selectBranch)="selectBranch($event)"
@@ -18,7 +19,12 @@
     >
     <div class="grow"></div>
     <div>
-      <button [disabled]="availability.price?.value?.value < 0" type="button" class="select-option" (click)="select()">
+      <button
+        [disabled]="availability.price?.value?.value < 0 || !(selected$ | async)"
+        type="button"
+        class="select-option"
+        (click)="select()"
+      >
         Auswählen
       </button>
     </div>

apps/page/checkout/src/lib/modals/purchasing-options-modal/pick-up-option/pick-up-option.component.ts

@@ -13,7 +13,14 @@ import { PurchasingOptionsModalStore } from '../purchasing-options-modal.store';
 })
 export class PickUpOptionComponent {
   branches$: Observable<BranchDTO[]> = this._purchasingOptionsModalStore.selectAvailableBranches;
-  selected$: Observable<string> = this._purchasingOptionsModalStore.selectBranch.pipe(map((branch) => branch.name));
+  selected$: Observable<string> = this._purchasingOptionsModalStore.selectBranch.pipe(
+    map((branch) => {
+      // Determins if branch is targetBranch
+      if (branch.branchType === 1) {
+        return branch.name;
+      }
+    })
+  );
 
   readonly item$ = this._purchasingOptionsModalStore.selectItem;
 

apps/ui/branch-dropdown/src/lib/branch-dropdown.component.html

@@ -9,7 +9,7 @@
       cdkOverlayOrigin
       #trigger="cdkOverlayOrigin"
     >
-      <span>{{ selected }}</span>
+      <span>{{ selected ?? 'Filiale auswählen' }}</span>
       <div class="arrow-icon">
         <ui-icon size="15px" icon="arrow_head"></ui-icon>
       </div>