From c255ee6dabf36871833726c62759b75250d0e90d Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Wed, 7 Oct 2026 13:33:24 +0800
Subject: [PATCH] fix(service-rate): resolve parcel box images after production
 fingerprinting

Production console builds fingerprint .png files, so boxes/small.png ships
as boxes/small-<hash>.png. broccoli-asset-rev rewrites literal asset URLs to
the hashed names, but it cannot rewrite the interpolated
/engines-dist/images/boxes/{{parcelFee.size}}.png, so the request misses and
the server answers with index.html.

Add a parcel-box-image helper that maps each size to a literal URL the
fingerprinter can rewrite, and use it in the service rate form and details.
---
 addon/components/service-rate/details.hbs     |  2 +-
 addon/components/service-rate/form.hbs        |  2 +-
 addon/helpers/parcel-box-image.js             | 16 ++++++++++++++
 app/helpers/parcel-box-image.js               |  1 +
 .../helpers/parcel-box-image-test.js          | 22 +++++++++++++++++++
 5 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 addon/helpers/parcel-box-image.js
 create mode 100644 app/helpers/parcel-box-image.js
 create mode 100644 tests/integration/helpers/parcel-box-image-test.js

diff --git a/addon/components/service-rate/details.hbs b/addon/components/service-rate/details.hbs
index 14118c398..3d7d15590 100644
--- a/addon/components/service-rate/details.hbs
+++ b/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>
diff --git a/addon/components/service-rate/form.hbs b/addon/components/service-rate/form.hbs
index f6729a39c..b7bd773af 100644
--- a/addon/components/service-rate/form.hbs
+++ b/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">
diff --git a/addon/helpers/parcel-box-image.js b/addon/helpers/parcel-box-image.js
new file mode 100644
index 000000000..5d28d8f53
--- /dev/null
+++ b/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;
+});
diff --git a/app/helpers/parcel-box-image.js b/app/helpers/parcel-box-image.js
new file mode 100644
index 000000000..debc6410a
--- /dev/null
+++ b/app/helpers/parcel-box-image.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/fleetops-engine/helpers/parcel-box-image';
diff --git a/tests/integration/helpers/parcel-box-image-test.js b/tests/integration/helpers/parcel-box-image-test.js
new file mode 100644
index 000000000..306222e8f
--- /dev/null
+++ b/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');
+    });
+});