@fleetbase/fleetops-engine 0.6.64 → 0.6.66

package/addon/components/part/form.hbs

@@ -161,6 +161,7 @@
                 <InputGroup @name="Asset">
                     <ModelSelect
                         @modelName={{this.assetModelName}}
+                        @selectedItemComponent={{if (resource-component "select-option" this.assetModelName) (component (resource-component "select-option" this.assetModelName) compact=true)}}
                         @selectedModel={{@resource.asset}}
                         @placeholder="Select compatible asset"
                         @triggerClass="form-select form-input"
@@ -170,7 +171,13 @@
                         @disabled={{cannot-write @resource}}
                         as |model|
                     >
-                        {{or model.name model.public_id}}
+                        {{#let (resource-component "select-option" this.assetModelName) as |selectOption|}}
+                            {{#if selectOption}}
+                                {{component selectOption option=model}}
+                            {{else}}
+                                {{or model.displayName model.name model.public_id}}
+                            {{/if}}
+                        {{/let}}
                     </ModelSelect>
                 </InputGroup>
             {{/if}}
@@ -186,6 +193,7 @@
             <InputGroup @name="Vendor" @wrapperClass="col-span-2">
                 <ModelSelect
                     @modelName="vendor"
+                    @selectedItemComponent={{component "select-option/vendor" compact=true}}
                     @selectedModel={{@resource.vendor}}
                     @placeholder="Select Vendor"
                     @triggerClass="form-select form-input"
@@ -196,7 +204,7 @@
                     @disabled={{cannot-write @resource}}
                     as |model|
                 >
-                    {{model.name}}
+                    <SelectOption::Vendor @option={{model}} />
                 </ModelSelect>
             </InputGroup>
 
@@ -206,6 +214,7 @@
             <InputGroup @name="Warranty" @wrapperClass="col-span-2">
                 <ModelSelect
                     @modelName="warranty"
+                    @selectedItemComponent={{component "select-option/warranty" compact=true}}
                     @selectedModel={{@resource.warranty}}
                     @placeholder="Select Warranty (optional)"
                     @triggerClass="form-select form-input"
@@ -216,9 +225,7 @@
                     @disabled={{cannot-write @resource}}
                     as |model|
                 >
-                    {{model.policy_number}}
-                    -
-                    {{model.provider}}
+                    <SelectOption::Warranty @option={{model}} />
                 </ModelSelect>
             </InputGroup>
         </div>

package/addon/components/part/pill.hbs

@@ -0,0 +1,24 @@
+<Resource::Pill
+    @resource={{(or @part @resource)}}
+    @resourceType="part"
+    @title={{@title}}
+    @titleFallback={{@titleFallback}}
+    @subtitle={{@subtitle}}
+    @showOnlineIndicator={{@showOnlineIndicator}}
+    @noPopover={{@noPopover}}
+    @popoverPlacement={{@popoverPlacement}}
+    @static={{@static}}
+    @onClick={{@onClick}}
+    @onView={{@onView}}
+    @anchorClass={{@anchorClass}}
+    @imageClass={{@imageClass}}
+    @imageWrapperClass={{@imageWrapperClass}}
+    @contentWrapperClass={{@contentWrapperClass}}
+    @titleClass={{@titleClass}}
+    @subtitleClass={{@subtitleClass}}
+    @useBlock={{(has-block)}}
+    ...attributes
+    as |resource|
+>
+    {{yield resource}}
+</Resource::Pill>

package/addon/components/part/summary.hbs

@@ -0,0 +1 @@
+<Resource::Summary @resource={{(or @part @resource)}} @resourceType="part" @onView={{@onView}} @showView={{@showView}} @onClose={{@onClose}} @titleFallback={{@titleFallback}} ...attributes />

package/addon/components/payload/pill.hbs

@@ -0,0 +1,24 @@
+<Resource::Pill
+    @resource={{(or @payload @resource)}}
+    @resourceType="payload"
+    @title={{@title}}
+    @titleFallback={{@titleFallback}}
+    @subtitle={{@subtitle}}
+    @showOnlineIndicator={{@showOnlineIndicator}}
+    @noPopover={{@noPopover}}
+    @popoverPlacement={{@popoverPlacement}}
+    @static={{@static}}
+    @onClick={{@onClick}}
+    @onView={{@onView}}
+    @anchorClass={{@anchorClass}}
+    @imageClass={{@imageClass}}
+    @imageWrapperClass={{@imageWrapperClass}}
+    @contentWrapperClass={{@contentWrapperClass}}
+    @titleClass={{@titleClass}}
+    @subtitleClass={{@subtitleClass}}
+    @useBlock={{(has-block)}}
+    ...attributes
+    as |resource|
+>
+    {{yield resource}}
+</Resource::Pill>

package/addon/components/payload/summary.hbs

@@ -0,0 +1 @@
+<Resource::Summary @resource={{(or @payload @resource)}} @resourceType="payload" @onView={{@onView}} @showView={{@showView}} @onClose={{@onClose}} @titleFallback={{@titleFallback}} ...attributes />

package/addon/components/place/details.hbs

@@ -75,7 +75,7 @@
             @zoomControl={{false}}
             as |layers|
         >
-            <layers.tile @url={{leaflet-tile-url}} />
+            <layers.tile @url={{(leaflet-tile-url)}} />
             <layers.marker
                 @id={{@resource.id}}
                 @icon={{icon iconUrl=(or @resource.avatar_url "/engines-dist/images/building-marker.png") iconSize=(array 40 40)}}

package/addon/components/place/pill.hbs

@@ -0,0 +1,24 @@
+<Resource::Pill
+    @resource={{(or @place @resource)}}
+    @resourceType="place"
+    @title={{@title}}
+    @titleFallback={{@titleFallback}}
+    @subtitle={{@subtitle}}
+    @showOnlineIndicator={{@showOnlineIndicator}}
+    @noPopover={{@noPopover}}
+    @popoverPlacement={{@popoverPlacement}}
+    @static={{@static}}
+    @onClick={{@onClick}}
+    @onView={{@onView}}
+    @anchorClass={{@anchorClass}}
+    @imageClass={{@imageClass}}
+    @imageWrapperClass={{@imageWrapperClass}}
+    @contentWrapperClass={{@contentWrapperClass}}
+    @titleClass={{@titleClass}}
+    @subtitleClass={{@subtitleClass}}
+    @useBlock={{(has-block)}}
+    ...attributes
+    as |resource|
+>
+    {{yield resource}}
+</Resource::Pill>

package/addon/components/place/summary.hbs

@@ -0,0 +1 @@
+<Resource::Summary @resource={{(or @place @resource)}} @resourceType="place" @onView={{@onView}} @showView={{@showView}} @onClose={{@onClose}} @titleFallback={{@titleFallback}} ...attributes />

package/addon/components/position/pill.hbs

@@ -0,0 +1,24 @@
+<Resource::Pill
+    @resource={{(or @position @resource)}}
+    @resourceType="position"
+    @title={{@title}}
+    @titleFallback={{@titleFallback}}
+    @subtitle={{@subtitle}}
+    @showOnlineIndicator={{@showOnlineIndicator}}
+    @noPopover={{@noPopover}}
+    @popoverPlacement={{@popoverPlacement}}
+    @static={{@static}}
+    @onClick={{@onClick}}
+    @onView={{@onView}}
+    @anchorClass={{@anchorClass}}
+    @imageClass={{@imageClass}}
+    @imageWrapperClass={{@imageWrapperClass}}
+    @contentWrapperClass={{@contentWrapperClass}}
+    @titleClass={{@titleClass}}
+    @subtitleClass={{@subtitleClass}}
+    @useBlock={{(has-block)}}
+    ...attributes
+    as |resource|
+>
+    {{yield resource}}
+</Resource::Pill>

package/addon/components/position/summary.hbs

@@ -0,0 +1 @@
+<Resource::Summary @resource={{(or @position @resource)}} @resourceType="position" @onView={{@onView}} @showView={{@showView}} @onClose={{@onClose}} @titleFallback={{@titleFallback}} ...attributes />

package/addon/components/positions-replay.hbs

@@ -100,6 +100,7 @@
                 </label>
                 <ModelSelect
                     @modelName="order"
+                    @selectedItemComponent={{component "select-option/order" compact=true}}
                     @selectedModel={{this.selectedOrder}}
                     @query={{this.orderFilters}}
                     @placeholder="Filter by order"
@@ -109,10 +110,7 @@
                     @onChange={{this.onOrderSelected}}
                     as |order|
                 >
-                    <div class="flex items-center justify-between">
-                        <span>{{order.tracking}}</span>
-                        <span class="text-xs text-gray-500">{{order.createdAt}}</span>
-                    </div>
+                    <SelectOption::Order @option={{order}} />
                 </ModelSelect>
             </div>
 

package/addon/components/public-inspection.hbs

@@ -0,0 +1,174 @@
+{{!
+    An inspection filled in from a tokenised link.
+
+    Rendered by the host console's top-level `virtual` route at
+    `/~/inspection?id=…&token=…`, which sits outside the console's shell and
+    outside its authentication gate — so this page brings its own full-height
+    background and its own header, and never assumes a signed-in user.
+}}
+<div class="public-inspection-page min-h-screen bg-gray-50 dark:bg-gray-900 py-4 px-3 sm:py-8 sm:px-4">
+    <div class="max-w-3xl mx-auto">
+        {{#if (and this.pinRequired (not this.form))}}
+            <div class="public-inspection-pin mx-auto max-w-sm rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-6 sm:p-8 text-center">
+                <FaIcon @icon="lock" @size="2x" class="text-blue-500 mb-4" />
+                <h1 class="text-lg font-semibold text-gray-900 dark:text-white">{{t "inspection.public.pin-title"}}</h1>
+                <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">{{t "inspection.public.pin-help"}}</p>
+                <div class="mt-5 space-y-3">
+                    <input
+                        type="text"
+                        inputmode="numeric"
+                        autocomplete="one-time-code"
+                        pattern="[0-9]*"
+                        maxlength="6"
+                        class="w-full form-input public-inspection-pin__input"
+                        aria-label={{t "inspection.public.pin-label"}}
+                        placeholder="••••••"
+                        {{sync-value this.pin}}
+                        {{on "input" this.updatePin}}
+                        {{on "keydown" this.pinKeydown}}
+                    />
+                    {{#if this.pinError}}
+                        <p class="text-sm text-red-600 dark:text-red-400" role="alert">{{this.pinError}}</p>
+                    {{/if}}
+                    <Button
+                        @type="primary"
+                        @size="lg"
+                        @icon="unlock"
+                        @text={{t "inspection.public.pin-continue"}}
+                        @disabled={{not this.pinIsComplete}}
+                        @isLoading={{this.loadInspection.isRunning}}
+                        @wrapperClass="w-full"
+                        class="w-full justify-center"
+                        @onClick={{this.submitPin}}
+                    />
+                </div>
+            </div>
+            <FleetbaseAttribution @showPoweredBy={{true}} class="mt-8" />
+
+        {{else if this.loadInspection.isRunning}}
+            <div class="py-24 flex items-center justify-center">
+                <Spinner @loadingMessage={{t "inspection.record.loading-form"}} class="text-sm dark:text-gray-100 flex items-center space-x-2" />
+            </div>
+
+        {{else if this.submission}}
+            <div class="rounded-lg border border-green-200 dark:border-green-800 bg-white dark:bg-gray-800 p-8 text-center">
+                <FaIcon @icon="circle-check" @size="2x" class="text-green-500 mb-4" />
+                <h1 class="text-lg font-semibold text-gray-900 dark:text-white">{{t "inspection.public.submitted-title"}}</h1>
+                <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">{{t "inspection.public.submitted-body"}}</p>
+                <p class="mt-4 text-xs font-mono text-gray-400">{{this.submission.id}}</p>
+            </div>
+
+        {{else if (and this.error (not this.form))}}
+            <div class="rounded-lg border border-red-200 dark:border-red-800 bg-white dark:bg-gray-800 p-8 text-center">
+                <FaIcon @icon="triangle-exclamation" @size="2x" class="text-red-500 mb-4" />
+                <h1 class="text-lg font-semibold text-gray-900 dark:text-white">{{t "inspection.public.unavailable-title"}}</h1>
+                <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">{{this.error}}</p>
+            </div>
+
+        {{else if this.form}}
+            <header class="mb-4">
+                <h1 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white">{{this.form.name}}</h1>
+                {{#if this.form.description}}
+                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{this.form.description}}</p>
+                {{/if}}
+                <div class="mt-3 flex flex-wrap gap-x-6 gap-y-1 text-xs text-gray-500 dark:text-gray-400">
+                    {{#if this.identity.assignee}}
+                        <div><span class="font-semibold text-gray-700 dark:text-gray-200">{{t "inspection.public.for"}}:</span> {{this.identity.assignee.name}}</div>
+                    {{/if}}
+                    {{#if this.identity.vehicle}}
+                        <div><span class="font-semibold text-gray-700 dark:text-gray-200">{{t "inspection.record.vehicle"}}:</span> {{this.identity.vehicle.name}}</div>
+                    {{/if}}
+                    {{#if this.identity.driver}}
+                        <div><span class="font-semibold text-gray-700 dark:text-gray-200">{{t "inspection.record.driver"}}:</span> {{this.identity.driver.name}}</div>
+                    {{/if}}
+                    {{#if this.identity.expires_at}}
+                        <div><span class="font-semibold text-gray-700 dark:text-gray-200">{{t "inspection.link.expires"}}:</span> {{format-date-fns this.identity.expires_at "dd MMM yyyy, HH:mm"}}</div>
+                    {{/if}}
+                </div>
+            </header>
+
+            <div class="inspection-sheet mb-4">
+                <div class="inspection-sheet__body">
+                    <div class="inspection-sheet__groups">
+                        <section class="inspection-group">
+                            <div class="inspection-group__header">
+                                <span class="inspection-group__name">{{t "inspection.record.details"}}</span>
+                            </div>
+                            <div class="inspection-group__grid" data-columns="2">
+                                <div class="inspection-cell">
+                                    <span class="inspection-cell__label">{{t "inspection.record.odometer"}}</span>
+                                    <div class="inspection-cell__control">
+                                        <input type="number" inputmode="decimal" class="w-full form-input" aria-label={{t "inspection.record.odometer"}} placeholder={{t "inspection.record.odometer-placeholder"}} {{sync-value this.odometer}} {{on "input" (fn this.updateReading "odometer")}} />
+                                    </div>
+                                </div>
+                                <div class="inspection-cell">
+                                    <span class="inspection-cell__label">{{t "inspection.record.engine-hours"}}</span>
+                                    <div class="inspection-cell__control">
+                                        <input type="number" inputmode="decimal" class="w-full form-input" aria-label={{t "inspection.record.engine-hours"}} placeholder={{t "inspection.record.engine-hours-placeholder"}} {{sync-value this.engineHours}} {{on "input" (fn this.updateReading "engineHours")}} />
+                                    </div>
+                                </div>
+                            </div>
+                        </section>
+                    </div>
+                </div>
+            </div>
+
+            {{#if this.hasSheet}}
+                <InspectionSheet @groups={{this.groups}} @values={{this.values}} @onChange={{this.setValue}} @uploader={{this.uploadFile}} />
+            {{else}}
+                <div class="inspection-sheet">
+                    <div class="inspection-sheet__body">
+                        <div class="inspection-group__empty px-4">{{t "inspection.record.form-has-no-fields"}}</div>
+                    </div>
+                </div>
+            {{/if}}
+
+            <div class="inspection-sheet mt-4">
+                <div class="inspection-sheet__body">
+                    <div class="inspection-sheet__groups">
+                        <section class="inspection-group">
+                            <div class="inspection-group__header">
+                                <span class="inspection-group__name">{{t "inspection.public.sign-off"}}</span>
+                            </div>
+                            <div class="inspection-group__grid" data-columns="1">
+                                <div class="inspection-cell">
+                                    <span class="inspection-cell__label">{{t "inspection.public.your-name"}}</span>
+                                    <span class="inspection-cell__hint">{{t "inspection.public.your-name-help"}}</span>
+                                    <div class="inspection-cell__control">
+                                        <input type="text" class="w-full form-input" aria-label={{t "inspection.public.your-name"}} placeholder={{t "inspection.public.your-name-placeholder"}} {{sync-value this.signatureName}} {{on "input" (fn this.updateReading "signatureName")}} />
+                                    </div>
+                                </div>
+                            </div>
+                        </section>
+                    </div>
+                </div>
+            </div>
+
+            {{#if this.error}}
+                <div class="mt-4 rounded-lg border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20 p-3 text-sm text-red-700 dark:text-red-300">{{this.error}}</div>
+            {{/if}}
+
+            <div class="public-inspection-submit mt-4 flex flex-col-reverse items-stretch gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+                <div class="text-xs text-gray-500 dark:text-gray-400 text-center sm:text-left">
+                    {{#if (eq this.blockedReason "required")}}
+                        {{t "inspection.public.blocked-required" count=this.summary.missingRequired}}
+                    {{else if (eq this.blockedReason "defects")}}
+                        {{t "inspection.public.blocked-defects" count=this.summary.incompleteDefects}}
+                    {{/if}}
+                </div>
+                <Button
+                    @type="primary"
+                    @size="lg"
+                    @icon="paper-plane"
+                    @text={{t "inspection.public.submit"}}
+                    @disabled={{not this.canSubmit}}
+                    @isLoading={{this.submitInspection.isRunning}}
+                    @wrapperClass="public-inspection-submit__button"
+                    @onClick={{perform this.submitInspection}}
+                />
+            </div>
+
+            <FleetbaseAttribution @showPoweredBy={{true}} class="mt-8" />
+        {{/if}}
+    </div>
+</div>

package/addon/components/public-inspection.js

@@ -0,0 +1,279 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action, get } from '@ember/object';
+import config from 'ember-get-config';
+import { task } from 'ember-concurrency';
+import { normalizeFieldGroups, flattenFields } from '../utils/inspection-form-structure';
+import { answerRows, seedAnswers, summarize } from '../utils/inspection-answers';
+
+/*
+ * FleetOps mounts its API at the application root — `fleetops.api.routing.prefix`
+ * is null, which is why its consumable routes are `/v1/...` and its internal
+ * ones `/int/v1/...` rather than sitting under an engine name the way ledger's
+ * do. The public inspection routes follow it, so the namespace here is `public`
+ * and not `fleet-ops/public`.
+ */
+const PUBLIC_NAMESPACE = 'public';
+
+/** The largest photo the link's upload endpoint accepts, matched to the server's limit. */
+const MAX_UPLOAD_BYTES = 10 * 1024 * 1024;
+
+/** How many digits a link's PIN has, matched to the server. */
+const PIN_LENGTH = 6;
+
+/*
+ * The fetch service turns a failed response carrying a string `error` into a
+ * bare Error of that message, dropping the rest of the body, so the page never
+ * saw `pin_required` and showed the PIN prompt as an error with nowhere to
+ * type. `rawError` rejects with the body itself.
+ */
+const REQUEST_OPTIONS = { namespace: PUBLIC_NAMESPACE, rawError: true };
+
+/** Asked for explicitly: without it Laravel answers a refused request with a redirect. */
+const JSON_ACCEPT = { Accept: 'application/json' };
+
+/**
+ * An inspection filled in from a tokenised link, outside the console.
+ *
+ * Registered into the `auth:login` menu registry as the hidden slug
+ * `inspection`, which the host console's top-level `virtual` route resolves at
+ * `/~/inspection` — a sibling of `console`, so none of the console's chrome or
+ * its authentication gate applies. The link itself carries the form and the
+ * token as query parameters.
+ *
+ * The sheet is the same `inspection-sheet` the console renders: whoever built
+ * the form sees it laid out the way they built it, whether it is being
+ * answered by a manager at a desk or a contractor on a phone.
+ */
+export default class PublicInspectionComponent extends Component {
+    @service urlSearchParams;
+    @service fetch;
+    @service intl;
+
+    @tracked form = null;
+    @tracked identity = null;
+    @tracked groups = [];
+    @tracked values = {};
+    @tracked odometer = '';
+    @tracked engineHours = '';
+    @tracked signatureName = '';
+    @tracked error = null;
+    @tracked submission = null;
+
+    /** The PIN given with the link, asked for before the form is shown. */
+    @tracked pin = '';
+    @tracked pinRequired = false;
+    @tracked pinError = null;
+
+    constructor() {
+        super(...arguments);
+        this.loadInspection.perform();
+    }
+
+    get formId() {
+        return this.urlSearchParams.get('id');
+    }
+
+    get token() {
+        return this.urlSearchParams.get('token');
+    }
+
+    get pinIsComplete() {
+        return this.pin.length === PIN_LENGTH;
+    }
+
+    /**
+     * The PIN travels as a header on every request the page makes, so it
+     * stays out of the URL and the access logs that record URLs.
+     */
+    get pinHeaders() {
+        return this.pin ? { ...JSON_ACCEPT, 'X-Inspection-Pin': this.pin } : { ...JSON_ACCEPT };
+    }
+
+    get fields() {
+        return flattenFields(this.groups);
+    }
+
+    get summary() {
+        return summarize(this.fields, this.values);
+    }
+
+    get hasSheet() {
+        return this.fields.length > 0;
+    }
+
+    /**
+     * What still stops this being submitted, said plainly rather than by
+     * greying out a button with no explanation.
+     */
+    get blockedReason() {
+        const { missingRequired, incompleteDefects } = this.summary;
+
+        if (missingRequired) {
+            return 'required';
+        }
+
+        return incompleteDefects ? 'defects' : null;
+    }
+
+    get canSubmit() {
+        return this.hasSheet && !this.blockedReason && !this.submitInspection.isRunning && !this.submission;
+    }
+
+    @task({ restartable: true })
+    *loadInspection() {
+        this.error = null;
+
+        if (!this.formId || !this.token) {
+            this.error = 'This inspection link is missing its form or its token.';
+            return;
+        }
+
+        try {
+            const response = yield this.fetch.get(`inspections/forms/${this.formId}`, { token: this.token }, { ...REQUEST_OPTIONS, headers: this.pinHeaders });
+
+            this.pinRequired = false;
+            this.pinError = null;
+            this.form = response?.form;
+            this.identity = response?.identity;
+            this.groups = normalizeFieldGroups(this.form);
+            this.values = seedAnswers(this.groups);
+        } catch (error) {
+            const body = yield this.failureBody(error);
+
+            // The link wants its PIN, or the one given was wrong: ask again,
+            // saying how many tries are left. Anything else, including a link
+            // locked by too many wrong PINs, is the page's error.
+            if (body?.pin_required) {
+                this.pinRequired = true;
+                this.pinError = this.pin ? this.intl.t('inspection.public.pin-wrong', { count: body.attempts_left ?? 0 }) : null;
+                this.pin = '';
+                return;
+            }
+
+            this.pinRequired = false;
+            this.error = yield this.describeFailure(error, 'This inspection could not be loaded.', body);
+        }
+    }
+
+    @task({ drop: true })
+    *submitInspection() {
+        this.error = null;
+
+        try {
+            const response = yield this.fetch.post(
+                `inspections/forms/${this.formId}/submit`,
+                {
+                    token: this.token,
+                    odometer: this.odometer === '' ? null : parseInt(this.odometer, 10),
+                    engine_hours: this.engineHours === '' ? null : parseInt(this.engineHours, 10),
+                    signature: this.signatureName ? { name: this.signatureName, signed_at: new Date().toISOString() } : null,
+                    custom_field_values: answerRows(this.fields, this.values),
+                },
+                { ...REQUEST_OPTIONS, headers: this.pinHeaders }
+            );
+
+            this.submission = response?.submission;
+        } catch (error) {
+            this.error = yield this.describeFailure(error, 'This inspection could not be submitted.');
+        }
+    }
+
+    /**
+     * Upload a photo or a signature through this link.
+     *
+     * The console's uploader posts to the platform's file endpoint, which
+     * needs a session a link does not have; this posts to the link's own
+     * upload endpoint with its token instead, and answers in the shape the
+     * sheet expects from the console.
+     */
+    @action async uploadFile(file, type) {
+        if (file?.size > MAX_UPLOAD_BYTES) {
+            this.error = 'That photo is larger than 10 MB. Try a smaller one.';
+            throw new Error(this.error);
+        }
+
+        const url = `${get(config, 'API.host')}/${PUBLIC_NAMESPACE}/inspections/forms/${encodeURIComponent(this.formId)}/files`;
+
+        try {
+            const response = await file.upload(url, { data: { token: this.token, type }, headers: { Accept: 'application/json', ...this.pinHeaders } });
+            const body = await response.json();
+
+            this.error = null;
+
+            return { id: body.file.id, url: body.file.url, filename: body.file.filename };
+        } catch (error) {
+            this.error = await this.describeFailure(error, 'This photo could not be uploaded.');
+            throw error;
+        }
+    }
+
+    /**
+     * What the server said went wrong, in words an inspector can act on. A
+     * link that was already used or has expired says so; being rate limited
+     * says to wait rather than showing a bare status code.
+     */
+    async describeFailure(error, fallback, body = null) {
+        body = body ?? (await this.failureBody(error));
+
+        // Laravel's throttle answers with this message and nothing else.
+        if (error?.status === 429 || body?.message === 'Too Many Attempts.') {
+            return 'Too many attempts from this device. Wait a minute and try again.';
+        }
+
+        const message = body?.error ?? body?.errors?.[0] ?? body?.message ?? error?.message;
+
+        return typeof message === 'string' && message ? message : fallback;
+    }
+
+    /**
+     * The JSON the server answered a failed request with. A `rawError` request
+     * rejects with that body itself; an upload rejects with the response, whose
+     * body can be read only once.
+     */
+    async failureBody(error) {
+        if (!error) {
+            return null;
+        }
+
+        if (error.payload) {
+            return error.payload;
+        }
+
+        if (typeof error.json === 'function') {
+            return await error.json().catch(() => null);
+        }
+
+        return error instanceof Error ? null : error;
+    }
+
+    /** Digits only, and no more than a PIN has: pasted spaces or dashes are dropped. */
+    @action updatePin(event) {
+        this.pin = String(event.target.value ?? '')
+            .replace(/\D/g, '')
+            .slice(0, PIN_LENGTH);
+        this.pinError = null;
+    }
+
+    @action submitPin() {
+        if (this.pinIsComplete && !this.loadInspection.isRunning) {
+            this.loadInspection.perform();
+        }
+    }
+
+    @action pinKeydown(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.submitPin();
+        }
+    }
+
+    @action setValue(value, field) {
+        this.values = { ...this.values, [field.uuid]: value };
+    }
+
+    @action updateReading(key, event) {
+        this[key] = event.target.value;
+    }
+}