fix(service-rate): resolve parcel box images after production fingerprinting

addon/components/service-rate/details.hbs

@@ -214,7 +214,7 @@
                     <div class="dark:text-gray-100">
                         <div class="grid grid-cols-7">
                             <div class="flex flex-col items-start justify-start pt-3">
-                                <img src="/engines-dist/images/boxes/{{parcelFee.size}}.png" alt="parcel size {{parcelFee.size}}" width="44" class="w-11" />
+                                <img src={{parcel-box-image parcelFee.size}} alt="parcel size {{parcelFee.size}}" width="44" class="w-11" />
                                 <div class="mt-2 text-sm font-medium">
                                     {{humanize parcelFee.size}}
                                 </div>

addon/components/service-rate/form.hbs

@@ -423,7 +423,7 @@
                     <div class="dark:text-gray-100">
                         <div class="grid grid-cols-7">
                             <div class="flex flex-col items-start justify-start pt-3">
-                                <img src="/engines-dist/images/boxes/{{parcelFee.size}}.png" alt="parcel size {{parcelFee.size}}" width="44" class="w-11" />
+                                <img src={{parcel-box-image parcelFee.size}} alt="parcel size {{parcelFee.size}}" width="44" class="w-11" />
                                 <label class="mt-2">{{humanize parcelFee.size}}</label>
                             </div>
                             <div class="col-span-6 dimensions-box space-x-2">

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;
+});

app/helpers/parcel-box-image.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/fleetops-engine/helpers/parcel-box-image';

tests/integration/helpers/parcel-box-image-test.js

@@ -0,0 +1,22 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Helper | parcel-box-image', function (hooks) {
+    setupRenderingTest(hooks);
+
+    test('it returns the box image for each parcel size', async function (assert) {
+        for (const size of ['small', 'medium', 'large', 'x-large']) {
+            this.set('size', size);
+            await render(hbs`{{parcel-box-image this.size}}`);
+            assert.dom().hasText(`/engines-dist/images/boxes/${size}.png`);
+        }
+    });
+
+    test('it falls back to the medium box for an unknown size', async function (assert) {
+        this.set('size', 'oversized');
+        await render(hbs`{{parcel-box-image this.size}}`);
+        assert.dom().hasText('/engines-dist/images/boxes/medium.png');
+    });
+});