@fleetbase/fleetops-engine 0.6.49 → 0.6.51

package/addon/components/modals/issue-status.hbs

@@ -0,0 +1,20 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @name="Status" @helpText="Choose the current workflow state for this issue.">
+            <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                <PowerSelect
+                    @options={{@options.statusOptions}}
+                    @selected={{this.selectedStatus}}
+                    @onChange={{fn (mut this.selectedStatus)}}
+                    @placeholder="Select status"
+                    @triggerClass="form-select form-input"
+                    @renderInPlace={{true}}
+                    as |status|
+                >
+                    <div class="font-semibold normalize-in-trigger">{{status.label}}</div>
+                    <div class="hide-from-trigger text-xs text-gray-500 dark:text-gray-400">{{status.description}}</div>
+                </PowerSelect>
+            </div>
+        </InputGroup>
+    </div>
+</Modal::Default>

package/addon/components/modals/issue-status.js

@@ -0,0 +1,43 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+
+export default class ModalsIssueStatusComponent extends Component {
+    @service notifications;
+
+    @tracked options = {};
+    @tracked issue;
+    @tracked selectedStatus;
+
+    constructor(owner, { options }) {
+        super(...arguments);
+        this.options = options;
+        this.issue = options.issue;
+        this.selectedStatus = options.statusOptions?.find((status) => status.value === this.issue?.status);
+        this.setupOptions();
+    }
+
+    setupOptions() {
+        this.options.title = 'Change Issue Status';
+        this.options.acceptButtonText = 'Update Status';
+        this.options.acceptButtonIcon = 'save';
+        this.options.confirm = async (modal) => {
+            modal.startLoading();
+
+            try {
+                this.issue.status = this.selectedStatus?.value ?? this.issue.status;
+                await this.issue.save();
+                this.notifications.success('Issue status updated.');
+
+                if (typeof this.options.onSaved === 'function') {
+                    await this.options.onSaved(this.issue);
+                }
+
+                modal.done();
+            } catch (error) {
+                this.notifications.serverError(error);
+                modal.stopLoading();
+            }
+        };
+    }
+}

package/addon/components/modals/order-change-destination.hbs

