@fleetbase/fleetops-engine 0.6.71 → 0.6.72

package/addon/controllers/settings/tracking-page.js

@@ -0,0 +1,212 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { task, timeout } from 'ember-concurrency';
+import trackingPageTheme, { contrastRatio, inkFor, normalizeHex, DEFAULT_ACCENT } from '../../utils/tracking-page-theme';
+
+/**
+ * The locales a tracking page can be shown in, labelled in their own language.
+ */
+export const TRACKING_PAGE_LOCALES = [
+    { code: 'en-us', label: 'English' },
+    { code: 'ar-ae', label: 'العربية' },
+    { code: 'bg-bg', label: 'Български' },
+    { code: 'es-pa', label: 'Español' },
+    { code: 'fr-fr', label: 'Français' },
+    { code: 'mn-mn', label: 'Монгол' },
+    { code: 'pt-br', label: 'Português' },
+    { code: 'ru-ru', label: 'Русский' },
+    { code: 'uk-ua', label: 'Українська' },
+    { code: 'vi-vn', label: 'Tiếng Việt' },
+];
+
+/**
+ * Keys the server adds to the saved config when it reads it back. They are facts about
+ * the instance, not settings, so they are kept apart and never sent back on save.
+ */
+const READ_ONLY_KEYS = ['slug_validation', 'accent_ink', 'accent_contrast', 'sms_available', 'customer_portal_installed', 'admin'];
+
+/**
+ * Settings::TrackingPageController
+ *
+ * The company's customer tracking page: which pages are on and at what address, branding,
+ * how customers prove who they are, and what verified customers see.
+ */
+export default class SettingsTrackingPageController extends Controller {
+    @service fetch;
+    @service notifications;
+    @service intl;
+    @service currentUser;
+
+    @tracked config = null;
+    @tracked slugValidation = null;
+    @tracked smsAvailable = false;
+    @tracked customerPortalInstalled = false;
+    @tracked loadFailed = false;
+
+    /**
+     * Take the settings as the server returns them.
+     */
+    load(settings) {
+        if (!settings) {
+            this.loadFailed = true;
+            return;
+        }
+
+        const config = { ...settings };
+        READ_ONLY_KEYS.forEach((key) => delete config[key]);
+
+        this.config = config;
+        this.slugValidation = settings.slug_validation ?? null;
+        this.smsAvailable = settings.sms_available === true;
+        this.customerPortalInstalled = settings.customer_portal_installed === true;
+        this.loadFailed = false;
+    }
+
+    get accent() {
+        return normalizeHex(this.config?.branding?.accent) ?? DEFAULT_ACCENT;
+    }
+
+    get accentInk() {
+        return inkFor(this.accent);
+    }
+
+    get accentContrast() {
+        return contrastRatio(this.accent, this.accentInk);
+    }
+
+    get accentReadable() {
+        return this.accentContrast >= 4.5;
+    }
+
+    get previewLightStyle() {
+        return trackingPageTheme(this.config?.branding, false);
+    }
+
+    get previewDarkStyle() {
+        return trackingPageTheme(this.config?.branding, true);
+    }
+
+    get companyName() {
+        return this.currentUser.companyName ?? '';
+    }
+
+    get displayName() {
+        return this.config?.branding?.display_name || this.companyName;
+    }
+
+    get orgPageBase() {
+        return `${window.location.origin}/~/t/`;
+    }
+
+    get orgPageUrl() {
+        return `${window.location.origin}/~/t/${encodeURIComponent(this.config?.org_page?.slug ?? '')}`;
+    }
+
+    get genericPageUrl() {
+        return `${window.location.origin}/~/track`;
+    }
+
+    get slugIsValid() {
+        return this.slugValidation?.valid === true;
+    }
+
+    get localeOptions() {
+        const enabled = this.config?.branding?.locales ?? [];
+        const defaultLocale = this.config?.branding?.default_locale;
+
+        return TRACKING_PAGE_LOCALES.map((locale) => ({
+            ...locale,
+            enabled: enabled.includes(locale.code),
+            isDefault: locale.code === defaultLocale,
+        }));
+    }
+
+    get linkTargetOptions() {
+        return ['auto', 'org', 'generic'].map((value) => ({ value, label: this.intl.t(`tracking-page.settings.links-target-${value}`) }));
+    }
+
+    get themeOptions() {
+        return ['system', 'light'].map((value) => ({ value, label: this.intl.t(`tracking-page.settings.theme-${value}`) }));
+    }
+
+    get driverContactOptions() {
+        return ['company', 'driver'].map((value) => ({ value, label: this.intl.t(`tracking-page.settings.driver-contact-${value}`) }));
+    }
+
+    /**
+     * Set one value by its dotted path, replacing the config so the form and preview update.
+     */
+    @action update(path, value) {
+        const config = JSON.parse(JSON.stringify(this.config));
+        const keys = path.split('.');
+        const last = keys.pop();
+        let target = config;
+        for (const key of keys) {
+            target = target[key];
+        }
+
+        target[last] = value;
+        this.config = config;
+    }
+
+    @action updateFromEvent(path, event) {
+        this.update(path, event.target.value);
+    }
+
+    @action updateNumber(path, event) {
+        this.update(path, parseInt(event.target.value, 10));
+    }
+
+    @action selectOption(path, option) {
+        this.update(path, option?.value ?? option);
+    }
+
+    @action updateSlug(event) {
+        const slug = event.target.value.toLowerCase().replace(/\s+/g, '-');
+        this.update('org_page.slug', slug);
+        this.validateSlug.perform(slug);
+    }
+
+    @action toggleLocale(code) {
+        const locales = this.config.branding.locales ?? [];
+        if (code === this.config.branding.default_locale) {
+            return;
+        }
+
+        this.update('branding.locales', locales.includes(code) ? locales.filter((locale) => locale !== code) : [...locales, code]);
+    }
+
+    @action setDefaultLocale(option) {
+        const code = option?.value ?? option;
+        const locales = this.config.branding.locales ?? [];
+        this.update('branding.default_locale', code);
+        if (!locales.includes(code)) {
+            this.update('branding.locales', [...locales, code]);
+        }
+    }
+
+    get defaultLocaleOptions() {
+        return TRACKING_PAGE_LOCALES.map((locale) => ({ value: locale.code, label: locale.label }));
+    }
+
+    @task({ restartable: true }) *validateSlug(slug) {
+        yield timeout(350);
+        try {
+            this.slugValidation = yield this.fetch.post('fleet-ops/settings/tracking-page-settings/validate-slug', { slug });
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @task *saveSettings() {
+        try {
+            const settings = yield this.fetch.post('fleet-ops/settings/tracking-page-settings', { trackingPage: this.config });
+            this.load(settings);
+            this.notifications.success(this.intl.t('tracking-page.settings.saved'));
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+}

package/addon/extension.js

@@ -117,12 +117,34 @@ export default {
                     icon: 'satellite-dish',
                     component: new ExtensionComponent('@fleetbase/fleetops-engine', 'admin/telematics-settings'),
                 }),
+                new MenuItem({
+                    title: 'Tracking Page',
+                    icon: 'magnifying-glass-location',
+                    component: new ExtensionComponent('@fleetbase/fleetops-engine', 'admin/tracking-page-settings'),
+                }),
             ],
             {
                 slug: 'fleet-ops',
             }
         );
 
+        // Links printed or emailed without the public `~/` prefix (/track-order?order=...) land
+        // inside the console. Signed-out visitors are sent on to the public route after login;
+        // registering the page in the console too shows it to signed-in staff instead of an
+        // empty console page.
+        for (const slug of ['track', 'track-order']) {
+            menuService.registerMenuItem(
+                'console',
+                new MenuItem({
+                    title: 'Track Order',
+                    slug,
+                    section: null,
+                    view: null,
+                    component: new ExtensionComponent('@fleetbase/fleetops-engine', 'tracking-page'),
+                })
+            );
+        }
+
         // Register track order button
         menuService.registerMenuItem(
             'auth:login',
@@ -135,7 +157,39 @@ export default {
                 // btn-auth (ember-ui): the sign-in page's neutral button, matching the
                 // console's "Continue with ..." provider buttons, hover included.
                 wrapperClass: 'btn-block btn-auth',
-                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'order-tracking-lookup'),
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'tracking-page'),
+                onClick: (menuItem) => {
+                    universe.transitionMenuItem('virtual', menuItem);
+                },
+            })
+        );
+
+        // The customer tracking page: /~/track/{number} is the shared page.
+        menuService.registerMenuItem(
+            'auth:login',
+            new MenuItem({
+                title: 'Track',
+                route: 'virtual',
+                slug: 'track',
+                type: 'link',
+                wrapperClass: 'hidden',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'tracking-page'),
+                onClick: (menuItem) => {
+                    universe.transitionMenuItem('virtual', menuItem);
+                },
+            })
+        );
+
+        // A company's own tracking page: /~/t/{slug}/{number}.
+        menuService.registerMenuItem(
+            'auth:login',
+            new MenuItem({
+                title: 'Company tracking',
+                route: 'virtual',
+                slug: 't',
+                type: 'link',
+                wrapperClass: 'hidden',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'tracking-page'),
                 onClick: (menuItem) => {
                     universe.transitionMenuItem('virtual', menuItem);
                 },
@@ -413,6 +467,16 @@ export default {
                 order: 80,
                 default: true,
             }),
+            new Widget({
+                id: 'fleet-ops-proof-of-delivery-widget',
+                name: 'Proof of Delivery',
+                description: 'The latest proof of delivery photos, each linking to its order.',
+                icon: 'camera',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/proof-of-delivery'),
+                grid_options: { w: 4, h: 9, minW: 3, minH: 6 },
+                category: 'Operations',
+                default: false,
+            }),
             new Widget({
                 id: 'fleet-ops-geofence-violations-widget',
                 name: 'Geofence Violations',

package/addon/helpers/parcel-box-image.js

@@ -0,0 +1,16 @@
+import { helper } from '@ember/component/helper';
+
+// Each URL is written out in full so a production build's fingerprinting
+// (broccoli-asset-rev) rewrites it to the hashed file name. An interpolated
+// path such as `boxes/${size}.png` is never rewritten, so it misses the
+// fingerprinted file and the server answers with the console's index.html.
+const PARCEL_BOX_IMAGES = {
+    small: '/engines-dist/images/boxes/small.png',
+    medium: '/engines-dist/images/boxes/medium.png',
+    large: '/engines-dist/images/boxes/large.png',
+    'x-large': '/engines-dist/images/boxes/x-large.png',
+};
+
+export default helper(function parcelBoxImage([size]) {
+    return PARCEL_BOX_IMAGES[size] ?? PARCEL_BOX_IMAGES.medium;
+});

package/addon/routes/operations/orders/index/new.js

@@ -1,6 +1,5 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
-import { action } from '@ember/object';
 
 export default class OperationsOrdersIndexNewRoute extends Route {
     @service notifications;
@@ -9,9 +8,11 @@ export default class OperationsOrdersIndexNewRoute extends Route {
     @service intl;
     @service sidebar;
 
-    @action willTransition() {
-        if (this.controller) {
-            this.controller.reset();
+    // Reset the draft only when leaving the route. A refresh of this route (e.g. after saving
+    // a place or customer from a modal) also transitions, and must keep what was entered.
+    resetController(controller, isExiting) {
+        if (isExiting) {
+            controller.reset();
         }
     }
 

package/addon/routes/operations/scheduler/index.js

@@ -61,7 +61,7 @@ export default class OperationsSchedulerIndexRoute extends Route {
     }
 
     resetController(controller) {
-        // Close all socket channels when the dispatcher navigates away
+        // Close the board's own socket channels when the dispatcher navigates away
         // to prevent memory leaks and stale event handlers.
         controller.unsubscribeFromRealTimeUpdates();
     }

package/addon/routes/settings/tracking-page.js

@@ -0,0 +1,31 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default class SettingsTrackingPageRoute extends Route {
+    @service notifications;
+    @service hostRouter;
+    @service abilities;
+    @service intl;
+    @service fetch;
+
+    beforeModel() {
+        if (this.abilities.cannot('fleet-ops view tracking-page-settings')) {
+            this.notifications.warning(this.intl.t('common.unauthorized-access'));
+            return this.hostRouter.transitionTo('console.fleet-ops');
+        }
+    }
+
+    async model() {
+        try {
+            return await this.fetch.get('fleet-ops/settings/tracking-page-settings');
+        } catch (error) {
+            this.notifications.serverError(error);
+            return null;
+        }
+    }
+
+    setupController(controller, model) {
+        super.setupController(controller, model);
+        controller.load(model);
+    }
+}

package/addon/routes.js

@@ -323,6 +323,7 @@ export default buildRoutes(function () {
         this.route('map');
         this.route('orchestrator');
         this.route('scheduling');
+        this.route('tracking-page');
         this.route('telematics');
         this.route('payments', function () {
             this.route('index', { path: '/' });

package/addon/services/location.js

@@ -4,7 +4,7 @@ import { isBlank } from '@ember/utils';
 import { isArray } from '@ember/array';
 import { later } from '@ember/runloop';
 import { debug } from '@ember/debug';
-import getWithDefault from '@fleetbase/ember-core/utils/get-with-default';
+import { isLatitude, isLongitude, isZoom } from '../utils/map-default-view';
 
 /**
  * Service for managing and retrieving user location data.
@@ -46,17 +46,30 @@ export default class LocationService extends Service {
      */
     @service fetch;
 
+    /**
+     * Company map settings, which carry the default map view.
+     * @type {MapSettingsService}
+     */
+    @service mapSettings;
+
     /**
      * Current latitude of the user.
      * @type {number}
      */
-    @tracked latitude = this.DEFAULT_LATITUDE;
+    @tracked latitude = LocationService.DEFAULT_LATITUDE;
 
     /**
      * Current longitude of the user.
      * @type {number}
      */
-    @tracked longitude = this.DEFAULT_LONGITUDE;
+    @tracked longitude = LocationService.DEFAULT_LONGITUDE;
+
+    /**
+     * Zoom suggested by the source of the location (a company default view or
+     * a country centre), or null to let the map use its own default.
+     * @type {number|null}
+     */
+    @tracked zoom = null;
 
     /**
      * Flag indicating whether the user's location has been located.
@@ -73,7 +86,7 @@ export default class LocationService extends Service {
         if (typeof this.latitude === 'number' && !isNaN(this.latitude) && this.latitude >= -90 && this.latitude <= 90) {
             return this.latitude;
         }
-        return this.constructor.DEFAULT_LATITUDE;
+        return LocationService.DEFAULT_LATITUDE;
     }
 
     /**
@@ -85,14 +98,23 @@ export default class LocationService extends Service {
         if (typeof this.longitude === 'number' && !isNaN(this.longitude) && this.longitude >= -180 && this.longitude <= 180) {
             return this.longitude;
         }
-        return this.constructor.DEFAULT_LONGITUDE;
+        return LocationService.DEFAULT_LONGITUDE;
+    }
+
+    /**
+     * Retrieves the zoom suggested by the current location source, or null.
+     * @returns {number|null}
+     */
+    getZoom() {
+        return isZoom(this.zoom) ? this.zoom : null;
     }
 
     /**
-     * Attempts to fetch the user's location from various sources including cached data,
-     * navigator geolocation, or WHOIS data. It first tries to get the cached coordinates.
-     * If not available or outdated, it tries the browser's geolocation API.
-     * As a fallback, it uses WHOIS data associated with the user's account.
+     * Resolves where maps should open. A company-configured default centre
+     * (Settings > Map) wins outright. Otherwise it tries the active order
+     * destinations, then the browser's geolocation API, then the IP lookup,
+     * then the centre of the company's country, then the hardcoded default.
+     * See utils/map-default-view for the full precedence.
      *
      * @returns {Promise<Object>} A promise that resolves to an object containing latitude and longitude.
      */
@@ -102,6 +124,14 @@ export default class LocationService extends Service {
             return { latitude: this.latitude, longitude: this.longitude };
         }
 
+        // The company's chosen starting point beats any guess about the user.
+        await this.mapSettings.load();
+        const defaultCenter = this.mapSettings.defaultMapCenter;
+        if (defaultCenter) {
+            this.updateLocation(defaultCenter);
+            return { latitude: defaultCenter.latitude, longitude: defaultCenter.longitude };
+        }
+
         try {
             const coordinates = await this.fetch.cachedGet('fleet-ops/live/coordinates', {}, { expirationInterval: 1, expirationIntervalUnit: 'hour' });
 
@@ -184,33 +214,51 @@ export default class LocationService extends Service {
         }
     }
 
+    /**
+     * Discards the resolved location and resolves it again, e.g. after the
+     * company's default map view changed. Listeners of `user.located` (the
+     * live map) move to the new location.
+     *
+     * @returns {Promise<Object>} The newly resolved coordinates.
+     */
+    async relocate() {
+        this.located = false;
+        return this.getUserLocation();
+    }
+
     /**
      * Retrieves the user's location based on WHOIS data associated with their account.
-     * Defaults to predefined coordinates if WHOIS data is not available.
+     * When the IP lookup failed it falls back to the centre of the company's
+     * country, and only then to the predefined coordinates.
      *
      * @returns {Object} An object containing latitude and longitude from WHOIS data or default values.
      */
     getUserLocationFromWhois() {
-        const whois = this.currentUser.getOption('whois', {});
-        const coordinates = {
-            latitude: getWithDefault(whois, 'latitude', this.DEFAULT_LATITUDE),
-            longitude: getWithDefault(whois, 'longitude', this.DEFAULT_LONGITUDE),
-        };
-
-        this.updateLocation(coordinates);
-        return coordinates;
+        const whois = this.currentUser.getOption('whois', {}) ?? {};
+        const latitude = Number(whois.latitude);
+        const longitude = Number(whois.longitude);
+        // The IP lookup's fallback reports null coordinates, which Number() turns into Null Island.
+        const hasWhoisCoordinates = whois.latitude != null && whois.longitude != null && isLatitude(latitude) && isLongitude(longitude);
+
+        const location = hasWhoisCoordinates
+            ? { latitude, longitude }
+            : (this.mapSettings.companyCountryCenter ?? { latitude: LocationService.DEFAULT_LATITUDE, longitude: LocationService.DEFAULT_LONGITUDE });
+
+        this.updateLocation(location);
+        return { latitude: location.latitude, longitude: location.longitude };
     }
 
     /**
      * Updates the service's tracked properties with the new location data.
      * Triggers an event to notify other parts of the application that the user's location has been updated.
      *
-     * @param {Object} coordinates - An object containing the latitude and longitude to be set.
+     * @param {Object} coordinates - An object containing the latitude and longitude to be set, and optionally a suggested zoom.
      */
-    updateLocation({ latitude, longitude }) {
+    updateLocation({ latitude, longitude, zoom = null }) {
         this.latitude = latitude;
         this.longitude = longitude;
+        this.zoom = isZoom(zoom) ? zoom : null;
         this.located = true;
-        this.universe.trigger('user.located', { latitude, longitude });
+        this.universe.trigger('user.located', { latitude, longitude, zoom: this.zoom });
     }
 }

package/addon/services/map-settings.js

@@ -2,6 +2,7 @@ import Service from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { getLeafletTileUrl } from '../utils/leaflet-tile-url';
+import { defaultMapCenter, companyCountryCenter } from '../utils/map-default-view';
 
 const DEFAULT_SETTINGS = {
     mapProvider: 'leaflet',
@@ -12,6 +13,11 @@ const DEFAULT_SETTINGS = {
     googleMapsMapType: 'roadmap',
     showGoogleMapsTrafficLayer: false,
     showGoogleMapsTransitLayer: false,
+    defaultMapLatitude: null,
+    defaultMapLongitude: null,
+    defaultMapZoom: null,
+    fitMapToVehicles: false,
+    companyMapCenter: null,
 };
 
 export default class MapSettingsService extends Service {
@@ -47,6 +53,28 @@ export default class MapSettingsService extends Service {
         return Boolean(this.settings.showGoogleMapsTransitLayer);
     }
 
+    /**
+     * The company's configured default centre for the live map, or null.
+     *
+     * @return {{latitude: Number, longitude: Number, zoom: Number}|null}
+     */
+    get defaultMapCenter() {
+        return defaultMapCenter(this.settings);
+    }
+
+    /**
+     * The centre of the company's country, used when nothing better is known.
+     *
+     * @return {{latitude: Number, longitude: Number, zoom: Number}|null}
+     */
+    get companyCountryCenter() {
+        return companyCountryCenter(this.settings);
+    }
+
+    get fitMapToVehicles() {
+        return Boolean(this.settings.fitMapToVehicles);
+    }
+
     get isGoogleMaps() {
         return this.mapProvider === 'google';
     }

package/addon/services/order-allocation.js

@@ -35,7 +35,7 @@ export default class OrderAllocationService extends Service {
     @task *loadSettings() {
         try {
             const settings = yield this.fetch.get('fleet-ops/settings/orchestrator-settings');
-            this.activeEngineId = settings.orchestrator_engine ?? 'greedy';
+            this.activeEngineId = settings.allocation_engine ?? 'greedy';
             return settings;
         } catch (error) {
             this.notifications.serverError(error);