feat(storefront): UX overhaul — context switcher, network screens, cards, panels, promotions hub, create order

addon/adapters/promotion-redemption.js

@@ -0,0 +1 @@
+export { default } from './storefront';

addon/components/add-product-as-entity-button.hbs

@@ -1,3 +1,3 @@
 {{#if (eq @order.type "storefront")}}
-    <Button @type="magic" @icon="square-plus" @text="Add Product from Storefront" @onClick={{this.promptProductSelection}} />
+    <Button @type="magic" @icon="square-plus" @text={{t "storefront.orders.create.add-product-from-storefront"}} @onClick={{this.promptProductSelection}} />
 {{/if}}

addon/components/add-product-as-entity-button.js

@@ -5,6 +5,7 @@ import { isArray } from '@ember/array';
 import { inject as service } from '@ember/service';
 
 export default class AddProductAsEntityButtonComponent extends Component {
+    @service intl;
     @service modalsManager;
     @service fetch;
     @service notifications;
@@ -19,7 +20,7 @@ export default class AddProductAsEntityButtonComponent extends Component {
 
     @action promptProductSelection() {
         this.modalsManager.show('modals/select-product', {
-            title: 'Select Product to Add to Order',
+            title: this.intl.t('storefront.orders.create.select-product-title'),
             modalClass: 'modal-lg',
             acceptButtonText: 'Add Products',
             acceptButtonDisabled: true,

addon/components/catalog/pill.hbs

@@ -0,0 +1,24 @@
+<Resource::Pill
+    @resource={{(or @catalog @resource)}}
+    @resourceType="catalog"
+    @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>

addon/components/catalog/summary.hbs

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

addon/components/cell/catalog-identity.hbs

@@ -0,0 +1 @@
+<Table::Cell::Identity @row={{@row}} @column={{@column}} @value={{@value}} @onClick={{@onClick}} @resourceType="catalog" ...attributes />

addon/components/cell/food-truck-identity.hbs

@@ -0,0 +1 @@
+<Table::Cell::Identity @row={{@row}} @column={{@column}} @value={{@value}} @onClick={{@onClick}} @resourceType="food-truck" ...attributes />

addon/components/cell/network-identity.hbs

@@ -0,0 +1 @@
+<Table::Cell::Identity @row={{@row}} @column={{@column}} @value={{@value}} @onClick={{@onClick}} @resourceType="network" ...attributes />

addon/components/cell/product-identity.hbs

@@ -0,0 +1 @@
+<Table::Cell::Identity @row={{@row}} @column={{@column}} @value={{@value}} @onClick={{@onClick}} @resourceType="product" ...attributes />

addon/components/cell/promotion-identity.hbs

@@ -0,0 +1 @@
+<Table::Cell::Identity @row={{@row}} @column={{@column}} @value={{@value}} @onClick={{@onClick}} @resourceType="promotion" ...attributes />

addon/components/cell/store-identity.hbs

@@ -0,0 +1 @@
+<Table::Cell::Identity @row={{@row}} @column={{@column}} @value={{@value}} @onClick={{@onClick}} @resourceType="store" ...attributes />

addon/components/customer-panel.hbs

@@ -2,17 +2,21 @@
     @registry="storefront:customer:details"
     @resource={{this.customer}}
     @controller={{this}}
-    @headerComponent={{component "customer-panel/panel-header" resource=this.customer actionButtons=this.actionButtons}}
+    @headerComponent={{component "customer-panel/panel-header" resource=this.customer actionButtons=this.actionButtons insights=this.insights isLoadingInsights=this.loadInsights.isRunning}}
     @headerTitle={{or this.customer.name}}
     @actionButtons={{this.actionButtons}}
     @onPressCancel={{this.onPressCancel}}
     @onOverlayReady={{this.setOverlayContext}}
     @headerClass="no-bottom-border"
-    @bodyClass="no-scroll"
-    @width={{or this.width @width "570px"}}
+    @bodyClass="no-scroll storefront-overlay-body"
+    @width={{or this.width @width "600px"}}
     @isResizable={{or this.isResizable @isResizable}}
 >
-    <TabNavigation @tabs={{this.tabs}} @activeTabId={{this.tab.id}} @onTabChange={{this.onTabChanged}} @contentClass="scrollable" @tablistClass="pl-2" as |activeTab|>
-        {{component activeTab.component customer=this.customer tabOptions=activeTab options=activeTab.componentParams}}
-    </TabNavigation>
+    {{#if this.isEditing}}
+        <CustomerPanel::EditForm @customer={{this.customer}} @onDone={{this.doneEditing}} />
+    {{else}}
+        <TabNavigation @tabs={{this.tabs}} @activeTabId={{this.tab.id}} @onTabChange={{this.onTabChanged}} @contentClass="scrollable" @tablistClass="pl-2" as |activeTab|>
+            {{component activeTab.component customer=this.customer tabOptions=activeTab options=activeTab.componentParams insights=this.insights onChange=this.reload}}
+        </TabNavigation>
+    {{/if}}
 </Layout::Resource::Panel>

addon/components/customer-panel.js

@@ -4,8 +4,11 @@ import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { isArray } from '@ember/array';
 import { dasherize } from '@ember/string';
-import CustomerPanelDetailsComponent from './customer-panel/details';
+import CustomerPanelOverviewComponent from './customer-panel/overview';
 import CustomerPanelOrdersComponent from './customer-panel/orders';
+import CustomerPanelPlacesComponent from './customer-panel/places';
+import CustomerPanelActivityComponent from './customer-panel/activity';
+import { task } from 'ember-concurrency';
 import contextComponentCallback from '@fleetbase/ember-core/utils/context-component-callback';
 import applyContextComponentArguments from '@fleetbase/ember-core/utils/apply-context-component-arguments';
 
@@ -50,7 +53,13 @@ export default class CustomerPanelComponent extends Component {
      *
      * @type {Service}
      */
-    @service contextPanel;
+    @service intl;
+    @service notifications;
+    @service storefront;
+    @tracked insights = null;
+
+    /** Whether the panel shows the details form instead of the tabs. */
+    @tracked isEditing = false;
 
     /**
      * The current active tab.
@@ -80,9 +89,13 @@ export default class CustomerPanelComponent extends Component {
     constructor() {
         super(...arguments);
         this.customer = this.args.customer;
-
-        this.tab = this.getTabUsingSlug(this.args.tab);
+        // The context panel may pass the customer and tab as component arguments; apply them
+        // before anything reads `customer`, or Glimmer asserts on an update after a read.
         applyContextComponentArguments(this);
+        // Read the requested tab from the arguments, not from the tracked field the helper just wrote.
+        this.tab = this.getTabUsingSlug(this.args.tab ?? this.args.dynamicArgs?.tab);
+        this.isEditing = Boolean(this.args.startEditing);
+        this.loadInsights.perform();
     }
 
     /**
@@ -95,8 +108,22 @@ export default class CustomerPanelComponent extends Component {
         const registeredTabs = this.universe.getMenuItemsFromRegistry('component:customer-panel');
 
         const defaultTabs = [
-            this.universe._createMenuItem('Details', null, { icon: 'circle-info', component: CustomerPanelDetailsComponent }),
-            this.universe._createMenuItem('Orders', null, { icon: 'circle-info', component: CustomerPanelOrdersComponent }),
+            this.universe._createMenuItem(this.intl.t('storefront.customers.panel.tabs.overview'), null, {
+                icon: 'circle-info',
+                component: CustomerPanelOverviewComponent,
+                componentParams: { insights: this.insights, onChange: this.reload },
+            }),
+            this.universe._createMenuItem(this.intl.t('storefront.customers.panel.tabs.orders'), null, { icon: 'file-invoice-dollar', component: CustomerPanelOrdersComponent }),
+            this.universe._createMenuItem(this.intl.t('storefront.customers.panel.tabs.places'), null, {
+                icon: 'map-marker-alt',
+                component: CustomerPanelPlacesComponent,
+                componentParams: { onChange: this.reload },
+            }),
+            this.universe._createMenuItem(this.intl.t('storefront.customers.panel.tabs.activity'), null, {
+                icon: 'wave-square',
+                component: CustomerPanelActivityComponent,
+                componentParams: { insights: this.insights },
+            }),
         ];
 
         if (isArray(registeredTabs)) {
@@ -108,14 +135,78 @@ export default class CustomerPanelComponent extends Component {
 
     get actionButtons() {
         return [
+            {
+                icon: 'plus',
+                text: this.intl.t('storefront.customers.panel.new-order'),
+                size: 'sm',
+                type: 'primary',
+                onClick: this.newOrder,
+                permission: 'storefront create order',
+            },
             {
                 icon: 'pencil',
-                helpText: 'Edit customer',
+                text: this.intl.t('common.edit'),
+                size: 'sm',
                 onClick: this.onEdit,
                 permission: 'storefront update customer',
             },
+            {
+                items: [
+                    { text: this.intl.t('storefront.customers.panel.copy-id'), icon: 'copy', fn: this.copyId },
+                    { text: this.intl.t('storefront.customers.panel.copy-email'), icon: 'at', fn: this.copyEmail, disabled: !this.customer?.email },
+                ],
+            },
         ];
     }
+
+    @task *loadInsights() {
+        const customer = this.customer;
+
+        if (!customer?.id) {
+            return;
+        }
+
+        const scope = this.storefront.contextScope();
+
+        try {
+            this.insights = yield this.fetch.get(`customers/${customer.id}/insights`, scope, { namespace: 'storefront/int/v1' });
+        } catch {
+            this.insights = null;
+        }
+    }
+
+    @action reload() {
+        return this.loadInsights.perform();
+    }
+
+    @action newOrder() {
+        try {
+            return this.hostRouter.transitionTo('console.storefront.orders.index.new', { queryParams: { for_customer: this.customer?.public_id } });
+        } catch {
+            return this.hostRouter.transitionTo('console.storefront.orders.index.new');
+        }
+    }
+
+    @action async copyId() {
+        return this.copy(this.customer?.public_id);
+    }
+
+    @action async copyEmail() {
+        return this.copy(this.customer?.email);
+    }
+
+    async copy(value) {
+        if (!value) {
+            return;
+        }
+
+        try {
+            await navigator.clipboard.writeText(value);
+            this.notifications.success(this.intl.t('storefront.customers.panel.copied', { value }));
+        } catch {
+            this.notifications.info(value);
+        }
+    }
     /**
      * Sets the overlay context.
      *
@@ -149,14 +240,16 @@ export default class CustomerPanelComponent extends Component {
         const isActionOverrided = contextComponentCallback(this, 'onEdit', this.customer);
 
         if (!isActionOverrided) {
-            this.contextPanel.focus(this.customer, 'editing', {
-                onAfterSave: () => {
-                    this.contextPanel.clear();
-                },
-            });
+            this.isEditing = true;
         }
     }
 
+    @action doneEditing() {
+        this.isEditing = false;
+        contextComponentCallback(this, 'onDoneEditing', this.customer);
+        this.loadInsights.perform();
+    }
+
     /**
      * Handles the cancel action.
      *

addon/components/customer-panel/activity.hbs

@@ -0,0 +1,23 @@
+<div class="storefront-panel-sections" data-test-customer-activity>
+    <div class="storefront-customer-facts">
+        <div class="field-info-container">
+            <div class="field-name">{{t "storefront.customers.panel.first-order"}}</div>
+            <div class="field-value">{{#if @insights.first_order_at}}{{format-date-fns @insights.first_order_at "d MMM yyyy"}}{{else}}{{t "storefront.customers.panel.never"}}{{/if}}</div>
+        </div>
+        <div class="field-info-container">
+            <div class="field-name">{{t "storefront.customers.panel.last-order"}}</div>
+            <div class="field-value">{{#if @insights.last_order_at}}{{format-date-fns @insights.last_order_at "d MMM yyyy"}} · {{@insights.last_order_public_id}}{{else}}{{t "storefront.customers.panel.never"}}{{/if}}</div>
+        </div>
+        <div class="field-info-container">
+            <div class="field-name">{{t "storefront.customers.panel.canceled-orders"}}</div>
+            <div class="field-value">{{n-a @insights.canceled 0}}</div>
+        </div>
+        <div class="field-info-container">
+            <div class="field-name">{{t "storefront.common.created"}}</div>
+            <div class="field-value">{{n-a (format-date-fns @customer.created_at "d MMM yyyy HH:mm")}}</div>
+        </div>
+    </div>
+    <ContentPanel @title={{t "storefront.customers.panel.notes"}} @open={{true}} @wrapperClass="bordered-top">
+        <CommentThread @subject={{@customer}} @subjectType="fleet-ops:contact" />
+    </ContentPanel>
+</div>

addon/components/customer-panel/edit-form.hbs

@@ -0,0 +1,41 @@
+<div class="storefront-form-panel" data-test-customer-edit-form>
+    <div class="storefront-form-panel__body">
+        <div class="storefront-create-order__sec-title mb-3">{{t "storefront.customers.panel.edit-details"}}</div>
+        <div class="storefront-product-editor__grid-3 storefront-customer-edit__grid">
+            <div class="storefront-create-order__field">
+                <label class="storefront-create-order__label" for="customer-name">{{t "storefront.common.name"}} <span class="text-red-500">*</span></label>
+                <Input id="customer-name" class="form-input w-full" @value={{this.customer.name}} data-test-customer-edit-name />
+            </div>
+            <div class="storefront-create-order__field">
+                <label class="storefront-create-order__label" for="customer-title">{{t "storefront.common.title"}}</label>
+                <Input id="customer-title" class="form-input w-full" @value={{this.customer.title}} />
+            </div>
+            <div class="storefront-create-order__field">
+                <label class="storefront-create-order__label" for="customer-email">{{t "storefront.common.email"}}</label>
+                <Input id="customer-email" @type="email" class="form-input w-full" @value={{this.customer.email}} />
+            </div>
+            <div class="storefront-create-order__field">
+                <span class="storefront-create-order__label">{{t "storefront.common.phone"}}</span>
+                <PhoneInput @value={{this.customer.phone}} @onInput={{fn (mut this.customer.phone)}} class="form-input w-full" />
+            </div>
+            <div class="storefront-create-order__field">
+                <label class="storefront-create-order__label" for="customer-internal-id">{{t "storefront.common.internal-id"}}</label>
+                <Input id="customer-internal-id" class="form-input w-full" @value={{this.customer.internal_id}} />
+            </div>
+        </div>
+        <p class="storefront-create-order__help mt-3">{{t "storefront.customers.panel.edit-help"}}</p>
+    </div>
+    <div class="storefront-save-bar storefront-form-panel__save-bar {{if this.isDirty 'is-dirty'}}" data-test-customer-edit-save-bar>
+        <div class="storefront-save-bar__status">
+            {{#if this.isDirty}}
+                <FaIcon @icon="circle" @size="xs" class="text-amber-500 mr-2" />{{t "storefront.trucks.panel.unsaved"}}
+            {{else}}
+                <FaIcon @icon="check" @size="xs" class="text-green-500 mr-2" />{{t "storefront.settings.save-bar.saved"}}
+            {{/if}}
+        </div>
+        <div class="storefront-save-bar__actions">
+            <Button @text={{t "common.cancel"}} @onClick={{this.cancel}} data-test-customer-edit-cancel />
+            <Button @type="primary" @icon="save" @text={{t "storefront.common.save"}} @isLoading={{this.save.isRunning}} @onClick={{perform this.save}} @permission="storefront update customer" data-test-customer-edit-save />
+        </div>
+    </div>
+</div>

addon/components/customer-panel/edit-form.js

@@ -0,0 +1,40 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+
+/**
+ * Edits a customer's details inside their panel: name, title, contact details and the
+ * internal id, with the shared save bar. Places keep their own tab.
+ */
+export default class CustomerPanelEditFormComponent extends Component {
+    @service intl;
+    @service notifications;
+
+    get customer() {
+        return this.args.customer;
+    }
+
+    get isDirty() {
+        return Boolean(this.customer?.hasDirtyAttributes);
+    }
+
+    @task *save() {
+        if (!String(this.customer?.name ?? '').trim()) {
+            return this.notifications.warning(this.intl.t('storefront.customers.panel.name-required'));
+        }
+
+        try {
+            yield this.customer.save();
+            this.notifications.success(this.intl.t('storefront.customers.panel.saved', { name: this.customer.name }));
+            this.args.onDone?.(this.customer);
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action cancel() {
+        this.customer?.rollbackAttributes?.();
+        this.args.onDone?.();
+    }
+}