@fleetbase/storefront-engine 0.3.5 → 0.3.7

package/addon/components/context-panel.hbs

@@ -0,0 +1,5 @@
+{{#if this.contextPanel.currentContextRegistry}}
+    {{#let this.contextPanel.currentContext this.contextPanel.currentContextRegistry this.contextPanel.currentContextComponentArguments as |model registry dynamicArgs|}}
+        {{component registry.component context=model dynamicArgs=dynamicArgs onPressCancel=this.contextPanel.clear options=this.contextPanel.contextOptions}}
+    {{/let}}
+{{/if}}

package/addon/components/context-panel.js

@@ -0,0 +1,6 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+export default class ContextPanelComponent extends Component {
+    @service contextPanel;
+}

package/addon/components/customer-panel/details.hbs

@@ -0,0 +1,34 @@
+<div class="p-4">
+    <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-4 text-xs dark:text-gray-100">
+
+        <div class="field-info-container">
+            <div class="field-name">{{t "storefront.customers.customer-panel.details.web-url"}}</div>
+            <div class="field-value">{{n-a @customer.name}}</div>
+        </div>
+
+        <div class="field-info-container">
+            <div class="field-name">{{t "storefront.common.title"}}</div>
+            <div class="field-value">{{n-a @customer.title}}</div>
+        </div>
+
+        <div class="field-info-container">
+            <div class="field-name">{{t "storefront.common.internal-id"}}</div>
+            <div class="field-value">{{n-a @customer.internal_id}}</div>
+        </div>
+
+        <div class="field-info-container">
+            <div class="field-name">{{t "storefront.common.email"}}</div>
+            <div class="field-value">{{n-a @customer.email}}</div>
+        </div>
+
+        <div class="field-info-container">
+            <div class="field-name">{{t "storefront.common.phone"}}</div>
+            <div class="field-value">{{n-a @customer.phone}}</div>
+        </div>
+
+        <div class="field-info-container">
+            <div class="field-name">{{t "storefront.common.type"}}</div>
+            <div class="field-value"><Badge @status={{@customer.type}} /></div>
+        </div>
+    </div>
+</div>

package/addon/components/customer-panel/details.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class CustomerPanelDetailsComponent extends Component {}

package/addon/components/customer-panel/orders.hbs

@@ -0,0 +1,140 @@
+{{! template-lint-disable no-unbound }}
+<Layout::Section::Header @title={{t "storefront.common.orders"}} @onSearch={{this.search}} />
+
+<Layout::Section::Body>
+    <div class="p-4">
+
+        {{#if this.isLoading}}
+            <div class="px-3 py-2">
+                <Spinner class="text-sky-400" />
+            </div>
+        {{/if}}
+        <div class="hidden md:flex table-wrapper table-fluid">
+            <table>
+                <thead>
+                    <tr class="h-12 text-left py-1">
+                        <th>{{t "storefront.component.widget.orders.id-column"}}</th>
+                        <th>{{t "storefront.common.amount"}}</th>
+                        <th>{{t "storefront.common.driver"}}</th>
+                        <th>{{t "storefront.common.created"}}</th>
+                        <th>{{t "storefront.common.status"}}</th>
+                        <th></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {{#each this.orders as |order|}}
+                        <tr class="h-12">
+                            <td><a href="javascript:;" {{on "click" (fn this.viewOrder order)}}>{{order.public_id}}</a></td>
+                            <td>{{format-currency order.meta.total order.meta.currency}}</td>
+                            <td>{{n-a order.driver_name}}</td>
+                            <td>{{order.createdAgo}}</td>
+                            <td>
+                                <Badge @status={{order.status}} />
+                            </td>
+                            <td>
+                                {{#if order.isFresh}}
+                                    <Button
+                                        @size="xs"
+                                        @type="success"
+                                        @iconPrefix="fas"
+                                        @icon="check"
+                                        @text={{concat (t "storefront.component.widget.orders.accept-order") "!"}}
+                                        @onClick={{fn this.acceptOrder order}}
+                                    />
+                                {{/if}}
+                                {{#if order.isPreparing}}
+                                    <Button @size="xs" @type="success" @icon="bells" @text={{t "storefront.component.widget.orders.mark-as-ready"}} @onClick={{fn this.markAsReady order}} />
+                                {{/if}}
+                                {{#if order.isPickupReady}}
+                                    <Button
+                                        @size="xs"
+                                        @type="success"
+                                        @icon="check"
+                                        @text={{t "storefront.component.widget.orders.mark-as-completed"}}
+                                        @onClick={{fn this.markAsCompleted order}}
+                                    />
+                                {{/if}}
+                            </td>
+                        </tr>
+                    {{/each}}
+                </tbody>
+            </table>
+        </div>
+        <div class="flex flex-col md:hidden p-3 space-y-3">
+            {{#each this.orders as |order|}}
+                <div class="py-2 px-3 rounded-md border border-gray-400 dark:border-gray-700">
+                    <div class="flex flex-row mb-3">
+                        <div class="flex-1">
+                            <a href="javascript:;" {{on "click" (fn this.viewOrder order)}} class="font-semibold">{{order.public_id}}</a>
+                            <div>{{order.createdAt}}</div>
+                            <div>{{order.createdAgo}}</div>
+                        </div>
+                        <div class="flex-shrink-0 flex flex-col text-right">
+                            <Badge class="mb-1" @status={{order.status}} />
+                            <div>{{format-currency order.meta.total order.meta.currency}}</div>
+                        </div>
+                    </div>
+                    <div class="flex flex-row space-x-2 flex-wrap">
+                        <Button @size="xs" @type="primary" @icon="eye" @text={{t "storefront.common.view"}} @onClick={{fn this.viewOrder order}} />
+                        <Button
+                            @size="xs"
+                            @type="default"
+                            @icon="steering-wheel"
+                            @text={{if order.has_driver_assigned (t "storefront.component.widget.order.change-driver") (t "storefront.component.widget.order.assign-driver")}}
+                            @onClick={{fn this.assignDriver order}}
+                        />
+                        {{#if order.isFresh}}
+                            <Button
+                                @size="xs"
+                                @type="success"
+                                @iconPrefix="fas"
+                                @icon="check"
+                                @text={{concat (t "storefront.component.widget.orders.accept-order") "!"}}
+                                @onClick={{fn this.acceptOrder order}}
+                            />
+                        {{/if}}
+                        {{#if order.isPreparing}}
+                            <Button @size="xs" @type="success" @icon="bells" @text={{t "storefront.component.widget.orders.mark-as-mark"}} @onClick={{fn this.markAsReady order}} />
+                        {{/if}}
+                        {{#if order.isPickupReady}}
+                            <Button @size="xs" @type="success" @icon="check" @text={{t "storefront.component.widget.orders.mark-as-completed"}} @onClick={{fn this.markAsCompleted order}} />
+                        {{/if}}
+                    </div>
+                    <ContentPanel @title={{t "storefront.component.widget.orders.title"}} class="mt-2">
+                        <div class="flex flex-col py-2 border-t dark:border-gray-800">
+                            <div>{{t "storefront.component.widget.orders.customer"}}: {{n-a order.customer_name}}</div>
+                            <div>{{t "storefront.component.widget.orders.driver"}}: {{n-a order.driver_name}}</div>
+                        </div>
+                        <div class="py-2 space-y-2 border-t dark:border-gray-800">
+                            <div class="flex items-center justify-between">
+                                <span class="dark:text-gray-50">{{t "storefront.component.widget.orders.subtotal"}}</span>
+                                <span class="dark:text-gray-50">{{format-currency order.meta.subtotal order.meta.currency}}</span>
+                            </div>
+                            {{#unless order.meta.is_pickup}}
+                                <div class="flex items-center justify-between">
+                                    <span class="dark:text-gray-50">{{t "storefront.component.widget.orders.delivery-fee"}}</span>
+                                    <span class="dark:text-gray-50">{{format-currency order.meta.delivery_fee order.meta.currency}}</span>
+                                </div>
+                            {{/unless}}
+                            {{#if order.meta.tip}}
+                                <div class="flex items-center justify-between">
+                                    <span class="dark:text-gray-50">{{t "storefront.component.widget.order.tip"}}</span>
+                                    <span class="dark:text-gray-50">{{get-tip-amount order.meta.tip order.meta.subtotal order.meta.currency}}</span>
+                                </div>
+                            {{/if}}
+                            {{#if order.meta.delivery_tip}}
+                                <div class="flex items-center justify-between">
+                                    <span class="dark:text-gray-50">{{t "storefront.component.widget.order.delivery-tip"}}</span>
+                                    <span class="dark:text-gray-50">{{get-tip-amount order.meta.delivery_tip order.meta.subtotal order.meta.currency}}</span>
+                                </div>
+                            {{/if}}
+                            <div class="flex items-center justify-between">
+                                <span class="dark:text-gray-50 font-bold">{{t "storefront.component.widget.order.tip"}}</span>
+                                <span class="dark:text-gray-50 font-bold">{{format-currency order.meta.total order.meta.currency}}</span>
+                            </div>
+                        </div>
+                    </ContentPanel>
+                </div>
+            {{/each}}
+        </div>
+    </div></Layout::Section::Body>

package/addon/components/customer-panel/orders.js

@@ -0,0 +1,78 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { inject as controller } from '@ember/controller';
+import { action, computed, get } from '@ember/object';
+import { task } from 'ember-concurrency-decorators';
+export default class CustomerPanelOrdersComponent extends Component {
+    @service store;
+    @service storefront;
+    @service fetch;
+    @service intl;
+    @service appCache;
+    @service modalsManager;
+    @service contextPanel;
+    @tracked isLoading = true;
+    @tracked orders = [];
+    @tracked customer;
+    @controller('orders.index.view') orderDetailsController;
+
+    @computed('args.title') get title() {
+        return this.args.title ?? this.intl.t('storefront.component.widget.orders.widget-title');
+    }
+
+    constructor() {
+        super(...arguments);
+        this.customer = this.args.customer;
+        this.reloadOrders.perform();
+    }
+
+    @task *reloadOrders(params = {}) {
+        this.orders = yield this.fetchOrders(params);
+    }
+
+    @action fetchOrders(params = {}) {
+        this.isLoading = true;
+
+        return new Promise((resolve) => {
+            const storefront = get(this.storefront, 'activeStore.public_id');
+
+            if (!storefront || !this.customer?.id) {
+                this.isLoading = false;
+                return resolve([]);
+            }
+
+            const queryParams = {
+                storefront,
+                limit: 25,
+                sort: '-created_at',
+                customer_uuid: this.customer?.id,
+                ...params,
+            };
+
+            this.fetch
+                .get('orders', queryParams, {
+                    namespace: 'storefront/int/v1',
+                    normalizeToEmberData: true,
+                })
+                .then((orders) => {
+                    this.isLoading = false;
+
+                    resolve(orders);
+                })
+                .catch(() => {
+                    this.isLoading = false;
+
+                    resolve(this.orders);
+                });
+        });
+    }
+
+    @action search(event) {
+        this.reloadOrders.perform({ query: event.target.value ?? '' });
+    }
+
+    @action async viewOrder(order) {
+        this.contextPanel.focus(order, 'viewing');
+    }
+}

package/addon/components/customer-panel.hbs

@@ -0,0 +1,70 @@
+<Overlay
+    @onLoad={{this.setOverlayContext}}
+    @position="right"
+    @noBackdrop={{true}}
+    @fullHeight={{true}}
+    @isResizable={{or this.isResizable @isResizable}}
+    @width={{or this.width @width "570px"}}
+>
+    <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i min-h-[127px]">
+        <div class="flex flex-row items-center justify-between w-full mb-4">
+
+            <div class="flex flex-1 justify-end">
+                <Button
+                    @type="default"
+                    @icon="times"
+                    @helpText={{if this.customer.id (t "storefront.customers.customer-panel.cancel-edit-button") (t "fleet-ops.component.customer-panel.cancel-new-button")}}
+                    @onClick={{this.onPressCancel}}
+                />
+            </div>
+        </div>
+        <div class="flex flex-row justify-between w-full">
+            <div class="flex flex-col flex-1 w-3/4">
+                <div class="flex flex-row">
+                    <div class="w-14 flex items-center justify-start">
+                        <Image
+                            src={{this.customer.photo_url}}
+                            @fallbackSrc={{config "defaultValues.customerImage"}}
+                            alt={{this.customer.name}}
+                            height="48"
+                            width="48"
+                            class="h-12 w-12 rounded-lg shadow-sm"
+                        />
+                        <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                            <InputInfo @text={{this.customer.public_id}} />
+                        </Attach::Tooltip>
+                    </div>
+                    <div class="flex flex-col">
+                        <h1 class="text-gray-900 dark:text-white text-2xl">{{this.customer.name}}</h1>
+                        <div class="-mt-1">
+                            <div class="flex flex-row items-center">
+                                <span class="text-sm dark:text-blue-400 text-blue-600">{{smart-humanize this.customer.type}}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="flex justify-end w-1/4">
+                <Badge @status={{this.customer.public_id}} @type="info" @hideStatusDot={{true}} />
+            </div>
+
+        </div>
+    </Overlay::Header>
+    <Overlay::Body class="no-padding">
+        <div class="section-header-actions w-full overflow-x-scroll lg:overflow-x-auto">
+            <div class="ui-tabs mt-4">
+                <nav>
+                    {{#each this.tabs as |tab|}}
+                        <a href="javascript:;" class="ui-tab {{if (eq this.tab.slug tab.slug) 'active'}}" {{on "click" (fn this.onTabChanged tab.slug)}}>
+                            <FaIcon @icon={{tab.icon}} class="mr-1" />
+                            <span>{{tab.title}}</span>
+                        </a>
+                    {{/each}}
+                </nav>
+            </div>
+        </div>
+        <div class="tab-content tab-{{this.tab.slug}}">
+            {{component this.tab.component customer=this.customer tabOptions=this.tab options=this.tab.componentParams}}
+        </div>
+    </Overlay::Body>
+</Overlay>

package/addon/components/customer-panel.js

@@ -0,0 +1,171 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { isArray } from '@ember/array';
+import CustomerPanelDetailsComponent from './customer-panel/details';
+import CustomerPanelOrdersComponent from './customer-panel/orders';
+import contextComponentCallback from '@fleetbase/ember-core/utils/context-component-callback';
+import applyContextComponentArguments from '@fleetbase/ember-core/utils/apply-context-component-arguments';
+export default class CustomerPanelComponent extends Component {
+    /**
+     * Service for fetching data.
+     *
+     * @type {Service}
+     */
+    @service fetch;
+
+    /**
+     * Service for managing modals.
+     *
+     * @type {Service}
+     */
+    @service modalsManager;
+
+    /**
+     * Universe service for managing global data and settings.
+     *
+     * @type {Service}
+     */
+    @service universe;
+
+    /**
+     * Ember data store service.
+     *
+     * @type {Service}
+     */
+    @service store;
+
+    /**
+     * Service for managing routing within the host app.
+     *
+     * @type {Service}
+     */
+    @service hostRouter;
+
+    /**
+     * Service for managing the context panel.
+     *
+     * @type {Service}
+     */
+    @service contextPanel;
+
+    /**
+     * The current active tab.
+     *
+     * @type {Object}
+     * @tracked
+     */
+    @tracked tab;
+
+    /**
+     * The customer being displayed or edited.
+     *
+     * @type {customerModel}
+     * @tracked
+     */
+    @tracked customer;
+
+    /**
+     * Overlay context.
+     * @type {any}
+     */
+    @tracked context;
+
+    /**
+     * Initializes the customer panel component.
+     */
+    constructor() {
+        super(...arguments);
+        this.customer = this.args.customer;
+
+        this.tab = this.getTabUsingSlug(this.args.tab);
+        applyContextComponentArguments(this);
+    }
+
+    /**
+    /**
+     * Returns the array of tabs available for the panel.
+     *
+     * @type {Array}
+     */
+    get tabs() {
+        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 }),
+        ];
+
+        if (isArray(registeredTabs)) {
+            return [...defaultTabs, ...registeredTabs];
+        }
+
+        return defaultTabs;
+    }
+    /**
+     * Sets the overlay context.
+     *
+     * @action
+     * @param {OverlayContextObject} overlayContext
+     */
+    @action setOverlayContext(overlayContext) {
+        this.context = overlayContext;
+        contextComponentCallback(this, 'onLoad', ...arguments);
+    }
+
+    /**
+     * Handles changing the active tab.
+     *
+     * @method
+     * @param {String} tab - The new tab to switch to.
+     * @action
+     */
+    @action onTabChanged(tab) {
+        this.tab = this.getTabUsingSlug(tab);
+        contextComponentCallback(this, 'onTabChanged', tab);
+    }
+
+    /**
+     * Handles edit action for the customer.
+     *
+     * @method
+     * @action
+     */
+    @action onEdit() {
+        const isActionOverrided = contextComponentCallback(this, 'onEdit', this.customer);
+
+        if (!isActionOverrided) {
+            this.contextPanel.focus(this.customer, 'editing', {
+                onAfterSave: () => {
+                    this.contextPanel.clear();
+                },
+            });
+        }
+    }
+
+    /**
+     * Handles the cancel action.
+     *
+     * @method
+     * @action
+     * @returns {Boolean} Indicates whether the cancel action was overridden.
+     */
+    @action onPressCancel() {
+        return contextComponentCallback(this, 'onPressCancel', this.customer);
+    }
+
+    /**
+     * Finds and returns a tab based on its slug.
+     *
+     * @param {String} tabSlug - The slug of the tab.
+     * @returns {Object|null} The found tab or null.
+     */
+    getTabUsingSlug(tabSlug) {
+        if (tabSlug) {
+            return this.tabs.find(({ slug }) => slug === tabSlug);
+        }
+
+        return this.tabs[0];
+    }
+}

package/addon/components/display-place.hbs

@@ -0,0 +1,52 @@
+<div {{did-insert this.setupComponent}} ...attributes>
+    {{#let (or @place.place @place) as |place|}}
+        {{#if (is-empty place)}}
+            <div class={{@noAddressClass}}>
+                <span class="text-red-500">
+                    {{#if @type}}
+                        {{t "fleet-ops.component.display-panel.no-address" htmlSafe=true type=@type}}
+                    {{else}}
+                        {{t "fleet-ops.component.display-panel.no-address-message"}}
+                    {{/if}}
+                </span>
+            </div>
+        {{else}}
+            <address class={{@addressClass}}>
+                {{#if place.name}}
+                    {{place.name}}<br />
+                {{/if}}
+                {{#if place.street1}}
+                    {{place.street1}}<br />
+                {{/if}}
+                {{#if place.street2}}
+                    {{place.street2}}<br />
+                {{/if}}
+                <div class="comma-spans">
+                    {{#if place.city}}
+                        <span>{{place.city}}</span>
+                    {{/if}}
+                    {{#if place.province}}
+                        <span>{{place.province}}</span>
+                    {{/if}}
+                    {{#if place.postal_code}}
+                        <span>{{place.postal_code}}</span>
+                    {{/if}}
+                </div>
+                <div class="comma-spans">
+                    {{#if place.neighborhood}}
+                        <span>{{place.neighborhood}}</span>
+                    {{/if}}
+                    {{#if place.district}}
+                        <span>{{place.district}}</span>
+                    {{/if}}
+                    {{#if (and place.building (not place.street1))}}
+                        <span>{{place.building}}</span>
+                    {{/if}}
+                </div>
+                {{#if place.phone}}
+                    <a href="tel:{{place.phone}}" class="text-blue-500 hover:text-blue-400">{{place.phone}}</a><br />
+                {{/if}}
+            </address>
+        {{/if}}
+    {{/let}}
+</div>

package/addon/components/display-place.js

@@ -0,0 +1,11 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class DisplayPlaceComponent extends Component {
+    @tracked ref;
+
+    @action setupComponent(element) {
+        this.ref = element;
+    }
+}