@fleetbase/storefront-engine/addon/components/widget/orders.js

Headless Commerce & Marketplace Extension for Fleetbase

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { inject as service } from '@ember/service';
import { action, get } from '@ember/object';
import { debug } from '@ember/debug';
import { task } from 'ember-concurrency';

export default class WidgetOrdersComponent extends Component {
    @service store;
    @service storefront;
    @service fetch;
    @service intl;
    @service appCache;
    @service modalsManager;
    @service storefrontOrderActions;
    @service notifications;
    @tracked orders = [];
    @tracked title = this.intl.t('storefront.component.widget.orders.widget-title');
    @tracked loaded = false;
    @tracked total = 0;
    @tracked activeFilter = false;

    constructor(owner, { title }) {
        super(...arguments);
        this.title = title ?? this.intl.t('storefront.component.widget.orders.widget-title');
        this.currency = get(this.storefront, 'activeStore.currency');
        // this.orders = this.getCachedOrders();
        this.loadOrders.perform();
        this.storefront.on('order.broadcasted', () => {
            this.loadOrders.perform();
        });
        this.storefront.on('storefront.changed', () => {
            this.loadOrders.perform();
        });
    }

    @action toggleActiveFilter(toggled) {
        this.activeFilter = toggled;
        this.loadOrders.perform();
    }

    @action async reloadOrders(params = {}) {
        this.loadOrders.perform(params);
    }

    @task *loadOrders(params = {}) {
        const storefront = get(this.storefront, 'activeStore.public_id');
        const queryParams = {
            storefront,
            limit: 20,
            sort: '-created_at',
            ...params,
        };

        if (this.activeFilter) {
            queryParams.status = 'active';
        }

        try {
            const orders = yield this.fetch.get('orders', queryParams, { namespace: 'storefront/int/v1', normalizeToEmberData: true });
            this.loaded = true;
            this.updateCachedOrders(orders);
            this.total = this.calculateTotal(orders);
            this.orders = orders;

            return orders;
        } catch (err) {
            debug('Error loading orders for widget: ' + err.message);
        }
    }

    calculateTotal(orders = []) {
        let total = 0;
        orders.forEach((order) => {
            total += Number(get(order, 'meta.total') ?? 0);
        });

        return total;
    }

    getCachedOrders() {
        let cachedOrders = [];
        if (this.appCache.has('storefront_recent_orders')) {
            cachedOrders = this.appCache.getEmberData('storefront_recent_orders', 'order');
        }

        return cachedOrders;
    }

    updateCachedOrders(orders = []) {
        try {
            this.appCache.setEmberData('storefront_recent_orders', orders, ['tracking_statuses', 'tracking_number']);
        } catch (err) {
            this.appCache.set('storefront_recent_orders', undefined);
            debug('Error updating orders widget cache:', err);
        }
    }

    @action async viewOrder(order) {
        return this.storefrontOrderActions.viewOrder(order, {
            onChange: () => {
                this.loadOrders.perform();
            },
        });
    }

    @action handleOrderChange() {
        this.loadOrders.perform();
    }

    @action async acceptOrder(order) {
        await this.storefrontOrderActions.acceptOrder(order, () => {
            this.loadOrders.perform();
        });
    }

    @action markAsReady(order) {
        this.storefrontOrderActions.markAsReady(order, () => {
            this.loadOrders.perform();
        });
    }

    @action markAsPreparing(order) {
        this.storefrontOrderActions.markAsPreparing(order, () => {
            this.loadOrders.perform();
        });
    }

    @action markAsCompleted(order) {
        this.storefrontOrderActions.markAsCompleted(order, () => {
            this.loadOrders.perform();
        });
    }

    @action assignDriver(order) {
        this.storefrontOrderActions.assignDriver(order, () => {
            this.loadOrders.perform();
        });
    }

    @action cancelOrder(order) {
        this.storefrontOrderActions.cancelOrder(order, () => {
            this.loadOrders.perform();
        });
    }
}