feat(orders): commerce-first create order form running the app's own checkout

addon/adapters/promotion-redemption.js

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

addon/components/customer-panel.hbs

@@ -2,17 +2,17 @@
     @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"}}
+    @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}}
+        {{component activeTab.component customer=this.customer tabOptions=activeTab options=activeTab.componentParams insights=this.insights onChange=this.reload}}
     </TabNavigation>
 </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';
 
@@ -51,6 +54,10 @@ export default class CustomerPanelComponent extends Component {
      * @type {Service}
      */
     @service contextPanel;
+    @service intl;
+    @service notifications;
+    @service storefront;
+    @tracked insights = null;
 
     /**
      * The current active tab.
@@ -80,6 +87,7 @@ export default class CustomerPanelComponent extends Component {
     constructor() {
         super(...arguments);
         this.customer = this.args.customer;
+        this.loadInsights.perform();
 
         this.tab = this.getTabUsingSlug(this.args.tab);
         applyContextComponentArguments(this);
@@ -95,8 +103,10 @@ 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 +118,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.isNetworkContext ? { network: this.storefront.getActiveNetwork('public_id') } : { storefront: this.storefront.getActiveStore('public_id') };
+
+        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.
      *

addon/components/customer-panel/activity.hbs

@@ -0,0 +1,23 @@
+<div class="p-4 space-y-4" 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/orders.hbs

@@ -29,10 +29,8 @@
                         <td>
                             <Badge @status={{order.status}} />
                         </td>
-                        <td>
-                            <div>
-                                <Storefront::Order::Actions @order={{order}} @onChange={{this.handleOrderChange}} @showText={{true}} />
-                            </div>
+                        <td class="whitespace-nowrap text-right">
+                            <Storefront::Order::Actions @order={{order}} @onChange={{this.handleOrderChange}} @asMenu={{true}} />
                         </td>
                     </tr>
                 {{/each}}

addon/components/customer-panel/overview.hbs

@@ -0,0 +1,83 @@
+<div class="storefront-customer-overview p-4 space-y-4" data-test-customer-overview>
+    <div class="storefront-customer-facts">
+        <div class="field-info-container">
+            <div class="field-name">{{t "storefront.common.email"}}</div>
+            <div class="field-value">{{#if this.customer.email}}<a href="mailto:{{this.customer.email}}">{{this.customer.email}}</a>{{else}}{{n-a null}}{{/if}}</div>
+        </div>
+        <div class="field-info-container">
+            <div class="field-name">{{t "storefront.common.phone"}}</div>
+            <div class="field-value">{{#if this.customer.phone}}<a href="tel:{{this.customer.phone}}">{{this.customer.phone}}</a>{{else}}{{n-a null}}{{/if}}</div>
+        </div>
+        <div class="field-info-container">
+            <div class="field-name">{{t "storefront.customers.panel.preferred-fulfillment"}}</div>
+            <div class="field-value">{{#if this.insights.preferred_fulfillment}}{{t (concat "storefront.customers.panel.prefers-" this.insights.preferred_fulfillment)}}{{else}}{{n-a null}}{{/if}}</div>
+        </div>
+        <div class="field-info-container">
+            <div class="field-name">{{t "storefront.customers.panel.account"}}</div>
+            <div class="field-value">{{#if this.accountLabel}}{{smart-humanize this.accountLabel}}{{else}}{{t "storefront.customers.panel.guest"}}{{/if}}</div>
+        </div>
+        <div class="field-info-container">
+            <div class="field-name">{{t "storefront.common.internal-id"}}</div>
+            <div class="field-value">{{n-a this.customer.internal_id}}</div>
+        </div>
+        <div class="field-info-container">
+            <div class="field-name">{{t "storefront.common.title"}}</div>
+            <div class="field-value">{{n-a this.customer.title}}</div>
+        </div>
+    </div>
+
+    <ContentPanel @title={{t "storefront.customers.panel.saved-places"}} @open={{true}} @pad={{false}} @wrapperClass="bordered-top" @panelBodyClass="p-0">
+        {{#if this.placeRows.length}}
+            <div class="storefront-member-list">
+                {{#each this.placeRows as |row|}}
+                    <div class="storefront-member-row" data-test-customer-place={{row.place.id}}>
+                        <Place::Pill @place={{row.place}} @size="xs" />
+                        <div class="storefront-member-row__identity">
+                            <div class="storefront-member-row__meta">{{n-a row.place.address}}</div>
+                        </div>
+                        {{#if row.isDefault}}<Badge @status="info" @size="xs" @hideStatusDot={{true}} @text={{t "storefront.customers.panel.default"}} />{{/if}}
+                    </div>
+                {{/each}}
+            </div>
+        {{else}}
+            <div class="storefront-empty-row"><span>{{t "storefront.customers.panel.no-places"}}</span></div>
+        {{/if}}
+    </ContentPanel>
+
+    {{#if this.showStores}}
+        <ContentPanel @title={{t "storefront.customers.panel.stores-ordered-from"}} @open={{true}} @pad={{false}} @wrapperClass="bordered-top" @panelBodyClass="p-0">
+            {{#if this.stores.length}}
+                <div class="storefront-member-list">
+                    {{#each this.stores as |store|}}
+                        <div class="storefront-member-row">
+                            <div class="storefront-member-row__logo storefront-member-row__logo--icon"><FaIcon @icon="store" /></div>
+                            <div class="storefront-member-row__identity"><div class="storefront-member-row__name">{{n-a store.name store.public_id}}</div></div>
+                            <span class="storefront-member-row__meta">{{t "storefront.networks.orders.items-count" count=store.orders}}</span>
+                        </div>
+                    {{/each}}
+                </div>
+            {{else}}
+                <div class="storefront-empty-row"><span>{{t "storefront.customers.panel.no-orders"}}</span></div>
+            {{/if}}
+        </ContentPanel>
+    {{/if}}
+
+    <ContentPanel @title={{t "storefront.customers.panel.recent-orders"}} @open={{true}} @pad={{false}} @wrapperClass="bordered-top" @panelBodyClass="p-0" @isLoading={{this.loadOrders.isRunning}}>
+        {{#if this.orders.length}}
+            <div class="storefront-member-list">
+                {{#each this.orders as |order|}}
+                    <div class="storefront-member-row" data-test-customer-order={{order.public_id}}>
+                        <div class="storefront-member-row__identity">
+                            <a href="javascript:;" class="storefront-member-row__name storefront-order-ref__id--link" {{on "click" (fn this.viewOrder order)}}>{{order.public_id}}</a>
+                            <div class="storefront-member-row__meta">{{order.createdAgo}} · {{if order.meta.is_pickup (t "storefront.common.pickup") (t "storefront.networks.orders.delivery")}}{{#if order.meta.storefront}} · {{order.meta.storefront}}{{/if}}</div>
+                        </div>
+                        <div class="storefront-member-row__amount">{{format-currency (or order.meta.total order.transaction_amount 0) order.meta.currency}}</div>
+                        <Badge @status={{order.status}} @size="xs" />
+                    </div>
+                {{/each}}
+            </div>
+        {{else unless this.loadOrders.isRunning}}
+            <div class="storefront-empty-row"><span>{{t "storefront.customers.panel.no-orders"}}</span></div>
+        {{/if}}
+    </ContentPanel>
+</div>

addon/components/customer-panel/overview.js

@@ -0,0 +1,85 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action, get } from '@ember/object';
+import { task } from 'ember-concurrency';
+
+/**
+ * Everything a support agent needs on one screen: contact facts, saved places,
+ * the stores ordered from, and the most recent orders.
+ */
+export default class CustomerPanelOverviewComponent extends Component {
+    @service fetch;
+    @service storefront;
+    @service storefrontOrderActions;
+    @service notifications;
+    @tracked orders = [];
+
+    constructor() {
+        super(...arguments);
+        this.loadOrders.perform();
+    }
+
+    get customer() {
+        return this.args.customer;
+    }
+
+    get insights() {
+        return this.args.insights ?? this.args.options?.insights ?? null;
+    }
+
+    get places() {
+        const places = this.customer?.places;
+
+        return places?.toArray?.() ?? Array.from(places ?? []);
+    }
+
+    get defaultPlaceId() {
+        return this.customer?.place_uuid ?? this.customer?.place?.id ?? null;
+    }
+
+    get placeRows() {
+        return this.places.map((place) => ({ place, isDefault: place.id === this.defaultPlaceId }));
+    }
+
+    get stores() {
+        return this.insights?.stores ?? [];
+    }
+
+    get showStores() {
+        return this.storefront.isNetworkContext || this.stores.length > 1;
+    }
+
+    get accountLabel() {
+        const status = this.customer?.login_status ?? (this.customer?.user_uuid ? 'app' : null);
+
+        return status;
+    }
+
+    @task *loadOrders() {
+        if (!this.customer?.id) {
+            return;
+        }
+
+        const scope = this.storefront.isNetworkContext ? { network: this.storefront.getActiveNetwork('public_id') } : { storefront: this.storefront.getActiveStore('public_id') };
+
+        try {
+            const orders = yield this.fetch.get('orders', { ...scope, limit: 5, sort: '-created_at', customer_uuid: this.customer.id }, { namespace: 'storefront/int/v1', normalizeToEmberData: true });
+            this.orders = orders?.toArray?.() ?? Array.from(orders ?? []);
+        } catch {
+            this.orders = [];
+        }
+    }
+
+    storeNameOf(order) {
+        return get(order, 'meta.storefront');
+    }
+
+    @action viewOrder(order) {
+        return this.storefrontOrderActions.viewOrder(order, { onChange: () => this.loadOrders.perform() });
+    }
+
+    @action viewAllOrders() {
+        return this.args.onViewOrders?.();
+    }
+}