+
{{#if (has-block "body")}}
{{yield to="body"}}
{{/if}}
@@ -26,9 +26,7 @@
-
- {{this.statusLabel}}
-
+
{{this.statusLabel}}
diff --git a/addon/components/driver/card.js b/addon/components/driver/card.js
index cab7109b1..829b921ad 100644
--- a/addon/components/driver/card.js
+++ b/addon/components/driver/card.js
@@ -3,17 +3,6 @@ import { inject as service } from '@ember/service';
import { get } from '@ember/object';
import config from 'ember-get-config';
-const STATUS_TONES = {
- available: 'text-green-500',
- active: 'text-green-500',
- on_duty: 'text-green-500',
- busy: 'text-yellow-500',
- assigned: 'text-yellow-500',
- unavailable: 'text-gray-400',
- offline: 'text-gray-400',
- suspended: 'text-red-500',
-};
-
export default class DriverCardComponent extends Component {
@service driverActions;
@@ -33,10 +22,6 @@ export default class DriverCardComponent extends Component {
return this.statusValue || '-';
}
- get statusToneClass() {
- return STATUS_TONES[this.statusValue] ?? STATUS_TONES[String(this.statusValue).toLowerCase()] ?? 'text-gray-400';
- }
-
get assignedVehicleLabel() {
const driver = this.resource;
diff --git a/app/components/driver/card.js b/app/components/driver/card.js
new file mode 100644
index 000000000..978a48ea5
--- /dev/null
+++ b/app/components/driver/card.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/fleetops-engine/components/driver/card';
diff --git a/tests/integration/components/driver/card-test.js b/tests/integration/components/driver/card-test.js
new file mode 100644
index 000000000..08ad86992
--- /dev/null
+++ b/tests/integration/components/driver/card-test.js
@@ -0,0 +1,48 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import Service from '@ember/service';
+
+class DriverActionsServiceStub extends Service {
+ transition = {
+ view() {},
+ edit() {},
+ };
+
+ delete() {}
+}
+
+module('Integration | Component | driver/card', function (hooks) {
+ setupRenderingTest(hooks);
+
+ hooks.beforeEach(function () {
+ this.owner.register('service:driver-actions', DriverActionsServiceStub);
+ this.set('driver', {
+ name: 'Test Driver',
+ phone: '+1 555 0100',
+ public_id: 'driver_test',
+ photo_url: null,
+ online: true,
+ status: 'available',
+ updatedAt: 'Today',
+ vehicle_assigned: {
+ display_name: 'Truck 12',
+ },
+ });
+ });
+
+ test('it renders a full-bleed photo, header online indicator, and status badge', async function (assert) {
+ await render(hbs``);
+
+ assert.dom('[data-test-driver-name]').hasText('Test Driver');
+ assert.dom('[data-test-driver-online-indicator]').exists('online indicator renders beside the driver name');
+ assert.dom('[data-test-driver-online-indicator]').hasClass('text-green-500');
+ assert.dom('[data-test-driver-photo]').hasClass('w-full');
+ assert.dom('[data-test-driver-photo]').hasClass('h-full');
+ assert.dom('[data-test-driver-photo]').hasClass('rounded-none');
+ assert.dom('[data-test-driver-photo]').doesNotHaveClass('rounded-full');
+ assert.dom('[data-test-driver-status-badge]').hasClass('available-status-badge');
+ assert.dom('[data-test-driver-status-badge]').hasText('available');
+ });
+});