From 4b7083554252aba9ce942759861b4e7e4b83b1be Mon Sep 17 00:00:00 2001
From: Bello Babakolo <fleetbeekay@gmail.com>
Date: Fri, 25 Oct 2024 16:44:37 +0100
Subject: [PATCH] feat(fulfilment): display labels in the fulfilment page

---
 .../fulfillment-view-details.component.html   | 37 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/packages/modules/fulfillment/src/lib/components/fulfillment-view-details.component.html b/packages/modules/fulfillment/src/lib/components/fulfillment-view-details.component.html
index 1571b65..ed99284 100644
--- a/packages/modules/fulfillment/src/lib/components/fulfillment-view-details.component.html
+++ b/packages/modules/fulfillment/src/lib/components/fulfillment-view-details.component.html
@@ -65,7 +65,42 @@
     <span class="my-2 rc-lv-l-heading">Labels</span>
   </vcl-data-list-header>
 
-  <div>No label available. You need to submit this fulfillment</div>
+  <vcl-data-list
+    mode="none"
+    [noBorder]="true"
+  >
+    <ng-container
+      *ngIf="fulfillment.fulfillmentState !== 'PENDING'; else noLabel"
+    ></ng-container>
+    <vcl-data-list-item *ngFor="let label of fulfillment.labels">
+      <div class="row justify-content-between align-items-center">
+        <span>Parcel Id</span>
+        <span>{{ label.parcelId }}</span>
+      </div>
+
+      <div class="row justify-content-between align-items-center">
+        <span>Shipping number</span>
+        <span>{{ label.shipmentNumber }}</span>
+      </div>
+
+      <div class="row justify-content-between align-items-center">
+        <span>
+          <a
+            [href]="label.url"
+            target="_blank"
+            rel="noopener noreferrer"
+            >URL</a
+          >
+        </span>
+      </div>
+    </vcl-data-list-item>
+  </vcl-data-list>
+
+  <ng-template #noLabel>
+    <div>
+      No label available. You need to submit this fulfillment
+    </div></ng-template
+  >
 </vcl-data-list>
 
 <vcl-data-list