@fleetbase/storefront-engine 0.0.1

package/addon/controllers/products/index/category.js

@@ -0,0 +1,163 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action, computed } from '@ember/object';
+import { dasherize } from '@ember/string';
+import { isBlank } from '@ember/utils';
+import { timeout } from 'ember-concurrency';
+import { task } from 'ember-concurrency-decorators';
+
+export default class ProductsIndexCategoryController extends Controller {
+    @service modalsManager;
+    @service fetch;
+    @service hostRouter;
+    @tracked category;
+
+    /**
+     * The current page of data being viewed
+     *
+     * @var {Integer}
+     */
+    @tracked page = 1;
+
+    /**
+     * The maximum number of items to show per page
+     *
+     * @var {Integer}
+     */
+    @tracked limit;
+
+    /**
+     * The param to query with.
+     *
+     * @var {String}
+     */
+    @tracked query;
+
+    /**
+     * The param to sort the data on, the param with prepended `-` is descending
+     *
+     * @var {String}
+     */
+    @tracked sort;
+
+    /**
+     * The filterable param `public_id`
+     *
+     * @var {String}
+     */
+    @tracked public_id;
+
+    /**
+     * The filterable param `drivers_license_number`
+     *
+     * @var {String}
+     */
+    @tracked sku;
+
+    /**
+     * The filterable param `created_at`
+     *
+     * @var {String}
+     */
+    @tracked created_at;
+
+    /**
+     * The filterable param `updated_at`
+     *
+     * @var {String}
+     */
+    @tracked updated_at;
+
+    /**
+     * The search task.
+     *
+     * @void
+     */
+    @task({ restartable: true }) *search({ target: { value } }) {
+        // if no query don't search
+        if (isBlank(value)) {
+            this.query = null;
+            return;
+        }
+
+        // timeout for typing
+        yield timeout(250);
+
+        // reset page for results
+        if (this.page > 1) {
+            this.page = 1;
+        }
+
+        // update the query param
+        this.query = value;
+    }
+
+    @action deleteCategory() {
+        if (!this.category) {
+            return;
+        }
+
+        this.modalsManager.confirm({
+            title: 'Are you sure you wish to delete this category?',
+            body: 'Warning! Deleting this category will also remove all products listed under this category.',
+            confirm: (modal) => {
+                modal.startLoading();
+
+                return this.category.destroyRecord().then(() => {
+                    return this.transitionToRoute('products.index');
+                });
+            },
+        });
+    }
+
+    @action editCategory(category) {
+        this.modalsManager.show('modals/create-product-category', {
+            title: `Edit category: ${category.name}`,
+            acceptButtonText: 'Save Changes',
+            acceptButtonIcon: 'save',
+            declineButtonIcon: 'times',
+            declineButtonIconPrefix: 'fas',
+            category,
+            uploadNewPhoto: (file) => {
+                this.fetch.uploadFile.perform(
+                    file,
+                    {
+                        path: `uploads/${category.company_uuid}/product-category-icon/${dasherize(category.name ?? this.currentUser.companyId)}`,
+                        subject_uuid: category.id,
+                        subject_type: `category`,
+                        type: `category_icon`,
+                    },
+                    (uploadedFile) => {
+                        category.setProperties({
+                            icon_file_uuid: uploadedFile.id,
+                            icon_url: uploadedFile.s3url,
+                            icon: uploadedFile,
+                        });
+                    }
+                );
+            },
+            confirm: (modal) => {
+                modal.startLoading();
+
+                return category.save().then((category) => {
+                    this.notifications.success('Category changes saved.');
+                });
+            },
+        });
+    }
+
+    @action deleteProduct(product) {
+        this.modalsManager.confirm({
+            title: 'Are you sure you wish to delete this product?',
+            body: 'Warning! Once this product is deleted it will no longer be accessible.',
+            confirm: (modal) => {
+                modal.startLoading();
+
+                return product.destroyRecord().then(() => {
+                    return this.hostRouter.refresh();
+                });
+            },
+        });
+    }
+}

package/addon/controllers/products/index/index/edit.js

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

package/addon/controllers/products/index/index.js

