@fleetbase/storefront-engine 0.3.8 → 0.3.10

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

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

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

@@ -0,0 +1,58 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { isArray } from '@ember/array';
+import { inject as service } from '@ember/service';
+
+export default class AddProductAsEntityButtonComponent extends Component {
+    @service modalsManager;
+    @service fetch;
+    @service notifications;
+    @tracked order;
+    @tracked controller;
+
+    constructor(owner, { order, controller }) {
+        super(...arguments);
+        this.order = order;
+        this.controller = controller;
+    }
+
+    @action promptProductSelection() {
+        this.modalsManager.show('modals/select-product', {
+            title: 'Select Product to Add to Order',
+            modalClass: 'modal-lg',
+            acceptButtonText: 'Add Products',
+            acceptButtonDisabled: true,
+            selectedProducts: [],
+            selectedStorefront: null,
+            confirm: (modal) => {
+                modal.startLoading();
+
+                const selectedStorefront = modal.getOption('selectedStorefront');
+                const selectedProducts = modal.getOption('selectedProducts', []);
+                const products = selectedProducts.map((product) => product.id);
+
+                return this.fetch
+                    .post('products/create-entities', { products }, { namespace: 'storefront/int/v1', normalizeToEmberData: true, normalizeModelType: 'entity' })
+                    .then((entities) => {
+                        this.controller.addEntities(entities);
+                        if (isArray(this.order.meta)) {
+                            this.order.meta.pushObjects([
+                                {
+                                    key: 'storefront',
+                                    value: selectedStorefront.name
+                                },
+                                {
+                                    key: 'storefront_id',
+                                    value: selectedStorefront.public_id
+                                }
+                            ]);
+                        }
+                    })
+                    .catch((error) => {
+                        this.notifications.serverError(error);
+                    });
+            },
+        });
+    }
+}

package/addon/components/customer-panel.js

@@ -7,6 +7,7 @@ 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.

package/addon/components/modals/manage-addons.hbs

@@ -7,7 +7,14 @@ s<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confir
                 {{/unless}}
             </div>
             <div>
-                <Button @type="magic" @text={{t "storefront.component.modals.manage-addons.title"}} @icon="plus" @iconPrefix="fas" @onClick={{perform this.createAddonCategory}} @disabled={{not this.createAddonCategory.isIdle}} />
+                <Button
+                    @type="magic"
+                    @text={{t "storefront.component.modals.manage-addons.title"}}
+                    @icon="plus"
+                    @iconPrefix="fas"
+                    @onClick={{perform this.createAddonCategory}}
+                    @disabled={{not this.createAddonCategory.isIdle}}
+                />
             </div>
         </div>
 
@@ -17,10 +24,21 @@ s<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confir
                     <div class="flex items-center rounded-md shadow-sm px-3 py-2 font-semibold bg-gray-200 dark:bg-gray-800 dark:text-gray-100 mb-2">
                         <div class="flex-1 flex items-center">
                             <FaIcon @icon="pencil" class="mr-1 dark:text-gray-100" />
-                            <Input @type="text" @value={{category.name}} {{on "blur" (perform this.saveAddonCategory category)}} class="w-full px-2 m-0 border-none bg-transparent dark:text-gray-100" />
+                            <Input
+                                @type="text"
+                                @value={{category.name}}
+                                {{on "blur" (perform this.saveAddonCategory category)}}
+                                class="w-full px-2 m-0 border-none bg-transparent dark:text-gray-100"
+                            />
                         </div>
                         <div class="flex items-center">
-                            <Button @text={{t "storefront.component.modals.manage-addons.new-addon"}} @icon="plus" @iconPrefix="fas" @onClick={{fn this.createNewAddon category}} class="mr-3" />
+                            <Button
+                                @text={{t "storefront.component.modals.manage-addons.new-addon"}}
+                                @icon="plus"
+                                @iconPrefix="fas"
+                                @onClick={{fn this.createNewAddon category}}
+                                class="mr-3"
+                            />
                             <a href="javascript:;" {{on "click" (perform this.deleteAddonCategory index)}} class="destroy-action opacity-50 hover:opacity-100 text-sm">
                                 {{t "storefront.component.modals.manage-addons.delete"}}
                             </a>