@@ -0,0 +1,46 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{perform this.confirmSelection}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="space-y-3">
+            {{#each this.waypointOptions as |option|}}
+                <button
+                    type="button"
+                    class="w-full rounded-md border px-4 py-3 text-left shadow-sm transition {{if option.isCurrent 'border-blue-500 bg-blue-50 dark:border-blue-600 dark:bg-blue-900' (if option.isSelected 'border-green-500 bg-green-50 dark:border-green-700 dark:bg-green-900' 'border-gray-200 bg-white hover:border-blue-300 hover:bg-blue-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:border-blue-700 dark:hover:bg-gray-900')}}"
+                    disabled={{this.confirmSelection.isRunning}}
+                    {{on "click" (fn this.selectOption option)}}
+                >
+                    <div class="flex items-start gap-3">
+                        <div
+                            class="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full text-xs font-bold {{if option.isCurrent 'bg-blue-600 text-white' 'bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-100'}}"
+                        >
+                            {{option.label}}
+                        </div>
+                        <div class="min-w-0 flex-1">
+                            <div class="flex items-center justify-between gap-2">
+                                <div class="truncate text-sm font-semibold dark:text-gray-100">{{option.title}} - {{or option.waypoint.name option.waypoint.id}}</div>
+                                {{#if option.isCurrent}}
+                                    <Badge @status="info" class="uppercase">Current</Badge>
+                                {{else if option.isSelected}}
+                                    <Badge @status="success" class="uppercase">Selected</Badge>
+                                {{else if option.waypoint.complete}}
+                                    <Badge @status="completed" class="uppercase">Complete</Badge>
+                                {{else if option.waypoint.status_code}}
+                                    <Badge @status={{dasherize option.waypoint.status_code}} class="uppercase">{{option.waypoint.status_code}}</Badge>
+                                {{else if option.waypoint.status}}
+                                    <Badge @status={{dasherize option.waypoint.status}} class="uppercase">{{option.waypoint.status}}</Badge>
+                                {{/if}}
+                            </div>
+                            <div class="mt-1 truncate text-xs text-gray-600 dark:text-gray-300">{{or option.waypoint.address option.waypoint.street1}}</div>
+                            {{#if option.tracking}}
+                                <div class="mt-1 text-xs font-mono text-gray-500 dark:text-gray-400">{{option.tracking}}</div>
+                            {{/if}}
+                        </div>
+                    </div>
+                </button>
+            {{else}}
+                <div class="rounded-md border border-dashed border-gray-300 p-6 text-center text-sm text-gray-500 dark:border-gray-700 dark:text-gray-400">
+                    No waypoint destinations are available.
+                </div>
+            {{/each}}
+        </div>
+    </div>
+</Modal::Default>

package/addon/components/modals/order-change-destination.js

@@ -0,0 +1,106 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+import { buildServiceStopsFromPayload, describeRoutePoint } from '../../utils/route-visualization';
+import { colorForId } from '../../utils/route-colors';
+
+export default class ModalsOrderChangeDestinationComponent extends Component {
+    @service fetch;
+    @service notifications;
+    @tracked selectedOption;
+
+    get order() {
+        return this.args.options?.order;
+    }
+
+    get waypoints() {
+        const waypoints = this.order?.payload?.waypoints;
+        if (typeof waypoints?.toArray === 'function') {
+            return waypoints.toArray();
+        }
+
+        return Array.isArray(waypoints) ? waypoints : Array.from(waypoints ?? []);
+    }
+
+    get routeColor() {
+        return colorForId(this.order?.public_id ?? this.order?.id ?? 'order-route');
+    }
+
+    get serviceStops() {
+        return buildServiceStopsFromPayload(this.order?.payload);
+    }
+
+    get currentWaypointId() {
+        const activeStop = this.order?.tracker_data?.active_stop;
+        const payload = this.order?.payload;
+
+        return activeStop?.uuid ?? activeStop?.public_id ?? payload?.current_waypoint_uuid ?? payload?.current_waypoint;
+    }
+
+    get waypointOptions() {
+        return this.serviceStops.map((stop, index) => ({
+            waypoint: stop.place,
+            stop,
+            index,
+            id: this.waypointId(stop.place),
+            isCurrent: this.isCurrentWaypoint(stop.place),
+            isSelected: this.isSelectedStop(stop),
+            label: describeRoutePoint(stop, this.routeColor).label,
+            title: describeRoutePoint(stop, this.routeColor).title,
+            tracking: this.trackingForStop(stop),
+        }));
+    }
+
+    waypointId(waypoint) {
+        return waypoint?.id ?? waypoint?.public_id ?? waypoint?.uuid;
+    }
+
+    isCurrentWaypoint(waypoint) {
+        return [waypoint?.id, waypoint?.uuid, waypoint?.public_id, waypoint?.waypoint_public_id].includes(this.currentWaypointId);
+    }
+
+    isSelectedStop(stop) {
+        const selectedPlace = this.selectedOption?.waypoint;
+
+        return [selectedPlace?.id, selectedPlace?.uuid, selectedPlace?.public_id, selectedPlace?.waypoint_public_id].includes(this.waypointId(stop?.place));
+    }
+
+    trackingForStop(stop) {
+        return stop?.place?.tracking ?? stop?.place?.tracking_number ?? stop?.trackingNumberUuid ?? this.order?.tracking ?? this.order?.tracking_number;
+    }
+
+    @action selectOption(option) {
+        if (!option?.isCurrent) {
+            this.selectedOption = option;
+        }
+    }
+
+    @task *confirmSelection(modal) {
+        const option = this.selectedOption;
+        const waypoint = option?.waypoint;
+        const waypointId = this.waypointId(waypoint);
+        if (!waypointId) {
+            modal.stopLoading();
+            return this.notifications.warning('Select a destination first.');
+        }
+
+        modal.startLoading();
+
+        try {
+            const order = yield this.fetch.patch(`orders/set-destination/${this.order.id}/${waypointId}`);
+            this.notifications.success(`Current destination changed to ${waypoint.name ?? waypoint.address ?? waypointId}.`);
+
+            if (typeof this.args.options?.onChange === 'function') {
+                yield this.args.options.onChange(order, waypoint);
+            }
+
+            modal.done();
+        } catch (error) {
+            this.notifications.serverError(error);
+        } finally {
+            modal.stopLoading();
+        }
+    }
+}

package/addon/components/modals/reset-customer-credentials.js

@@ -2,6 +2,8 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 
+const INTERNAL_NAMESPACE = 'int/v1';
+
 export default class ModalsResetCustomerCredentialsComponent extends Component {
     @service fetch;
     @service notifications;
@@ -26,12 +28,16 @@ export default class ModalsResetCustomerCredentialsComponent extends Component {
             modal.startLoading();
 
             try {
-                await this.fetch.post('customers/reset-credentials', {
-                    customer: this.customer.id,
-                    password: this.password,
-                    password_confirmation: this.confirmPassword,
-                    send_credentials: this.sendCredentials,
-                });
+                await this.fetch.post(
+                    'customers/reset-credentials',
+                    {
+                        customer: this.customer.id,
+                        password: this.password,
+                        password_confirmation: this.confirmPassword,
+                        send_credentials: this.sendCredentials,
+                    },
+                    { namespace: INTERNAL_NAMESPACE }
+                );
 
                 this.notifications.success('Customer password reset.');
 

package/addon/components/modals/stop-activity.hbs

@@ -0,0 +1,28 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="mb-4 rounded-md border border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-700 dark:bg-gray-800">
+            <div class="text-xs font-semibold uppercase text-gray-500 dark:text-gray-400">Stop</div>
+            <div class="mt-1 text-sm font-semibold text-gray-900 dark:text-gray-100">{{this.stopName}}</div>
+            <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{or this.place.address this.place.street1}}</div>
+        </div>
+
+        {{#if this.loadActivity.isRunning}}
+            <div class="flex items-center justify-center p-8 text-sm text-gray-500 dark:text-gray-400">
+                <FaIcon @icon="spinner" @spin={{true}} class="mr-2" />
+                Loading activity...
+            </div>
+        {{else if this.trackingNumberUuid}}
+            <Order::ActivityList @activity={{this.activity}} @resource={{hash status=this.stop.status}} />
+        {{else}}
+            <div class="min-h-24 pb-4">
+                <div class="flex items-center justify-center rounded-xl border border-dashed border-gray-300 bg-gray-50 p-6 dark:border-gray-600 dark:bg-gray-800">
+                    <div class="text-center">
+                        <FaIcon @icon="layer-group" @size="2x" class="mb-2 text-gray-400" />
+                        <div class="text-sm font-medium text-gray-600 dark:text-gray-400">No stop activity</div>
+                        <div class="mt-1 text-xs text-gray-500 dark:text-gray-500">This stop does not have a separate activity stream.</div>
+                    </div>
+                </div>
+            </div>
+        {{/if}}
+    </div>
+</Modal::Default>

package/addon/components/modals/stop-activity.js

@@ -0,0 +1,52 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+
+export default class ModalsStopActivityComponent extends Component {
+    @service store;
+    @service notifications;
+    @tracked activity = [];
+
+    constructor() {
+        super(...arguments);
+        this.loadActivity.perform();
+    }
+
+    get stop() {
+        return this.args.options?.stop;
+    }
+
+    get place() {
+        return this.stop?.place ?? this.stop;
+    }
+
+    get order() {
+        return this.args.options?.order;
+    }
+
+    get stopName() {
+        return this.place?.name ?? this.place?.address ?? this.place?.id;
+    }
+
+    get trackingNumberUuid() {
+        return this.stop?.trackingNumberUuid ?? this.stop?.tracking_number_uuid ?? this.stop?.tracking_number?.uuid ?? this.place?.tracking_number_uuid ?? this.place?.tracking_number?.uuid;
+    }
+
+    @task *loadActivity() {
+        if (!this.trackingNumberUuid) {
+            this.activity = [];
+            return [];
+        }
+
+        try {
+            const activity = yield this.store.query('tracking-status', {
+                tracking_number_uuid: this.trackingNumberUuid,
+            });
+            this.activity = activity.toArray();
+            return activity;
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+}

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

@@ -16,6 +16,23 @@
             </InfoBlock>
         {{/if}}
 
+        {{#if this.currentWaypoint}}
+            <div class="my-4 rounded-md border border-blue-200 bg-blue-50 px-4 py-3 text-blue-900 dark:border-blue-700 dark:bg-blue-900 dark:text-blue-50">
+                <div class="text-xs font-semibold uppercase">Updating activity for</div>
+                <div class="mt-1 flex items-start justify-between gap-3">
+                    <div class="min-w-0">
+                        <div class="truncate text-sm font-semibold">{{or this.currentWaypoint.name this.currentWaypoint.public_id}}</div>
+                        <div class="truncate text-xs">{{or (place-address-html this.currentWaypoint showTitle=false) this.currentWaypoint.address this.currentWaypoint.street1}}</div>
+                    </div>
+                    {{#if this.currentWaypoint.status_code}}
+                        <Badge @status={{dasherize this.currentWaypoint.status_code}} class="uppercase">{{this.currentWaypoint.status_code}}</Badge>
+                    {{else if this.currentWaypoint.status}}
+                        <Badge @status={{dasherize this.currentWaypoint.status}} class="uppercase">{{this.currentWaypoint.status}}</Badge>
+                    {{/if}}
+                </div>
+            </div>
+        {{/if}}
+
         <fieldset class="my-5">
             <legend class="sr-only">
                 {{t "modals.order-new-activity.activity-options"}}
@@ -36,14 +53,18 @@
                         </div>
                         <label for={{concat "activity_" index}} class="ml-3 flex flex-col cursor-pointer w-full">
                             <span class="block text-sm font-semibold">
-                                {{activity.status}}
+                                {{or activity._resolved_status activity.status}}
                             </span>
                             <span class="block text-sm">
-                                {{activity.details}}
+                                {{or activity._resolved_details activity.details}}
 
                                 {{#if (eq activity.code "dispatched")}}
                                     <InfoBlock @type="warning" @size="xs" @icon="exclamation-triangle" @text={{t "modals.order-new-activity.dispatch"}} class="mt-1" />
                                 {{/if}}
+
+                                {{#if activity.require_pod}}
+                                    <InfoBlock @type="warning" @size="xs" @icon="camera" @text="Requires photo proof of delivery" class="mt-1" />
+                                {{/if}}
                             </span>
                         </label>
                         <div>
@@ -88,5 +109,60 @@
                 </div>
             </div>
         </fieldset>
+
+        {{#if this.selectedActivityRequiresPod}}
+            <div class="mb-4 rounded-md border border-yellow-300 bg-yellow-50 py-2 text-yellow-900 dark:border-yellow-700 dark:bg-yellow-900 dark:text-yellow-50">
+                <div class="flex flex-wrap items-center justify-between gap-2 px-3">
+                    <div class="min-w-0">
+                        <div class="text-xs font-semibold uppercase">Photo proof required</div>
+                        {{#if this.bypassProof}}
+                            <div class="text-xs text-yellow-800 dark:text-yellow-100">Proof bypass enabled.</div>
+                        {{else if this.hasUploadedProof}}
+                            <div class="text-xs text-yellow-800 dark:text-yellow-100">Proof uploaded.</div>
+                        {{else if this.uploadProofFile.isRunning}}
+                            <div class="text-xs text-yellow-800 dark:text-yellow-100">Uploading proof...</div>
+                        {{else}}
+                            <div class="text-xs text-yellow-800 dark:text-yellow-100">Upload proof before submitting.</div>
+                        {{/if}}
+                    </div>
+                    {{#unless this.bypassProof}}
+                        <FileUpload @name="photos" @accept={{join "," this.acceptedProofFileTypes}} @multiple={{false}} @onFileAdded={{perform this.uploadProofFile}}>
+                            <a tabindex={{0}} class="btn btn-magic btn-sm cursor-pointer">
+                                {{#if this.uploadProofFile.isRunning}}
+                                    <Spinner class="mr-1" />
+                                    Uploading
+                                {{else}}
+                                    <FaIcon @icon="camera" class="mr-1" />
+                                    Select photo
+                                {{/if}}
+                            </a>
+                        </FileUpload>
+                    {{/unless}}
+                </div>
+                <div class="px-3 mt-3 flex flex-wrap items-center justify-between gap-2 border-t border-yellow-50 pt-2 dark:border-yellow-700">
+                    <Toggle @isToggled={{this.bypassProof}} @onToggle={{this.toggleBypassProof}} @label="Bypass proof of delivery" @labelClass="text-xs" />
+                    <span class="text-xs text-yellow-800 dark:text-yellow-100">Use only when proof cannot be provided from the console.</span>
+                </div>
+                {{#if this.proofFiles}}
+                    <div class="mt-4 mb-1 px-3 space-x-2">
+                        {{#each this.proofFiles as |file|}}
+                            <div class="flex items-center justify-between gap-2 text-xs text-yellow-900 dark:text-yellow-50 border border-yellow-50 dark:border-yellow-700 shadow-sm px-2 py-1.5 rounded-md">
+                                <div class="text-xs flex items-center space-x-2">
+                                    <FaIcon @icon="file" />
+                                    <span class="truncate">{{file.name}}</span>
+                                </div>
+                                <span class="flex-shrink-0 font-semibold">
+                                    {{#if this.hasUploadedProof}}
+                                        Uploaded
+                                    {{else}}
+                                        {{round file.progress}}%
+                                    {{/if}}
+                                </span>
+                            </div>
+                        {{/each}}
+                    </div>
+                {{/if}}
+            </div>
+        {{/if}}
     </div>
 </Modal::Default>