download proof of delivery

addon/controllers/operations/orders/index/view.js

@@ -116,6 +116,7 @@ export default class OperationsOrdersIndexViewController extends BaseController
     @tracked commentInput = '';
     @tracked customFieldGroups = [];
     @tracked customFields = [];
+    @tracked proofs;
     @tracked uploadQueue = [];
     acceptedFileTypes = [
         'application/vnd.ms-excel',
@@ -245,6 +246,7 @@ export default class OperationsOrdersIndexViewController extends BaseController
         yield order.loadPurchaseRate();
         yield order.loadFiles();
         this.loadCustomFields.perform(order);
+        this.viewProofLabel.perform(order.id);
     }
 
     /**
@@ -842,6 +844,24 @@ export default class OperationsOrdersIndexViewController extends BaseController
         fileReader.readAsDataURL(blob);
     }
 
+    /**
+     * View proof label
+     */
+    @task *viewProofLabel(orderId) {
+        const response = yield this.fetch.get('proofs', { subject_uuid: orderId });
+        this.proofs = response.proofs;
+    }
+
+    @action downloadImage(proof) {
+        const base64Data = proof.raw;
+        const link = document.createElement('a');
+        link.href = base64Data;
+        link.download = 'downloaded_image.png';
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }
+
     /**
      * Reloads tracking activity for this order.
      *

addon/templates/operations/orders/index/view.hbs

@@ -280,6 +280,18 @@
                     <div class="field-info-container space-y-2">
                         <div class="field-name">{{t "fleet-ops.operations.orders.index.view.proof-of-delivery"}}</div>
                         <div class="field-value">{{n-a (smart-humanize @model.pod_method)}}</div>
+                        {{#if this.proofs}}
+                            {{#each this.proofs as |proof|}}
+                                {{#if proof.raw}}
+                                    <Button @size="xs" @type="default" {{on "click" (fn this.downloadImage proof)}} title="{{t 'fleet-ops.operations.orders.index.view.download'}}">
+                                        {{t "fleet-ops.operations.orders.index.view.download"}}
+                                    </Button>
+                                {{else}}
+                                    <div class="text-sm">{{format-date proof.created_at "d MMM yyyy"}}</div>
+
+                                {{/if}}
+                            {{/each}}
+                        {{/if}}
                     </div>
                 {{/if}}
             </div>

translations/en-us.yaml

@@ -1429,6 +1429,7 @@ fleet-ops:
           order-title: Order Label
           waypoint-title: Waypoint Label
           proof-of-delivery: Proof of Delivery
+          download: Download Image
           notes-placeholder: Enter order notes here....
           save-order-note: Save Order Note
           order-notes-updated: Order notes updated.