@@ -0,0 +1,136 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { equal } from '@ember/object/computed';
+import { isBlank } from '@ember/utils';
+import { timeout } from 'ember-concurrency';
+import { task } from 'ember-concurrency-decorators';
+
+export default class ProductsIndexIndexController extends Controller {
+    /**
+     * Inject the `filters` service
+     *
+     * @var {Service}
+     */
+    @service filters;
+
+    /**
+     * Inject the `currentUser` service
+     *
+     * @var {Service}
+     */
+    @service currentUser;
+
+    /**
+     * Inject the `currentUser` service
+     *
+     * @var {Service}
+     */
+    @service modalsManager;
+
+    /**
+     * Queryable parameters for this controller's model
+     *
+     * @var {Array}
+     */
+    queryParams = ['page', 'limit', 'sort', 'query', 'public_id', 'sku', 'created_at', 'updated_at'];
+
+    /**
+     * The current page of data being viewed
+     *
+     * @var {Integer}
+     */
+    @tracked page = 1;
+
+    /**
+     * The maximum number of items to show per page
+     *
+     * @var {Integer}
+     */
+    @tracked limit;
+
+    /**
+     * The param to query with.
+     *
+     * @var {String}
+     */
+    @tracked query;
+
+    /**
+     * The param to sort the data on, the param with prepended `-` is descending
+     *
+     * @var {String}
+     */
+    @tracked sort;
+
+    /**
+     * The filterable param `public_id`
+     *
+     * @var {String}
+     */
+    @tracked public_id;
+
+    /**
+     * The filterable param `drivers_license_number`
+     *
+     * @var {String}
+     */
+    @tracked sku;
+
+    /**
+     * The filterable param `created_at`
+     *
+     * @var {String}
+     */
+    @tracked created_at;
+
+    /**
+     * The filterable param `updated_at`
+     *
+     * @var {String}
+     */
+    @tracked updated_at;
+
+    /**
+     * The search task.
+     *
+     * @void
+     */
+    @task({ restartable: true }) *search({ target: { value } }) {
+        // if no query don't search
+        if (isBlank(value)) {
+            this.query = null;
+            return;
+        }
+
+        // timeout for typing
+        yield timeout(250);
+
+        // reset page for results
+        if (this.page > 1) {
+            this.page = 1;
+        }
+
+        // update the query param
+        this.query = value;
+    }
+
+    @action viewProduct(product) {
+        return this.transitionToRoute('products.index.category.edit', product);
+    }
+
+    @action deleteProduct(product) {
+        this.modalsManager.confirm({
+            title: 'Are you sure you wish to delete this product?',
+            body: 'Warning! Once this product is deleted it will no longer be accessible.',
+            confirm: (modal) => {
+                modal.startLoading();
+
+                return product.destroyRecord().then(() => {
+                    return this.hostRouter.refresh();
+                });
+            },
+        });
+    }
+}

package/addon/controllers/products/index.js

