@fleetbase/fleetops-engine 0.6.50 → 0.6.52

package/addon/components/modals/update-order-activity.js

@@ -16,6 +16,8 @@ export default class ModalsUpdateOrderActivityComponent extends Component {
     @tracked selectedActivity;
     @tracked customActivity = {};
     @tracked proofFiles = [];
+    @tracked proof;
+    @tracked bypassProof = false;
 
     constructor(owner, { options = {} }) {
         super(...arguments);
@@ -104,6 +106,14 @@ export default class ModalsUpdateOrderActivityComponent extends Component {
         return ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
     }
 
+    get hasUploadedProof() {
+        return Boolean(this.proof?.id || this.proof?.public_id);
+    }
+
+    get uploadedProofId() {
+        return this.proof?.id ?? this.proof?.public_id;
+    }
+
     @task *loadActivity() {
         if (!this.order?.id) {
             return [];
@@ -128,14 +138,22 @@ export default class ModalsUpdateOrderActivityComponent extends Component {
             return this.notifications.warning(this.intl.t('fleet-ops.operations.orders.index.view.invalid-warning'));
         }
 
-        if (this.selectedActivityRequiresPod && this.proofFiles.length === 0) {
+        if (this.selectedActivityRequiresPod && this.uploadProofFile.isRunning) {
+            modal.stopLoading();
+            return this.notifications.warning('Photo proof of delivery is still uploading.');
+        }
+
+        if (this.selectedActivityRequiresPod && !this.hasUploadedProof && !this.bypassProof) {
             modal.stopLoading();
-            return this.notifications.warning('Photo proof of delivery is required for this activity.');
+            return this.notifications.warning('Upload photo proof of delivery or choose to bypass proof of delivery.');
         }
 
         try {
-            const proof = this.selectedActivityRequiresPod ? yield this.capturePhotoProof.perform() : null;
-            yield this.fetch.patch(`orders/update-activity/${this.order.id}`, { activity, proof: proof?.id ?? proof?.public_id });
+            yield this.fetch.patch(`orders/update-activity/${this.order.id}`, {
+                activity,
+                proof: this.hasUploadedProof ? this.uploadedProofId : null,
+                bypass_proof: this.selectedActivityRequiresPod && this.bypassProof,
+            });
 
             if (typeof this.order?.reload === 'function') {
                 yield this.order.reload();
@@ -150,6 +168,7 @@ export default class ModalsUpdateOrderActivityComponent extends Component {
             }
 
             this.modalsManager.setOption('activityCreated', activity);
+            this.modalsManager.setOption('proofCreated', this.hasUploadedProof ? this.proof : null);
             this.notifications.success(`Order activity has been updated to ${activity.status}`);
             modal.done();
         } catch (error) {
@@ -161,6 +180,10 @@ export default class ModalsUpdateOrderActivityComponent extends Component {
 
     @task *capturePhotoProof() {
         const [proofFile] = this.proofFiles;
+        if (!proofFile) {
+            return null;
+        }
+
         const headers = this.fetch.getHeaders();
         delete headers['Content-Type'];
 
@@ -179,11 +202,42 @@ export default class ModalsUpdateOrderActivityComponent extends Component {
         return response.json();
     }
 
-    @action setProofFile(file) {
+    @task *uploadProofFile(file) {
         if (!file) {
             return;
         }
 
+        this.bypassProof = false;
+        this.proof = null;
         this.proofFiles = [file];
+
+        try {
+            this.proof = this.normalizeProofResponse(yield this.capturePhotoProof.perform());
+            this.notifications.success('Photo proof of delivery uploaded.');
+        } catch (error) {
+            this.proof = null;
+            this.proofFiles = [];
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action toggleBypassProof(value) {
+        this.bypassProof = value;
+        if (value) {
+            this.proofFiles = [];
+            this.proof = null;
+        }
+    }
+
+    normalizeProofResponse(response) {
+        if (response?.proof) {
+            return response.proof;
+        }
+
+        if (response?.data?.id || response?.data?.public_id) {
+            return response.data;
+        }
+
+        return response;
     }
 }

package/addon/components/modals/vehicle-details.hbs

@@ -29,6 +29,11 @@
                             <div class="field-value">{{n-a @options.vehicle.vin}}</div>
                         </div>
 
+                        <div class="field-info-container">
+                            <div class="field-name">Fuel Card Number</div>
+                            <div class="field-value">{{n-a @options.vehicle.fuel_card_number}}</div>
+                        </div>
+
                         <div class="field-info-container">
                             <div class="field-name">{{t "modals.vehicle-details.make"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.name}}</div>
@@ -224,4 +229,4 @@
         </div>
     </div>
     {{yield}}
-</Modal::Default>
+</Modal::Default>

package/addon/components/modals/vehicle-form.hbs

@@ -36,6 +36,13 @@
                             <Input @value={{@options.vehicle.vin}} @type="text" class="w-full form-input" placeholder={{t "common.vin-number"}} />
                         </div>
 
+                        <div class="input-group mb-2">
+                            <label>
+                                Fuel Card Number
+                            </label>
+                            <Input @value={{@options.vehicle.fuel_card_number}} @type="text" class="w-full form-input" placeholder="Fuel Card Number" />
+                        </div>
+
                         <div class="input-group mb-2">
                             <label>
                                 {{t "modals.vehicle-details.make"}}
@@ -303,4 +310,4 @@
             </div>
         </div>
     </div>
-</Modal::Default>
+</Modal::Default>

package/addon/components/order/card.hbs

@@ -0,0 +1,106 @@
+{{! template-lint-disable no-positive-tabindex }}
+<div
+    class={{this.classNames}}
+    role={{this.role}}
+    tabindex={{this.tabIndex}}
+    {{on "click" this.handleClick}}
+    {{on "keydown" this.handleKeyDown}}
+    ...attributes
+>
+    <div class="order-card-topline">
+        {{#if @selectable}}
+            <Input
+                @type="checkbox"
+                class="order-card-checkbox form-checkbox"
+                @checked={{@selected}}
+                disabled={{@disabled}}
+                {{on "click" this.handleSelect}}
+            />
+        {{/if}}
+        <div class="order-card-title-block">
+            <div class="order-card-title">{{n-a this.orderLabel (t "order.card.unknown-order")}}</div>
+            {{#if this.showType}}
+                <div class="order-card-subtitle">{{n-a (smart-humanize this.orderTypeLabel) (t "order.card.no-type")}}</div>
+            {{/if}}
+        </div>
+        {{#if (has-block "headerActions")}}
+            <div class="order-card-header-actions">
+                {{yield this.order to="headerActions"}}
+            </div>
+        {{/if}}
+        {{#if this.showStatus}}
+            <Badge @status={{this.order.status}} />
+        {{/if}}
+    </div>
+
+    {{#if this.showProgress}}
+        <div class="order-card-progress {{this.orderProgressClass}}">
+            <span></span>
+        </div>
+    {{/if}}
+
+    {{#if this.showRoute}}
+        {{#if this.hasOrderStops}}
+            <div class="order-card-route">
+                <div class="order-card-stop">
+                    <div class="order-card-stop-marker pickup">1</div>
+                    <div class="min-w-0">
+                        <div class="order-card-stop-label">{{t "order.card.pickup"}}</div>
+                        <div class="order-card-stop-address">{{n-a this.orderOriginAddress (t "order.card.no-pickup-address")}}</div>
+                    </div>
+                </div>
+                {{#if this.isMultiStopOrder}}
+                    <div class="order-card-stop compact">
+                        <div class="order-card-stop-marker middle">+</div>
+                        <div class="min-w-0">
+                            <div class="order-card-stop-label">{{t "order.card.waypoints"}}</div>
+                            <div class="order-card-stop-address">
+                                {{this.middleStopCount}}
+                                {{if (eq this.middleStopCount 1) (t "order.card.additional-stop") (t "order.card.additional-stops")}}
+                            </div>
+                        </div>
+                    </div>
+                {{/if}}
+                <div class="order-card-stop">
+                    <div class="order-card-stop-marker dropoff">{{this.orderStopCount}}</div>
+                    <div class="min-w-0">
+                        <div class="order-card-stop-label">{{t this.destinationLabelKey}}</div>
+                        <div class="order-card-stop-address">{{n-a this.orderDestinationAddress (t "order.card.no-dropoff-address")}}</div>
+                    </div>
+                </div>
+            </div>
+        {{else}}
+            {{#if (has-block "emptyRoute")}}
+                {{yield this.order to="emptyRoute"}}
+            {{else}}
+                <div class="order-card-empty-route">
+                    <FaIcon @icon="route" />
+                    <span>{{t "order.card.no-route-details"}}</span>
+                </div>
+            {{/if}}
+        {{/if}}
+    {{/if}}
+
+    {{#if this.showMeta}}
+        {{#if (has-block "meta")}}
+            {{yield this.order to="meta"}}
+        {{else if this.hasMeta}}
+            <div class="order-card-meta">
+                {{#each this.metaItems as |item|}}
+                    <span>
+                        <FaIcon @icon={{item.icon}} />
+                        {{#if item.isDate}}
+                            {{format-date-fns item.value "MMM d, HH:mm"}}
+                        {{else}}
+                            {{item.value}}
+                        {{/if}}
+                    </span>
+                {{/each}}
+            </div>
+        {{/if}}
+    {{/if}}
+
+    {{#if (has-block "footer")}}
+        {{yield this.order to="footer"}}
+    {{/if}}
+</div>

package/addon/components/order/card.js

@@ -0,0 +1,257 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+const COMPLETE_ORDER_STATUSES = ['completed', 'delivered'];
+const ACTIVE_ORDER_STATUSES = ['dispatched', 'started', 'in_progress', 'driver_enroute', 'driver_nearby'];
+
+export default class OrderCardComponent extends Component {
+    get order() {
+        return this.args.order ?? this.args.resource;
+    }
+
+    get variant() {
+        return this.args.variant ?? 'default';
+    }
+
+    get isCompact() {
+        return this.variant === 'compact';
+    }
+
+    get isSelection() {
+        return this.variant === 'selection';
+    }
+
+    get isInteractive() {
+        return Boolean(this.args.interactive && !this.args.disabled);
+    }
+
+    get classNames() {
+        return [
+            'order-card',
+            `order-card-${this.variant}`,
+            this.args.selected ? 'is-selected' : null,
+            this.args.disabled ? 'is-disabled' : null,
+            this.args.selectable ? 'is-selectable' : null,
+            this.isInteractive ? 'is-interactive' : null,
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+
+    get orderLabel() {
+        const trackingNumber = this.order?.tracking_number;
+
+        return trackingNumber?.tracking_number ?? trackingNumber ?? this.order?.tracking ?? this.order?.public_id ?? this.order?.id;
+    }
+
+    get orderTypeLabel() {
+        return this.order?.type;
+    }
+
+    get orderStops() {
+        const payload = this.order?.payload ?? {};
+        const stops = [];
+
+        if (payload.pickup) {
+            stops.push({ type: 'pickup', place: payload.pickup });
+        }
+
+        (payload.waypoints ?? []).forEach((waypoint, index) => {
+            stops.push({
+                type: waypoint.type ?? 'waypoint',
+                place: waypoint.place ?? waypoint,
+                index: index + 1,
+            });
+        });
+
+        if (payload.dropoff) {
+            stops.push({ type: 'dropoff', place: payload.dropoff });
+        }
+
+        if (payload.return) {
+            stops.push({ type: 'return', place: payload.return });
+        }
+
+        return stops.filter((stop) => this.addressForPlace(stop.place));
+    }
+
+    get orderOrigin() {
+        return this.orderStops[0];
+    }
+
+    get orderDestination() {
+        return this.orderStops[this.orderStops.length - 1];
+    }
+
+    get orderOriginAddress() {
+        return this.addressForPlace(this.orderOrigin?.place);
+    }
+
+    get orderDestinationAddress() {
+        return this.addressForPlace(this.orderDestination?.place);
+    }
+
+    get orderStopCount() {
+        return this.orderStops.length;
+    }
+
+    get middleStopCount() {
+        return Math.max(this.orderStopCount - 2, 0);
+    }
+
+    get isMultiStopOrder() {
+        return this.orderStopCount > 2;
+    }
+
+    get hasOrderStops() {
+        return this.orderStopCount > 0;
+    }
+
+    get destinationLabelKey() {
+        return this.orderDestination?.type === 'return' ? 'order.card.return' : 'order.card.dropoff';
+    }
+
+    get orderProgressClass() {
+        const status = this.order?.status;
+
+        if (COMPLETE_ORDER_STATUSES.includes(status)) {
+            return 'is-complete';
+        }
+
+        if (ACTIVE_ORDER_STATUSES.includes(status)) {
+            return 'is-active';
+        }
+
+        return 'is-pending';
+    }
+
+    get scheduledAt() {
+        return this.order?.scheduled_at ?? this.order?.scheduledAt;
+    }
+
+    get createdAt() {
+        return this.order?.created_at ?? this.order?.createdAt;
+    }
+
+    get orderDriverLabel() {
+        return this.order?.driver_assigned?.name ?? this.order?.driver_name ?? this.order?.driver?.name;
+    }
+
+    get orderVehicleLabel() {
+        return this.order?.vehicle_assigned?.displayName ?? this.order?.vehicle_assigned?.display_name ?? this.order?.vehicle_name ?? this.order?.vehicle?.displayName;
+    }
+
+    get orderCustomerLabel() {
+        return this.order?.customer?.name ?? this.order?.customer_name;
+    }
+
+    get showStatus() {
+        return this.argOrDefault('showStatus', true);
+    }
+
+    get showType() {
+        return this.argOrDefault('showType', !this.isCompact);
+    }
+
+    get showRoute() {
+        return this.argOrDefault('showRoute', !this.isCompact);
+    }
+
+    get showProgress() {
+        return this.argOrDefault('showProgress', !this.isCompact && !this.isSelection);
+    }
+
+    get showMeta() {
+        return this.argOrDefault('showMeta', true);
+    }
+
+    get showDriver() {
+        return this.argOrDefault('showDriver', true);
+    }
+
+    get showVehicle() {
+        return this.argOrDefault('showVehicle', true);
+    }
+
+    get showCustomer() {
+        return this.argOrDefault('showCustomer', false);
+    }
+
+    get showScheduledAt() {
+        return this.argOrDefault('showScheduledAt', true);
+    }
+
+    get metaItems() {
+        const items = [];
+
+        if (this.showScheduledAt && (this.scheduledAt || this.createdAt)) {
+            items.push({
+                key: 'scheduled',
+                icon: 'calendar',
+                value: this.scheduledAt ?? this.createdAt,
+                isDate: true,
+            });
+        }
+
+        if (this.showDriver && this.orderDriverLabel) {
+            items.push({ key: 'driver', icon: 'id-card', value: this.orderDriverLabel });
+        }
+
+        if (this.showVehicle && this.orderVehicleLabel) {
+            items.push({ key: 'vehicle', icon: 'truck', value: this.orderVehicleLabel });
+        }
+
+        if (this.showCustomer && this.orderCustomerLabel) {
+            items.push({ key: 'customer', icon: 'user', value: this.orderCustomerLabel });
+        }
+
+        return items;
+    }
+
+    get hasMeta() {
+        return this.metaItems.length > 0;
+    }
+
+    get tabIndex() {
+        return this.isInteractive ? '0' : null;
+    }
+
+    get role() {
+        return this.isInteractive ? 'button' : null;
+    }
+
+    argOrDefault(argName, defaultValue) {
+        return typeof this.args[argName] === 'boolean' ? this.args[argName] : defaultValue;
+    }
+
+    addressForPlace(place) {
+        return place?.address ?? place?.address_html ?? place?.street1 ?? place?.name;
+    }
+
+    @action handleClick() {
+        if (!this.isInteractive || typeof this.args.onClick !== 'function') {
+            return;
+        }
+
+        this.args.onClick(this.order);
+    }
+
+    @action handleKeyDown(event) {
+        if (!this.isInteractive || !['Enter', ' '].includes(event.key)) {
+            return;
+        }
+
+        event.preventDefault();
+        this.handleClick();
+    }
+
+    @action handleSelect(event) {
+        event?.stopPropagation();
+
+        if (this.args.disabled || typeof this.args.onSelect !== 'function') {
+            return;
+        }
+
+        this.args.onSelect(this.order);
+    }
+}

package/addon/components/order/details/activity.js

@@ -31,9 +31,9 @@ export default class OrderDetailsActivityComponent extends Component {
                         disabled: this.args.resource.status === 'canceled',
                         onClick: () => {
                             this.orderActions.updateActivity(this.args.resource, {
-                                onFinish: ({ activityCreated }) => {
+                                onFinish: (options) => {
                                     if (typeof this.args.onChange === 'function') {
-                                        this.args.onChange(activityCreated);
+                                        this.args.onChange(options);
                                     }
                                 },
                             });

package/addon/components/order/details/proof.hbs

@@ -1,42 +1,44 @@
-<ContentPanel @title={{t "order.fields.proof-of-delivery"}} @isLoading={{@isLoading}} @open={{true}} @wrapperClass="bordered-top">
-    {{#if this.proofs}}
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-3">
-            {{#each this.proofs as |proof|}}
-                <div>
-                    {{#if (eq proof.type "photo")}}
-                        <a href={{proof.url}} target={{proof.id}}>
-                            <Image src={{proof.url}} class="w-48 h-48 rounded-md shadow-sm mb-2" />
-                        </a>
-                    {{/if}}
-                    {{#if (eq proof.type "signature")}}
-                        <a href={{proof.raw}} target={{proof.id}} download>
-                            <Image src={{proof.raw}} class="w-48 h-48 rounded-md shadow-sm mb-2" />
-                        </a>
-                    {{/if}}
-                    {{#if (eq proof.type "scan")}}
-                        <div class="flex items-center mb-2">
-                            <FaIcon @icon="qrcode" @size="2xl" class="text-blue-400" />
-                        </div>
-                    {{/if}}
-                    <div class="font-semibold text-sm mb-0.5">{{proof.remarks}}</div>
-                    <div class="text-xs">{{proof.public_id}}</div>
-                    <div class="text-xs">{{format-date-fns proof.created_at}}</div>
-                </div>
-            {{/each}}
-        </div>
-    {{else}}
-        <div class="min-h-24 p-4">
-            <div class="flex items-center justify-center border border-dashed border-gray-300 dark:border-gray-600 p-6 rounded-xl bg-gray-50 dark:bg-gray-800">
-                <div class="text-center">
-                    <FaIcon @icon="camera-retro" @size="2x" class="text-gray-400 mb-2" />
-                    <div class="text-sm text-gray-600 dark:text-gray-400 font-medium">
-                        No proof of delivery
+<div {{did-update this.reloadProofs @reloadToken}}>
+    <ContentPanel @title={{t "order.fields.proof-of-delivery"}} @isLoading={{@isLoading}} @open={{true}} @wrapperClass="bordered-top">
+        {{#if this.proofs}}
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-3">
+                {{#each this.proofs as |proof|}}
+                    <div>
+                        {{#if (eq proof.type "photo")}}
+                            <a href={{proof.url}} target={{proof.id}}>
+                                <Image src={{proof.url}} class="w-48 h-48 rounded-md shadow-sm mb-2" />
+                            </a>
+                        {{/if}}
+                        {{#if (eq proof.type "signature")}}
+                            <a href={{proof.raw}} target={{proof.id}} download>
+                                <Image src={{proof.raw}} class="w-48 h-48 rounded-md shadow-sm mb-2" />
+                            </a>
+                        {{/if}}
+                        {{#if (eq proof.type "scan")}}
+                            <div class="flex items-center mb-2">
+                                <FaIcon @icon="qrcode" @size="2xl" class="text-blue-400" />
+                            </div>
+                        {{/if}}
+                        <div class="font-semibold text-sm mb-0.5">{{proof.remarks}}</div>
+                        <div class="text-xs">{{proof.public_id}}</div>
+                        <div class="text-xs">{{format-date-fns proof.created_at}}</div>
                     </div>
-                    <div class="text-xs text-gray-500 dark:text-gray-500 mt-1">
-                        Captured proof of delivery will show up here
+                {{/each}}
+            </div>
+        {{else}}
+            <div class="min-h-24 p-4">
+                <div class="flex items-center justify-center border border-dashed border-gray-300 dark:border-gray-600 p-6 rounded-xl bg-gray-50 dark:bg-gray-800">
+                    <div class="text-center">
+                        <FaIcon @icon="camera-retro" @size="2x" class="text-gray-400 mb-2" />
+                        <div class="text-sm text-gray-600 dark:text-gray-400 font-medium">
+                            No proof of delivery
+                        </div>
+                        <div class="text-xs text-gray-500 dark:text-gray-500 mt-1">
+                            Captured proof of delivery will show up here
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-    {{/if}}
-</ContentPanel>
+        {{/if}}
+    </ContentPanel>
+</div>

package/addon/components/order/details/proof.js

@@ -1,5 +1,6 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { task } from 'ember-concurrency-decorators';
 
@@ -13,12 +14,18 @@ export default class OrderDetailsProofComponent extends Component {
     }
 
     @task *loadOrderProofs(order) {
+        if (!order?.id) {
+            this.proofs = [];
+            return;
+        }
+
         const proofs = yield this.fetch.get(`orders/${order.id}/proofs`);
 
-        this.proofs = proofs.map((proof) => ({
-            ...proof,
-            type: this.#getTypeFromRemarks(proof.remarks),
-        }));
+        this.proofs = this.#normalizeProofs(proofs);
+    }
+
+    @action reloadProofs() {
+        this.loadOrderProofs.perform(this.args.resource);
     }
 
     #getTypeFromRemarks(remarks = '') {
@@ -27,4 +34,24 @@ export default class OrderDetailsProofComponent extends Component {
         if (remarks.endsWith('Signature')) return 'signature';
         return undefined;
     }
+
+    #normalizeProofs(proofs = []) {
+        const seen = new Set();
+
+        return proofs
+            .filter((proof) => {
+                const key = proof.uuid ?? proof.public_id ?? proof.id;
+                if (!key || seen.has(key)) {
+                    return false;
+                }
+
+                seen.add(key);
+                return true;
+            })
+            .map((proof) => ({
+                ...proof,
+                type: this.#getTypeFromRemarks(proof.remarks),
+            }))
+            .sort((a, b) => new Date(b.created_at ?? 0).getTime() - new Date(a.created_at ?? 0).getTime());
+    }
 }