package/addon/components/modals/select-product.hbs

@@ -0,0 +1,87 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="grid grid-cols-3 gap-2">
+            <InputGroup @name="Select Store">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{this.stores}}
+                        @selected={{this.selectedStorefront}}
+                        @onChange={{this.onStorefrontSelect}}
+                        @registerAPI={{this.setStorefrontSelectApi}}
+                        @optionValue="name"
+                        @placeholder="Select Storefront"
+                        @triggerClass="form-select form-input"
+                        @disabled={{not this.stores}}
+                        as |storefront|
+                    >
+                        {{storefront.name}}
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+
+            {{#if (and this.selectedStorefront this.productCategories)}}
+                <InputGroup @name="Select Product Category">
+                    <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                        <PowerSelect
+                            @options={{this.productCategories}}
+                            @selected={{this.selectedCategory}}
+                            @onChange={{this.onSelectProductCategory}}
+                            @disabled={{not this.productCategories}}
+                            @placeholder="Filter by Product Category"
+                            @triggerClass="form-select form-input"
+                            as |category|
+                        >
+                            {{category.name}}
+                        </PowerSelect>
+                    </div>
+                </InputGroup>
+            {{/if}}
+
+            {{#if this.selectedProducts}}
+                <div class="py-2 flex items-center dark:text-white text-gray-900">
+                    Selected
+                    {{pluralize this.selectedProducts.length "Product"}}
+                </div>
+            {{/if}}
+        </div>
+        <div class="min-h-4r">
+            {{#if this.selectedStorefront}}
+                {{#if this.fetchProductsForStorefront.isRunning}}
+                    <Spinner @loadingMessage="Loading products..." />
+                {{else}}
+                    <div class="grid grid-cols-3 lg:grid-cols-4 gap-2">
+                        {{#each this.products as |product|}}
+                            {{#let (in-array product this.selectedProducts) as |isSelected|}}
+                                <div
+                                    class="border bg-white dark:bg-gray-900 dark:text-gray-100 text-center rounded-md px-2 py-3
+                                        {{if isSelected 'border-blue-500 dark:border-blue-500 outline-offset-2 outline-blue-400 outline-dashed' 'border-gray-200 dark:border-gray-700'}}"
+                                >
+                                    <div class="flex flex-col items-center justify-center overflow-hidden">
+                                        <div class="mb-3 flex items-center justify-center">
+                                            <img src={{product.primary_image_url}} alt={{product.name}} class="w-24 h-24" />
+                                        </div>
+                                        <h4 class="font-semibold mb-1">{{product.name}}</h4>
+                                        <p class="text-sm truncate">{{product.description}}</p>
+                                        <p class="mb-2 text-sm text-green-400">{{format-currency product.price product.currency}}</p>
+                                        <div class="flex items-center justify-evenly space-x-4">
+                                            <Button
+                                                @type={{if isSelected "danger" "default"}}
+                                                @icon="circle-plus"
+                                                @text={{if isSelected "Remove Product" "Add Product"}}
+                                                @onClick={{fn this.toggleProductSelection product}}
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            {{/let}}
+                        {{else}}
+                            <div>
+                                <h3 class="dark:text-gray-100 text-opacity-75 text-sm">No products</h3>
+                            </div>
+                        {{/each}}
+                    </div>
+                {{/if}}
+            {{/if}}
+        </div>
+    </div>
+</Modal::Default>

package/addon/components/modals/select-product.js

@@ -0,0 +1,88 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+import { pluralize } from 'ember-inflector';
+
+export default class ModalsSelectProductComponent extends Component {
+    @service fetch;
+    @service notifications;
+    @service modalsManager;
+    @tracked stores = [];
+    @tracked productCategories = [];
+    @tracked products = [];
+    @tracked selectedProducts = [];
+    @tracked selectedStorefront;
+    @tracked selectedCategory;
+    @tracked storefrontSelectAPI;
+
+    constructor() {
+        super(...arguments);
+        this.fetchStorefronts.perform();
+    }
+
+    @action toggleProductSelection(product) {
+        if (this.selectedProducts.includes(product)) {
+            this.selectedProducts.removeObject(product);
+        } else {
+            this.selectedProducts.pushObject(product);
+        }
+
+        this.updateSelectedProducts();
+    }
+
+    updateSelectedProducts() {
+        this.modalsManager.setOption('selectedProducts', this.selectedProducts);
+        this.modalsManager.setOption('acceptButtonDisabled', this.selectedProducts.length === 0);
+        this.modalsManager.setOption('acceptButtonText', this.selectedProducts.length ? `Add ${pluralize(this.selectedProducts.length, 'Product')}` : 'Add Products');
+        this.modalsManager.setOption('selectedStorefront', this.selectedStorefront);
+    }
+
+    @action setStorefrontSelectApi(storefrontSelectAPI) {
+        this.storefrontSelectAPI = storefrontSelectAPI;
+    }
+
+    @action onStorefrontSelect(storefront) {
+        this.selectedStorefront = storefront;
+        this.selectedCategory = null;
+        this.selectedProducts = [];
+        this.updateSelectedProducts();
+        this.fetchCategoriesForStorefront.perform(storefront);
+        this.fetchProductsForStorefront.perform(storefront);
+    }
+
+    @action onSelectProductCategory(category) {
+        this.selectedCategory = category;
+        this.fetchProductsForStorefront.perform(this.selectedStorefront, { category_slug: category.slug });
+    }
+
+    @task *fetchStorefronts(queryParams = {}) {
+        try {
+            this.stores = yield this.fetch.get('stores', queryParams, { namespace: 'storefront/int/v1', normalizeToEmberData: true });
+        } catch (error) {
+            this.notifications.serverError(error);
+            return;
+        }
+
+        if (this.stores && this.storefrontSelectAPI) {
+            this.storefrontSelectAPI.actions.select(this.stores[0]);
+        }
+    }
+
+    @task *fetchProductsForStorefront(storefront, queryParams = {}) {
+        try {
+            this.products = yield this.fetch.get('products', { store_uuid: storefront.id, ...queryParams }, { namespace: 'storefront/int/v1', normalizeToEmberData: true });
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @task *fetchCategoriesForStorefront(storefront, queryParams = {}) {
+        try {
+            this.productCategories = yield this.fetch.get('categories', { for: 'storefront_product', owner_uuid: storefront.id, limit: -1, ...queryParams }, { normalizeToEmberData: true });
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+}

package/addon/components/order-panel.js

@@ -1,16 +1,14 @@
 import Component from '@glimmer/component';
-
+import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import applyContextComponentArguments from '@fleetbase/ember-core/utils/apply-context-component-arguments';
 import contextComponentCallback from '@fleetbase/ember-core/utils/context-component-callback';
-import { tracked } from '@glimmer/tracking';
 
 export default class OrderPanelComponent extends Component {
     @tracked context = null;
 
     constructor() {
         super(...arguments);
-
         applyContextComponentArguments(this);
     }
 

package/addon/components/widget/orders.hbs

@@ -31,8 +31,8 @@
                     <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.customer_name}}</td>
-                        <td>{{n-a order.driver_name}}</td>
+                        <td>{{n-a order.customer.name}}</td>
+                        <td>{{n-a order.driver_assigned.name}}</td>
                         <td>{{order.createdAgo}}</td>
                         <td>
                             <Badge @status={{order.status}} />

package/addon/components/widget/orders.js

@@ -4,6 +4,7 @@ import { inject as service } from '@ember/service';
 import { inject as controller } from '@ember/controller';
 import { action, computed, get } from '@ember/object';
 import { later } from '@ember/runloop';
+
 export default class WidgetOrdersComponent extends Component {
     @service store;
     @service storefront;

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

@@ -66,7 +66,10 @@ export default class ProductsIndexCategoryNewController extends BaseController {
 
         this.loader.removeLoader(loader);
         this.notifications.success(this.intl.t('storefront.products.index.new.new-product-created-success'));
-        yield this.transitionToRoute('products.index.category', category.slug);
+        
+        try {
+            yield this.transitionToRoute('products.index.category', category.slug);
+        } catch (error) {}
         this.reset();
     }
 

package/addon/engine.js

@@ -5,6 +5,7 @@ import config from './config/environment';
 import services from '@fleetbase/ember-core/exports/services';
 import StorefrontKeyMetricsWidget from './components/widget/storefront-key-metrics';
 import StorefrontOrderSummaryComponent from './components/storefront-order-summary';
+import AddProductAsEntityButtonComponent from './components/add-product-as-entity-button';
 
 const { modulePrefix } = config;
 const externalRoutes = ['console', 'extensions'];
@@ -35,6 +36,7 @@ export default class StorefrontEngine extends Engine {
 
         // register component to views
         universe.registerRenderableComponent('@fleetbase/fleetops-engine', 'fleet-ops:template:operations:orders:view', StorefrontOrderSummaryComponent);
+        universe.registerRenderableComponent('@fleetbase/fleetops-engine', 'fleet-ops:template:operations:orders:new:entities-input', AddProductAsEntityButtonComponent);
 
         // register widgets
         universe.registerDefaultDashboardWidgets([KeyMetricsWidgetDefinition]);

package/addon/templates/customers/index.hbs

@@ -22,8 +22,6 @@
         @paginationMeta={{@model.meta}}
         @page={{this.page}}
         @onPageChange={{fn (mut this.page)}}
-        @tfootVerticalOffset="53"
-        @tfootVerticalOffsetElements=".next-view-section-subheader"
     />
 </Layout::Section::Body>
 

package/addon/templates/networks/index/network/customers.hbs

@@ -12,7 +12,5 @@
         @paginationMeta={{@model.meta}}
         @page={{this.page}}
         @onPageChange={{fn (mut this.page)}}
-        @tfootVerticalOffset="53"
-        @tfootVerticalOffsetElements=".next-view-section-subheader"
     />
 </Layout::Section::Body>

package/addon/templates/networks/index/network/orders.hbs

@@ -12,7 +12,5 @@
         @paginationMeta={{@model.meta}}
         @page={{this.page}}
         @onPageChange={{fn (mut this.page)}}
-        @tfootVerticalOffset="53"
-        @tfootVerticalOffsetElements=".next-view-section-subheader"
     />
 </Layout::Section::Body>

package/addon/templates/orders/index.hbs

@@ -33,8 +33,6 @@
         @paginationMeta={{@model.meta}}
         @page={{this.page}}
         @onPageChange={{fn (mut this.page)}}
-        @tfootVerticalOffset="53"
-        @tfootVerticalOffsetElements=".next-view-section-subheader"
     />
 </Layout::Section::Body>
 

package/addon/templates/products/index/category/new.hbs

@@ -1,6 +1,19 @@
 <Overlay @position="right" @noBackdrop={{true}} @isResizable={{true}} @width="570px" @fullHeight={{true}} @containerClass="border-l border-transparent dark:border-gray-700">
-    <Overlay::Header @title={{this.overlayTitle}} @titleClass="truncate" @titleWrapperClass="w-3/4" @headerLeftClass="w-70pc" @headerLeftInnerClass="w-full flex-1" @onPressCancel={{this.transitionBack}}>
-        <Button @icon={{this.overlayActionButtonIcon}} @type="primary" @text={{this.overlayActionButtonTitle}} @onClick={{perform this.saveProduct}} @isLoading={{not this.saveProduct.isIdle}} />
+    <Overlay::Header
+        @title={{this.overlayTitle}}
+        @titleClass="truncate"
+        @titleWrapperClass="w-3/4"
+        @headerLeftClass="w-70pc"
+        @headerLeftInnerClass="w-full flex-1"
+        @onPressCancel={{this.transitionBack}}
+    >
+        <Button
+            @icon={{this.overlayActionButtonIcon}}
+            @type="primary"
+            @text={{this.overlayActionButtonTitle}}
+            @onClick={{perform this.saveProduct}}
+            @isLoading={{not this.saveProduct.isIdle}}
+        />
     </Overlay::Header>
 
     <Overlay::Body @increaseInnerBodyHeightBy="0" @wrapperClass="new-order-overlay-body px-4 space-y-4 pt-4">
@@ -9,21 +22,48 @@
             <Textarea @value={{this.product.description}} class="form-input w-full" placeholder="Enter a description of your product...." rows={{4}} />
         </InputGroup>
         <InputGroup @name="Product Tags">
-            <TagInput class="form-input" @placeholder="Add tags" @allowSpacesInTags={{true}} @tags={{this.product.tags}} @addTag={{this.addTag}} @removeTagAtIndex={{this.removeTag}} as |tag|>
+            <TagInput
+                class="form-input"
+                @placeholder="Add tags"
+                @allowSpacesInTags={{true}}
+                @tags={{this.product.tags}}
+                @addTag={{this.addTag}}
+                @removeTagAtIndex={{this.removeTag}}
+                as |tag|
+            >
                 {{tag}}
             </TagInput>
         </InputGroup>
         <InputGroup @name="Product SKU" @value={{this.product.sku}} @helpText="Enter product SKU if applicable" />
         <div class="grid grid-cols-2 gap-2">
             <InputGroup @name="Price" @helpText="Enter a price users will pay to purchase this product">
-                <MoneyInput class="w-full" @currency={{if this.product.currency this.product.currency this.activeStore.currency}} @value={{this.product.price}} @canSelectCurrency={{false}} @onCurrencyChange={{fn (mut this.product.currency)}} />
+                <MoneyInput
+                    class="w-full"
+                    @currency={{if this.product.currency this.product.currency this.activeStore.currency}}
+                    @value={{this.product.price}}
+                    @canSelectCurrency={{false}}
+                    @onCurrencyChange={{fn (mut this.product.currency)}}
+                />
             </InputGroup>
             <InputGroup @name="Sale Price" @helpText="Optionally add a sale price for the product if the product is put on sale">
-                <MoneyInput class="w-full" @currency={{if this.product.currency this.product.currency this.activeStore.currency}} @value={{this.product.sale_price}} @canSelectCurrency={{false}} @onCurrencyChange={{fn (mut this.product.currency)}} />
+                <MoneyInput
+                    class="w-full"
+                    @currency={{if this.product.currency this.product.currency this.activeStore.currency}}
+                    @value={{this.product.sale_price}}
+                    @canSelectCurrency={{false}}
+                    @onCurrencyChange={{fn (mut this.product.currency)}}
+                />
             </InputGroup>
         </div>
 
-        <ContentPanel @title="Metadata" @open={{this.product.meta_array.length}} @actionButtons={{this.metadataButtons}} @pad={{true}} @panelBodyWrapperClass="px-0 py-4" @panelBodyClass="bg-white dark:bg-gray-800">
+        <ContentPanel
+            @title="Metadata"
+            @open={{this.product.meta_array.length}}
+            @actionButtons={{this.metadataButtons}}
+            @pad={{true}}
+            @panelBodyWrapperClass="px-0 py-4"
+            @panelBodyClass="bg-white dark:bg-gray-800"
+        >
             {{#each this.product.meta_array as |metaField index|}}
                 <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
                     <div class="input-group">
@@ -103,7 +143,12 @@
                                             <Input @type="text" @value={{variantOption.description}} class="form-input w-full" placeholder="Option Description" />
                                         </div>
                                         <div class="col-span-2">
-                                            <MoneyInput class="w-full" @currency={{if this.product.currency this.product.currency this.activeStore.currency}} @canSelectCurrency={{false}} @value={{variantOption.additional_cost}} />
+                                            <MoneyInput
+                                                class="w-full"
+                                                @currency={{if this.product.currency this.product.currency this.activeStore.currency}}
+                                                @canSelectCurrency={{false}}
+                                                @value={{variantOption.additional_cost}}
+                                            />
                                         </div>
                                         <div class="flex items-center justify-center text-center text-sm">
                                             <a href="javascript:;" {{on "click" (fn this.removeVariantOption variant index)}}>Remove</a>
@@ -169,7 +214,9 @@
         <ContentPanel @title="Images & Videos" @open={{this.product.files.length}} @pad={{false}} @panelBodyWrapperClass="px-0 py-4" @panelBodyClass="bg-white dark:bg-gray-800">
             <div class="px-6 space-y-4">
                 {{#if this.isUploading}}
-                    <div class="min-h-56 dropzone w-full rounded-lg px-4 py-8 min-h bg-gray-50 dark:bg-gray-900 bg-opacity-25 text-gray-900 dark:text-white text-center flex flex-col items-center justify-center border-2 border-dashed border-gray-200 dark:border-indigo-500">
+                    <div
+                        class="min-h-56 dropzone w-full rounded-lg px-4 py-8 min-h bg-gray-50 dark:bg-gray-900 bg-opacity-25 text-gray-900 dark:text-white text-center flex flex-col items-center justify-center border-2 border-dashed border-gray-200 dark:border-indigo-500"
+                    >
                         <div class="flex items-center justify-center py-5">
                             <Spinner class="text-sm dar:text-gray-100" @loadingMessage={{t "component.dropzone.uploading"}} />
                         </div>
@@ -228,7 +275,14 @@
                             {{#each this.product.files as |file|}}
                                 <FileRecord @file={{file}} @fileIconClass={{if (eq this.product.primary_image_uuid file.id) "border-blue-400"}} @onDelete={{this.removeFile}}>
                                     <div class="flex items-center justify-evenly">
-                                        <Button @icon="magic" @text="Make Primary" @size="xs" @textClass="text-xs truncate" @onClick={{fn this.makePrimaryFile file}} @disabled={{eq this.product.primary_image_uuid file.id}} />
+                                        <Button
+                                            @icon="magic"
+                                            @text="Make Primary"
+                                            @size="xs"
+                                            @textClass="text-xs truncate"
+                                            @onClick={{fn this.makePrimaryFile file}}
+                                            @disabled={{eq this.product.primary_image_uuid file.id}}
+                                        />
                                     </div>
                                 </FileRecord>
                             {{/each}}

package/addon/templates/settings/gateways.hbs

@@ -18,8 +18,17 @@
             {{#each this.model as |gateway|}}
                 <ContentPanel @title={{gateway.name}} @open={{true}} @pad={{true}}>
                     <InputGroup @name={{t "storefront.settings.gateways.gateway-name"}} @value={{gateway.name}} @helpText={{t "storefront.settings.gateways.helpText"}} />
-                    <InputGroup @name={{t "storefront.settings.gateways.gateway-code"}} @value={{gateway.code}} @disabled={{true}} @helpText={{t "storefront.settings.gateways.gateway-code-help-text"}} />
-                    <InputGroup @name={{t "storefront.settings.gateways.callback-url"}} @value={{gateway.callback_url}} @helpText={{t "storefront.settings.gateways.callback-url-help-text"}} />
+                    <InputGroup
+                        @name={{t "storefront.settings.gateways.gateway-code"}}
+                        @value={{gateway.code}}
+                        @disabled={{true}}
+                        @helpText={{t "storefront.settings.gateways.gateway-code-help-text"}}
+                    />
+                    <InputGroup
+                        @name={{t "storefront.settings.gateways.callback-url"}}
+                        @value={{gateway.callback_url}}
+                        @helpText={{t "storefront.settings.gateways.callback-url-help-text"}}
+                    />
                     <InputGroup @name={{t "storefront.settings.gateways.return-url"}} @value={{gateway.return_url}} @helpText={{t "storefront.settings.gateways.return-url-help-text"}} />
                     <div class="input-group">
                         <Checkbox @value={{gateway.sandbox}} @label={{t "storefront.settings.gateways.this-is-a-sandbox-gateway"}} @onToggle={{fn (mut gateway.sandbox)}} />

package/addon/templates/settings/locations.hbs

@@ -43,4 +43,5 @@
             {{/each}}
         </div>
     </form>
+    <Spacer @height="300px" />
 </SettingsContainer>

package/app/components/add-product-as-entity-button.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/components/add-product-as-entity-button';

package/app/components/modals/select-product.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/components/modals/select-product';

package/composer.json

@@ -1,6 +1,6 @@
 {
     "name": "fleetbase/storefront-api",
-    "version": "0.3.8",
+    "version": "0.3.10",
     "description": "Headless Commerce & Marketplace Extension for Fleetbase",
     "keywords": [
         "fleetbase-extension",
@@ -22,8 +22,8 @@
     ],
     "require": {
         "php": "^8.0",
-        "fleetbase/core-api": "^1.4.23",
-        "fleetbase/fleetops-api": "^0.4.28",
+        "fleetbase/core-api": "^1.4.26",
+        "fleetbase/fleetops-api": "^0.5.0",
         "geocoder-php/google-maps-places-provider": "^1.4",
         "laravel-notification-channels/apn": "^5.0",
         "laravel-notification-channels/fcm": "^4.1",

package/extension.json

@@ -1,6 +1,6 @@
 {
     "name": "Storefront",
-    "version": "0.3.8",
+    "version": "0.3.10",
     "description": "Headless Commerce & Marketplace Extension for Fleetbase",
     "repository": "https://github.com/fleetbase/storefront",
     "license": "MIT",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/storefront-engine",
-    "version": "0.3.8",
+    "version": "0.3.10",
     "description": "Headless Commerce & Marketplace Extension for Fleetbase",
     "fleetbase": {
         "route": "storefront",
@@ -43,8 +43,8 @@
         "publish:github": "npm config set '@fleetbase:registry' https://npm.pkg.github.com/ && npm publish"
     },
     "dependencies": {
-        "@fleetbase/ember-core": "^0.2.9",
-        "@fleetbase/ember-ui": "^0.2.14",
+        "@fleetbase/ember-core": "^0.2.11",
+        "@fleetbase/ember-ui": "^0.2.17",
         "@fleetbase/fleetops-data": "^0.1.15",
         "@babel/core": "^7.23.2",
         "@fortawesome/ember-fontawesome": "^0.4.1",

package/server/src/Http/Controllers/ProductController.php

@@ -2,6 +2,7 @@
 
 namespace Fleetbase\Storefront\Http\Controllers;
 
+use Fleetbase\FleetOps\Http\Resources\v1\Entity as EntityResource;
 use Fleetbase\FleetOps\Support\Utils;
 use Fleetbase\Models\Category;
 use Fleetbase\Models\File;
@@ -165,4 +166,34 @@ class ProductController extends StorefrontController
 
         return response()->json($products);
     }
+
+    /**
+     * Retrieves a list of product IDs from the request, finds the corresponding Product models, converts each to an Entity, and returns them as a JSON response.
+     *
+     * This function handles a request that includes an array of product UUIDs. It fetches the corresponding Product models from the database,
+     * converts each Product to an Entity using the Product model's toEntity method, and collects these entities. The function finally returns
+     * these entities as a JSON response, which can be useful for front-end applications or other services that need structured product data.
+     *
+     * @param Request $request the request object, expected to contain an array of product UUIDs under the 'products' key
+     *
+     * @return \Illuminate\Http\JsonResponse Returns a JSON response that contains an array of Entity objects, each representing a product.
+     *                                       Each Entity object includes all relevant product details formatted and structured as specified in the Product model's toEntity method.
+     *
+     * @example
+     * // Example usage:
+     * POST /storefront/int/v1/products/create-entities
+     * Body: { "products": ["uuid1", "uuid2"] }
+     */
+    public function createEntities(Request $request)
+    {
+        $productIds = $request->array('products');
+        $products   = Product::whereIn('uuid', $productIds)->get();
+        $entities   = [];
+
+        foreach ($products as $product) {
+            $entities[] = $product->createAsEntity();
+        }
+
+        return EntityResource::collection($entities);
+    }
 }

package/server/src/Models/Product.php

@@ -3,6 +3,7 @@
 namespace Fleetbase\Storefront\Models;
 
 use Fleetbase\Casts\Json;
+use Fleetbase\FleetOps\Models\Entity;
 use Fleetbase\FleetOps\Support\Utils;
 use Fleetbase\Models\Category;
 use Fleetbase\Models\File;
@@ -430,4 +431,73 @@ class Product extends StorefrontModel
 
         return $results;
     }
+
+    /**
+     * Converts a Product model instance to an Entity object, which represents a more detailed and structured form of the product data.
+     *
+     * This function utilizes the properties of the Product model along with any additional attributes provided to construct a new Entity object.
+     * The Entity object contains detailed information about the product, including identifiers, names, pricing information, and meta attributes.
+     * Meta attributes can be dynamically added to extend the data structure with additional custom information.
+     *
+     * @param array $additionalAttributes Optional. Additional attributes that can be merged into the product's meta information.
+     *                                    This array can include any custom data under the 'meta' key, which is merged with the default meta attributes.
+     *                                    Default is an empty array.
+     *
+     * @return Entity Returns a new Entity object populated with product information and any additional meta attributes.
+     *                The Entity object is structured with a set of predefined keys (e.g., company_uuid, photo_uuid) and can be customized with additional meta attributes.
+     *
+     * @example
+     * // Example usage:
+     * $product = new Product();
+     * $entity = $product->toEntity(['meta' => ['custom_attribute' => 'value']]);
+     */
+    public function toEntity(array $additionalAttributes = []): Entity
+    {
+        $meta = data_get($additionalAttributes, 'meta', []);
+
+        return new Entity([
+            'company_uuid' => session('company'),
+            'photo_uuid'   => $this->primary_image_uuid,
+            'internal_id'  => $this->public_id,
+            'name'         => $this->name,
+            'description'  => $this->description,
+            'currency'     => $this->currency,
+            'sku'          => $this->sku,
+            'price'        => $this->price,
+            'sale_price'   => $this->sale_price,
+            'type'         => 'storefront-product',
+            ...$additionalAttributes,
+            'meta'         => [
+                'product_id' => $this->public_id,
+                'image_url'  => $this->primary_image_url,
+                ...$meta,
+            ],
+        ]);
+    }
+
+    /**
+     * Creates a new Entity from the Product model instance and saves it to the database.
+     *
+     * This function first converts the Product model to an Entity object using the toEntity method. It then saves this Entity object to the
+     * database, ensuring that all product details are persisted. This is particularly useful when the Product model needs to be
+     * represented and stored as an Entity for operations that require a more complex data structure or additional business logic.
+     *
+     * @param array $additionalAttributes Optional. Additional attributes that can be passed to the toEntity method to include custom
+     *                                    meta information in the Entity creation process. Default is an empty array.
+     *
+     * @return Entity Returns the Entity object after saving it to the database. This object contains all the product information along
+     *                with any additional attributes that were passed.
+     *
+     * @example
+     * // Example usage:
+     * $product = new Product();
+     * $entity = $product->createAsEntity(['meta' => ['custom_attribute' => 'value']]);
+     */
+    public function createAsEntity(array $additionalAttributes = []): Entity
+    {
+        $entity = $this->toEntity();
+        $entity->save();
+
+        return $entity;
+    }
 }

package/server/src/Observers/OrderObserver.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace Fleetbase\Storefront\Observers;
+
+use Fleetbase\FleetOps\Models\Order;
+
+class OrderObserver
+{
+    /**
+     * Handle the Order "created" event.
+     *
+     * @return void
+     */
+    public function created(Order $order)
+    {
+    }
+}

package/server/src/routes.php

@@ -145,6 +145,7 @@ Route::prefix(config('storefront.api.routing.prefix', 'storefront'))->namespace(
                             'products',
                             function ($router, $controller) {
                                 $router->post('process-imports', $controller('processImports'));
+                                $router->post('create-entities', $controller('createEntities'));
                             }
                         );
                         $router->fleetbaseRoutes('product-hours');