@@ -0,0 +1,203 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { alias } from '@ember/object/computed';
+import { dasherize } from '@ember/string';
+import { timeout } from 'ember-concurrency';
+import { task } from 'ember-concurrency-decorators';
+
+export default class ProductsIndexController extends Controller {
+    @service store;
+    @service modalsManager;
+    @service currentUser;
+    @service modalsManager;
+    @service notifications;
+    @service fetch;
+    @service hostRouter;
+    @service storefront;
+
+    /**
+     * the current storefront store session.
+     *
+     * @memberof ProductsIndexController
+     */
+    @alias('storefront.activeStore') activeStore;
+
+    /**
+     * The current category.
+     *
+     * @var {CategoryModel}
+     */
+    @tracked category;
+
+    @action createNewProduct() {
+        return this.transitionToRoute('products.index.category.new');
+    }
+
+    @action manageAddons() {
+        this.modalsManager.show('modals/manage-addons', {
+            title: 'Manage Addons',
+            modalClass: 'modal-lg',
+            acceptButtonText: 'Done',
+            store: this.activeStore,
+        });
+    }
+
+    @action viewAllProducts() {
+        this.category = null;
+        this.transitionToRoute('products.index');
+    }
+
+    @action switchCategory(category) {
+        this.category = category;
+        this.transitionToRoute('products.index.category', category.slug);
+    }
+
+    @action createNewProductCategory() {
+        const category = this.store.createRecord('category', {
+            company_uuid: this.currentUser.companyId,
+            owner_uuid: this.currentUser.getOption('activeStorefront'),
+            owner_type: 'storefront:store',
+            for: 'storefront_product'
+        });
+
+        this.modalsManager.show('modals/create-product-category', {
+            title: 'Create a new product category',
+            acceptButtonIcon: 'check',
+            acceptButtonIconPrefix: 'fas',
+            declineButtonIcon: 'times',
+            declineButtonIconPrefix: 'fas',
+            category,
+            uploadNewPhoto: (file) => {
+                this.fetch.uploadFile.perform(
+                    file,
+                    {
+                        path: `uploads/${category.company_uuid}/product-category-icon/${dasherize(category.name ?? this.currentUser.companyId)}`,
+                        subject_uuid: category.id,
+                        subject_type: `category`,
+                        type: `category_icon`,
+                    },
+                    (uploadedFile) => {
+                        category.setProperties({
+                            icon_file_uuid: uploadedFile.id,
+                            icon_url: uploadedFile.url,
+                            icon: uploadedFile,
+                        });
+                    }
+                );
+            },
+            confirm: (modal) => {
+                modal.startLoading();
+
+                return category.save().then((category) => {
+                    this.notifications.success('New product category created.');
+                    return this.hostRouter.refresh();
+                });
+            },
+        });
+    }
+
+    @action importProducts() {
+        const checkQueue = () => {
+            const uploadQueue = this.modalsManager.getOption('uploadQueue');
+
+            if (uploadQueue.length) {
+                this.modalsManager.setOption('acceptButtonDisabled', false);
+            } else {
+                this.modalsManager.setOption('acceptButtonDisabled', true);
+            }
+        };
+
+        this.modalsManager.show('modals/import-products', {
+            title: 'Import products via spreadsheets',
+            acceptButtonText: 'Start Upload',
+            acceptButtonScheme: 'magic',
+            acceptButtonIcon: 'upload',
+            acceptButtonDisabled: true,
+            isProcessing: false,
+            uploadQueue: [],
+            selectedCategory: null,
+            store: this.activeStore,
+            fileQueueColumns: [
+                { name: 'Type', valuePath: 'extension', key: 'type' },
+                { name: 'File Name', valuePath: 'name', key: 'fileName' },
+                { name: 'File Size', valuePath: 'size', key: 'fileSize' },
+                { name: 'Upload Date', valuePath: 'blob.lastModifiedDate', key: 'uploadDate' },
+                { name: '', valuePath: '', key: 'delete' },
+            ],
+            acceptedFileTypes: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'text/csv'],
+            queueFile: (file) => {
+                const uploadQueue = this.modalsManager.getOption('uploadQueue');
+
+                uploadQueue.pushObject(file);
+                checkQueue();
+            },
+            removeFile: (file) => {
+                const { queue } = file;
+                const uploadQueue = this.modalsManager.getOption('uploadQueue');
+
+                uploadQueue.removeObject(file);
+                queue.remove(file);
+                checkQueue();
+            },
+            confirm: async (modal) => {
+                const selectedCategory = this.modalsManager.getOption('selectedCategory');
+                const uploadQueue = this.modalsManager.getOption('uploadQueue');
+                const uploadedFiles = [];
+                const uploadTask = (file) => {
+                    return new Promise((resolve) => {
+                        this.fetch.uploadFile.perform(
+                            file,
+                            {
+                                path: `uploads/storefront-product-imports/${this.currentUser.companyId}`,
+                                type: `storefront_order_import`,
+                            },
+                            (uploadedFile) => {
+                                uploadedFiles.pushObject(uploadedFile);
+
+                                resolve(uploadedFile);
+                            }
+                        );
+                    });
+                };
+
+                if (!uploadQueue.length) {
+                    return this.notifications.warning('No files in queue to upload!');
+                }
+
+                modal.startLoading();
+                modal.setOption('acceptButtonText', 'Uploading...');
+
+                for (let i = 0; i < uploadQueue.length; i++) {
+                    const file = uploadQueue.objectAt(i);
+
+                    await uploadTask(file);
+                }
+
+                this.modalsManager.setOption('acceptButtonText', 'Processing...');
+                this.modalsManager.setOption('isProcessing', true);
+
+                const files = uploadedFiles.map((file) => file.id);
+                const results = await this.fetch
+                    .post('products/process-imports', { files, category: selectedCategory?.id, store: this.activeStore.id }, { namespace: 'storefront/int/v1' })
+                    .catch((error) => {
+                        this.notifications.serverError(error);
+                    });
+
+                modal.done().then(() => {
+                    if (results?.length) {
+                        this.notifications.success(`Successfully imported ${results.length} products...`);
+                        return this.hostRouter.refresh();
+                    }
+                });
+            },
+            decline: (modal) => {
+                this.modalsManager.setOption('uploadQueue', []);
+                this.fileQueue?.flush();
+
+                modal.done();
+            },
+        });
+    }
+}

