Merged PR 1075: #2729 Article Details Show Archiv Article Badge with matching text if article...

#2729 Article Details Show Archiv Article Badge with matching text if article is Available or not

apps/page/catalog/src/lib/article-details/article-details.component.html

@@ -2,6 +2,19 @@
   <ng-container *ngIf="store.item$ | async; let item">
     <div class="product-details">
       <div class="bookmark">
+        <div *ngIf="showArchivBadge$ | async" class="archiv-badge">
+          <button [uiOverlayTrigger]="archivTooltip" class="bookmark-badge">
+            <img src="/assets/images/bookmark_benachrichtigung_archiv.svg" alt="Archiv Badge" />
+            <ui-tooltip yPosition="above" xPosition="after" [yOffset]="-11" [xOffset]="-8" #archivTooltip [closeable]="true">
+              <ng-container *ngIf="isAvailable$ | async; else notAvailable">
+                Archivtitel. Wird nicht mehr gedruckt. Artikel ist bestellbar, weil lieferbar.
+              </ng-container>
+              <ng-template #notAvailable>
+                Archivtitel. Wird nicht mehr gedruckt. Nicht bestellbar.
+              </ng-template>
+            </ui-tooltip>
+          </button>
+        </div>
         <div *ngIf="showSubscriptionBadge$ | async">
           <button [uiOverlayTrigger]="subscribtionTooltip" class="bookmark-badge">
             <img src="/assets/images/bookmark_subscription.svg" alt="Fortsetzungsartikel Badge" />

apps/page/catalog/src/lib/article-details/article-details.component.ts

@@ -9,7 +9,7 @@ import { ModalReviewsComponent } from '@modal/reviews';
 import { PurchasingOptionsModalComponent, PurchasingOptionsModalData } from 'apps/page/checkout/src/lib/modals/purchasing-options-modal';
 import { PurchasingOptions } from 'apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.store';
 import { combineLatest, Subscription } from 'rxjs';
-import { filter, first, map } from 'rxjs/operators';
+import { filter, first, map, shareReplay } from 'rxjs/operators';
 import { ArticleDetailsStore } from './article-details.store';
 import { ModalImagesComponent } from 'apps/modal/images/src/public-api';
 import { ProductImageService } from 'apps/cdn/product-image/src/public-api';
@@ -48,7 +48,10 @@ export class ArticleDetailsComponent implements OnInit, OnDestroy {
     this.store.isPickUpAvailabilityAvailable$,
     this.store.isTakeAwayAvailabilityAvailable$,
     this.store.isDownloadAvailabilityAvailable$,
-  ]).pipe(map((values) => values.some((v) => v)));
+  ]).pipe(
+    map((values) => values.some((v) => v)),
+    shareReplay()
+  );
 
   showDeliveryTruck$ = combineLatest([this.store.isDeliveryAvailabilityAvailable$, this.store.isDeliveryDigAvailabilityAvailable$]).pipe(
     map(([delivery, digDelivery]) => delivery || digDelivery)
@@ -63,8 +66,10 @@ export class ArticleDetailsComponent implements OnInit, OnDestroy {
 
   showPromotionBadge$ = this.store.item$.pipe(map((item) => item?.features?.find((i) => i.key === 'Promotion')));
 
-  isBadgeVisible$ = combineLatest([this.showSubscriptionBadge$, this.showPromotionBadge$]).pipe(
-    map(([showSubscriptionBadge, showPromotionBadge]) => showSubscriptionBadge || showPromotionBadge)
+  showArchivBadge$ = this.store.item$.pipe(map((item) => item?.features?.find((i) => i.key === 'ARC')));
+
+  isBadgeVisible$ = combineLatest([this.showSubscriptionBadge$, this.showPromotionBadge$, this.showArchivBadge$]).pipe(
+    map(([showSubscriptionBadge, showPromotionBadge, showArchivBadge]) => showSubscriptionBadge || showPromotionBadge || showArchivBadge)
   );
 
   contributors$ = this.store.item$.pipe(map((item) => item?.product?.contributors?.split(';').map((m) => m.trim())));

apps/sales/src/assets/images/bookmark_benachrichtigung_archiv.svg

@@ -0,0 +1,112 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="12.7mm"
+   height="12.680367mm"
+   viewBox="0 0 12.7 12.680367"
+   version="1.1"
+   id="svg324"
+   inkscape:version="1.1.2 (b8e25be833, 2022-02-05)"
+   sodipodi:docname="Zeichnung.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview326"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="16.64826"
+     inkscape:cx="30.063201"
+     inkscape:cy="26.609387"
+     inkscape:window-width="2560"
+     inkscape:window-height="1377"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <defs
+     id="defs321">
+    <filter
+       x="-0.32432428"
+       y="-0.36278808"
+       width="1.6486486"
+       height="1.725576"
+       filterUnits="objectBoundingBox"
+       id="filter-1">
+      <feGaussianBlur
+         stdDeviation="5"
+         in="SourceGraphic"
+         id="feGaussianBlur438" />
+    </filter>
+  </defs>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-0.03418952,-0.03638048)">
+    <g
+       id="Bookmark_Benachrichtigung_Archiv"
+       transform="matrix(0.26458333,0,0,0.26458333,84.114893,39.8629)"
+       style="fill:none;fill-rule:evenodd;stroke:none;stroke-width:1">
+      <g
+         id="Group-3-Copy-2"
+         style="display:inline">
+        <path
+           d="m -305.34034,-150.52543 h 31.11 c 2.45491,0 4.445,1.9901 4.445,4.445 v 0.0287 0 h -40 v -0.0287 c 0,-2.4549 1.9901,-4.445 4.445,-4.445 z"
+           id="Rectangle"
+           fill="#1f466c" />
+        <path
+           d="m -313.34034,-150.52543 h 38.33568 v 0 43.4808 c 0,2.45491 -1.99009,4.445 -4.445,4.445 -0.69216,0 -1.37476,-0.16164 -1.99341,-0.47205 l -12.96624,-6.50579 c -1.25487,-0.62962 -2.73343,-0.62939 -3.9881,6.4e-4 l -12.94824,6.50194 c -2.19384,1.10163 -4.86536,0.21622 -5.967,-1.97762 -0.31082,-0.61899 -0.47269,-1.30205 -0.47269,-1.99469 v -39.03323 c 0,-2.4549 1.9901,-4.445 4.445,-4.445 z"
+           id="path446"
+           fill="#557596" />
+      </g>
+      <g
+         id="Group"
+         transform="translate(-311.78534,-144.52543)">
+        <polygon
+           id="Path"
+           points="0,30 0,0 30,0 30,30 " />
+        <rect
+           id="rect450"
+           stroke="#ffffff"
+           stroke-width="2.2"
+           stroke-linecap="round"
+           stroke-linejoin="round"
+           x="3.75"
+           y="5"
+           width="22.5"
+           height="5"
+           rx="2.5" />
+        <path
+           d="m 6.25,10 v 12.5 c 0,1.380712 1.1192881,2.5 2.5,2.5 h 12.5 c 1.380712,0 2.5,-1.119288 2.5,-2.5 V 10"
+           id="path452"
+           stroke="#ffffff"
+           stroke-width="2.2"
+           stroke-linecap="round"
+           stroke-linejoin="round" />
+        <line
+           x1="12.5"
+           y1="15"
+           x2="17.5"
+           y2="15"
+           id="line454"
+           stroke="#ffffff"
+           stroke-width="2.2"
+           stroke-linecap="round"
+           stroke-linejoin="round" />
+      </g>
+    </g>
+  </g>
+</svg>