package/addon/controllers/settings/api.js

@@ -0,0 +1,3 @@
+import Controller from '@ember/controller';
+
+export default class SettingsApiController extends Controller {}

package/addon/controllers/settings/gateways.js

@@ -0,0 +1,110 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { alias } from '@ember/object/computed';
+import { action, set } from '@ember/object';
+import { capitalize } from '@ember/string';
+import getGatewaySchemas from '../../utils/get-gateway-schemas';
+
+export default class SettingsGatewaysController extends Controller {
+    @service notifications;
+    @service modalsManager;
+    @service store;
+    @service crud;
+    @service storefront;
+    @alias('storefront.activeStore') activeStore;
+
+    @action createGateway() {
+        const gateway = this.store.createRecord('gateway', {
+            owner_uuid: this.activeStore.id,
+            owner_type: 'storefront:store',
+        });
+
+        this.editGateway(gateway, {
+            title: `Create a new payment gateway`,
+            acceptButtonText: 'Save Gateway',
+            decline: (modal) => {
+                gateway.destroyRecord();
+                modal.done();
+            },
+            successNotification: (gateway) => `New gateway (${gateway.name}) created.`,
+            onConfirm: () => {
+                if (gateway.get('isNew')) {
+                    return;
+                }
+
+                this.gateways.pushObject(gateway);
+            },
+        });
+    }
+
+    @action editGateway(gateway, options = {}) {
+        const schemas = getGatewaySchemas();
+        const schemaOptions = Object.keys(schemas);
+
+        this.modalsManager.show('modals/create-gateway', {
+            title: `Edit payment gateway`,
+            acceptButtonText: 'Save Changes',
+            schema: null,
+            schemas,
+            schemaOptions,
+            gateway,
+            selectSchema: (schema) => {
+                this.modalsManager.setOption('schema', schemas[schema]);
+
+                gateway.setProperties({
+                    name: `${capitalize(schema)} Gateway`,
+                    code: schema,
+                    config: schemas[schema],
+                    type: schema,
+                });
+            },
+            setConfigKey: (key, value) => {
+                // eslint-disable-next-line no-undef
+                if (value instanceof Event) {
+                    const eventValue = value.target.value;
+
+                    set(gateway.config, key, eventValue);
+                    return;
+                }
+
+                set(gateway.config, key, value);
+            },
+            confirm: (modal, done) => {
+                modal.startLoading();
+
+                gateway
+                    .save()
+                    .then((gateway) => {
+                        if (typeof options.successNotification === 'function') {
+                            this.notifications.success(options.successNotification(gateway));
+                        } else {
+                            this.notifications.success(options.successNotification || `${gateway.name} details updated.`);
+                        }
+
+                        done();
+                    })
+                    .catch((error) => {
+                        // gateway.rollbackAttributes();
+                        modal.stopLoading();
+                        this.notifications.serverError(error);
+                    });
+            },
+            ...options,
+        });
+    }
+
+    @action deleteGateway(gateway) {
+        this.modalsManager.confirm({
+            title: 'Are you sure you wish to remove this gateway?',
+            body: 'All applications and websites utilizing this gateway in configuration could be disrupted if gateway is not replaced beforehand',
+            confirm: (modal) => {
+                modal.startLoading();
+
+                return gateway.destroyRecord().then(() => {
+                    modal.stopLoading();
+                });
+            },
+        });
+    }
+}