@fleetbase/storefront-engine 0.1.6 → 0.1.8

package/.php-cs-fixer.php

@@ -0,0 +1,29 @@
+<?php
+
+$finder = PhpCsFixer\Finder::create()
+    ->in(__DIR__ . DIRECTORY_SEPARATOR . 'server' . DIRECTORY_SEPARATOR . 'tests')
+    ->in(__DIR__ . DIRECTORY_SEPARATOR . 'server' . DIRECTORY_SEPARATOR . 'src')
+    ->append(['.php-cs-fixer.php']);
+
+$rules = [
+    '@Symfony'               => true,
+    'phpdoc_no_empty_return' => false,
+    'array_syntax'           => ['syntax' => 'short'],
+    'yoda_style'             => false,
+    'binary_operator_spaces' => [
+        'operators' => [
+            '=>' => 'align',
+            '='  => 'align',
+        ],
+    ],
+    'concat_space'            => ['spacing' => 'one'],
+    'not_operator_with_space' => false,
+    'increment_style'         => ['style' => 'post'],
+    'indentation_type'        => true,
+    'single_quote'            => true,
+];
+
+return (new PhpCsFixer\Config())
+    ->setUsingCache(true)
+    ->setRules($rules)
+    ->setFinder($finder);

package/LICENSE.md

@@ -1,9 +1,21 @@
 The MIT License (MIT)
 
-Copyright (c) 2022
+Copyright (c) 2023 Fleetbase
 
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
 
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,32 +1,125 @@
-# @fleetbase/storefront-engine
+<p align="center">
+    <p align="center">
+        <img src="https://camo.githubusercontent.com/870812d4ebe999bd1434db7ffcb27c2f347f1c2c6af1842e59ae8b28855b4b42/68747470733a2f2f666c622d6173736574732e73332e61702d736f757468656173742d312e616d617a6f6e6177732e636f6d2f7374617469632f73746f726566726f6e742d6c6f676f2e737667" width="380" height="100" />
+    </p>
+    <p align="center">
+        Open-source Headless Commerce & Marketplace Extension for Fleetbase
+    </p>
+</p>
 
-[Short description of the addon.]
+---
 
+## Overview
 
-## Compatibility
+This monorepo contains both the frontend and backend components of the Storefront extension for Fleetbase. The frontend is built using Ember.js and the backend is implemented in PHP.
 
-* Ember.js v3.24 or above
-* Ember CLI v3.24 or above
-* Node.js v14 or above
+### Requirements
 
+- PHP 7.3.0 or above
+- Ember.js v3.24 or above
+- Ember CLI v3.24 or above
+- Node.js v14 or above
 
-## Installation
+## Structure
 
 ```
-ember install @fleetbase/storefront-engine
+├── addon
+├── app
+├── assets
+├── translations
+├── config
+├── node_modules
+├── server
+│ ├── config
+│ ├── data
+│ ├── migrations
+│ ├── resources
+│ ├── src
+│ ├── tests
+│ └── vendor
+├── tests
+├── testem.js
+├── index.js
+├── package.json
+├── phpstan.neon.dist
+├── phpunit.xml.dist
+├── pnpm-lock.yaml
+├── ember-cli-build.js
+├── composer.json
+├── CONTRIBUTING.md
+├── LICENSE.md
+├── README.md
+```
+
+## Installation
+
+### Backend
+
+Install the PHP packages using Composer:
+
+```bash
+composer require fleetbase/core-api
+composer require fleetbase/fleetops
+composer require fleetbase/storefront
 ```
+### Frontend
 
+Install the Ember.js Engine/Addon:
+
+```bash
+pnpm install @fleetbase/storefront
+```
 
 ## Usage
 
-[Longer description of how to use the addon in apps.]
+### Backend
+
+🧹 Keep a modern codebase with **PHP CS Fixer**:
+```bash
+composer lint
+```
 
+⚗️ Run static analysis using **PHPStan**:
+```bash
+composer test:types
+```
 
-## Contributing
+✅ Run unit tests using **PEST**
+```bash
+composer test:unit
+```
 
-See the [Contributing](CONTRIBUTING.md) guide for details.
+🚀 Run the entire test suite:
+```bash
+composer test
+```
 
+### Frontend
 
-## License
+🧹 Keep a modern codebase with **ESLint**:
+```bash
+pnpm lint
+```
 
-This project is licensed under the [MIT License](LICENSE.md).
+✅ Run unit tests using **Ember/QUnit**
+```bash
+pnpm test
+pnpm test:ember
+pnpm test:ember-compatibility
+```
+
+🚀 Start the Ember Addon/Engine
+```bash
+pnpm start
+```
+
+🔨 Build the Ember Addon/Engine
+```bash
+pnpm build
+```
+
+## Contributing
+See the Contributing Guide for details on how to contribute to this project.
+
+## License
+This project is licensed under the MIT License.

package/addon/components/modals/add-store-to-category.hbs

@@ -0,0 +1,5 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <NetworkCategoryPicker @network={{@options.network}} @onSelect={{@options.onSelectCategory}} @onCreateNewCategory={{@options.createNewCategory}} @wrapperClass="mr-2" />
+    </div>
+</Modal::Default>

package/addon/components/modals/create-network-category.hbs

@@ -1,8 +1,13 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
     <div class="modal-body-container">
+        <InputGroup @name="Parent category" @wrapperClass="border-b border-gray-200 dark:border-gray-700 pb-4 mb-3i">
+            <ModelSelect @modelName="category" @query={{hash for="storefront_network" owner_uuid=@options.network.id}} @selectedModel={{@options.parentCategory}} @placeholder="Select a parent category if any" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{@options.setParentCategory}} as |model|>
+                {{model.name}}
+            </ModelSelect>
+        </InputGroup>
         <InputGroup @name="Category name" @value={{@options.category.name}} @helpText="Enter a name for category" />
         <InputGroup @name="Category description" @value={{@options.category.description}} @helpText="Give your network category a brief description" />
-        <InputGroup @name="Category icon type" @wrapperClass="mb-0">
+        {{!-- <InputGroup @name="Category icon type" @wrapperClass="mb-0">
             <div class="flex flex-row dark:text-gray-100 mt-4">
                 <div class="flex flex-row items-center mr-4">
                     <RadioButton @radioClass="focus:ring-blue-500 mr-2" @radioId="image_icon_type" @value="image" @groupValue={{@options.iconType}} @name="icon_type" @changed={{fn (mut @options.iconType)}} />
@@ -14,35 +19,30 @@
                 </div>
             </div>
         </InputGroup>
-        <div>iconType: {{@options.iconType}}</div>
         <InputGroup @name="Category icon">
-            {{#if (eq @options.iconType "svg")}}
-                <FontAwesomeIconSelect @value={{@options.category.icon}} @onChange={{fn (mut @options.category.icon)}} @renderInPlace={{true}} />
-            {{else}}
-                <div class="w-32">
-                    <img src={{@options.category.icon_url}} alt={{@options.category.name}} class="w-full rounded-md" />
-                    <FileUpload @name="icons" @accept="image/*" @onFileAdded={{@options.uploadIcon}} as |queue|>
-                        <a tabindex={{0}} class="flex items-center px-0 mt-2 text-xs no-underline truncate btn btn-sm btn-default">
-                            {{#if queue.files.length}}
-                                <Spinner class="mr-1" />
-                                <span>
-                                    Uploading...
-                                </span>
-                            {{else}}
-                                <FaIcon @icon="image" class="mr-1" />
-                                <span>
-                                    Upload new
-                                </span>
-                            {{/if}}
-                        </a>
-                    </FileUpload>
-                    <a href="javascript:;" class="text-danger block mt-2" {{on "click" @options.clearImage}}>
-                        <FaIcon @icon="times" @prefix="fas" class="mr-1" />
-                        <span>Remove</span>
+            <div class="w-32">
+                <img src={{@options.category.icon_url}} alt={{@options.category.name}} class="w-full rounded-md" />
+                <FileUpload @name="icons" @accept="image/*" @onFileAdded={{@options.uploadIcon}} as |queue|>
+                    <a tabindex={{0}} class="flex items-center px-0 mt-2 text-xs no-underline truncate btn btn-sm btn-default">
+                        {{#if queue.files.length}}
+                            <Spinner class="mr-1" />
+                            <span>
+                                Uploading...
+                            </span>
+                        {{else}}
+                            <FaIcon @icon="image" class="mr-1" />
+                            <span>
+                                Upload new
+                            </span>
+                        {{/if}}
                     </a>
-                </div>
-            {{/if}}
-        </InputGroup>
+                </FileUpload>
+                <a href="javascript:;" class="text-danger block mt-2" {{on "click" @options.clearImage}}>
+                    <FaIcon @icon="times" @prefix="fas" class="mr-1" />
+                    <span>Remove</span>
+                </a>
+            </div>
+        </InputGroup> --}}
         <InputGroup>
             <TranslationsEditor @value={{@options.category.translations}} @defaultKeys={{array "name" "description"}} @onChange={{fn (mut @options.category.translations)}} />
         </InputGroup>

package/addon/components/modals/share-network.hbs

@@ -24,11 +24,11 @@
 
         <div class="rounded-md border dark:border-gray-800 dark:bg-gray-800 p-4">
             <h4 class="dark:text-gray-50 mb-4 font-semibold">Get link</h4>
-            <div class="input-group mb-0">
-                <ShortToggle @isToggled={{@options.network.options.shareable_link_enabled}} @onToggle={{@options.toggleShareableLink}} @label="Enable shareable link" @helpText="Anyone with this link is able to join your network" />
+            <div class="input-group mb-0i">
+                <Toggle @isToggled={{@options.network.options.shareable_link_enabled}} @onToggle={{@options.toggleShareableLink}} @label="Enable shareable link" @helpText="Anyone with this link is able to join your network" />
             </div>
             {{#if @options.network.options.shareable_link_enabled}}
-                <ClickToCopy class="mt-4 rounded-md border dark:border-gray-900 dark:bg-gray-900 truncate p-4 text-sm text-green-400 dark:text-green-300 text-center" @value={{@options.shareableLink}} />
+                <ClickToCopy class="mt-4 rounded-md border dark:border-gray-900 dark:bg-gray-900 truncate px-4 py-2.5 text-sm text-green-400 dark:text-green-300 text-center" @value={{@options.shareableLink}} />
             {{/if}}
         </div>
     </div>

package/addon/components/modals/store-details.hbs

@@ -0,0 +1,22 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <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">Name</div>
+                <div class="field-value">{{n-a @options.store.name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Description</div>
+                <div class="field-value">{{n-a @options.store.description}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Tags</div>
+                <div class="field-value">{{n-a @options.store.tagsList}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Currency</div>
+                <div class="field-value">{{n-a @options.store.currency}}</div>
+            </div>
+        </div>
+    </div>
+</Modal::Default>

package/addon/components/modals/store-form.hbs

@@ -0,0 +1,22 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @id="storefront_name_input" @name="Name" @value={{@options.store.name}} @placeholder="Storefront Name" @helpText="The name of your store." />
+        <InputGroup @name="Description" @value={{@options.store.description}} @placeholder="Storefront Description" @helpText="Give your store a brief description to let users know what you sell." />
+        <InputGroup @name="Tags">
+            <TagInput class="form-input" @placeholder="Add tags" @allowSpacesInTags={{true}} @tags={{@options.store.tags}} @addTag={{this.addTag}} @removeTagAtIndex={{this.removeTag}} as |tag|>
+                {{tag}}
+            </TagInput>
+        </InputGroup>
+        <InputGroup @name="Currency">
+            <CurrencySelect @value={{@options.store.currency}} @onSelect={{fn (mut @options.store.currency)}} @triggerClass="w-full form-select" />
+        </InputGroup>
+
+        <div class="store-boolean-settings">
+            <div class="input-group">
+                <Toggle @isToggled={{@options.store.online}} @onToggle={{fn (mut @options.store.online)}}>
+                    <FaIcon @icon="plug" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Online</span>
+                </Toggle>
+            </div>
+        </div>
+    </div>
+</Modal::Default>

package/addon/components/modals/store-form.js

@@ -0,0 +1,21 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { isArray } from '@ember/array';
+
+export default class ModalsStoreFormComponent extends Component {
+    get activeStore() {
+        return this.args.options.store;
+    }
+
+    @action addTag(tag) {
+        if (!isArray(this.activeStore.tags)) {
+            this.activeStore.tags = [];
+        }
+
+        this.activeStore.tags?.pushObject(tag);
+    }
+
+    @action removeTag(index) {
+        this.activeStore.tags?.removeAt(index);
+    }
+}

package/addon/components/network-category-picker.hbs

@@ -0,0 +1,40 @@
+<DropdownButton @renderInPlace={{true}} @size="xs" @type="magic" @icon="folder-tree" @iconSize="sm" @text={{this.buttonTitle}} @buttonClass={{concat "w-full truncate w-48" " " @buttonClass}} @buttonWrapperClass={{concat "w-full" " " @buttonWrapperClass}} @wrapperClass={{@wrapperClass}} as |dd|>
+    <div role="menu" class="store-selector-dropdown-menu next-dd-menu py-1">
+        <div role="group" class="px-1 overflow-y-scroll max-h-72">
+            {{#if this.isLoading}}
+                <div class="text-sm flex flex-row items-center px-3 py-0.5 border-0 my-1">
+                    <Spinner class="mr-2i" />
+                    <span class="dark:text-gray-100 test-sm">Loading...</span>
+                </div>
+            {{else}}
+                {{#if this.selectedCategory}}
+                    <a href="javascript:;" class="next-dd-item" role="menuitem" {{on "click" this.loadParentCategories}}>
+                        <FaIcon @icon="arrow-left" class="mr-2" />
+                        <span>Back</span>
+                    </a>
+                {{/if}}
+                {{#each this.categories as |category|}}
+                    <a href="javascript:;" class="next-dd-item" role="menuitem" {{on "click" (fn this.onSelectCategory category)}}>
+                        {{category.name}}
+                    </a>
+                {{else}}
+                    <div class="text-sm flex flex-row items-center px-3 py-0.5 border-0 my-1 truncate">
+                        {{#if this.selectedCategory}}
+                            <span>No subcategories for {{this.selectedCategory.name}}</span>
+                        {{else}}
+                            <span>No categories for this network</span>
+                        {{/if}}
+                    </div>
+                {{/each}}
+            {{/if}}
+        </div>
+        <div class="px-1">
+            <div class="next-dd-menu-seperator"></div>
+            <div role="group" class="px-1">
+                <a href="javascript:;" class="next-dd-item" role="menuitem" {{on "click" (dropdown-fn dd this.onCreateNewCategory)}}>
+                    Create a new category
+                </a>
+            </div>
+        </div>
+    </div>
+</DropdownButton>

package/addon/components/network-category-picker.js

@@ -0,0 +1,83 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import isModel from '@fleetbase/ember-core/utils/is-model';
+
+export default class NetworkCategoryPickerComponent extends Component {
+    @service fetch;
+    @service store;
+    @service notifications;
+    @tracked categories = [];
+    @tracked selectedCategory;
+    @tracked network;
+    @tracked isLoading = false;
+    @tracked buttonTitle = null;
+
+    constructor() {
+        super(...arguments);
+        this.network = this.args.network;
+        this.category = this.args.category;
+        this.setButtonTitle(this.category);
+        this.loadCategories(this.category);
+    }
+
+    setButtonTitle(selectedCategory) {
+        let buttonTitle = this.args.buttonTitle ?? 'Select Category';
+
+        if (selectedCategory) {
+            buttonTitle = selectedCategory.name;
+        }
+
+        this.buttonTitle = buttonTitle;
+    }
+
+    @action loadCategories(parentCategory) {
+        const queryParams = {
+            owner_uuid: this.network.id,
+            parents_only: parentCategory ? false : true,
+            with_subcategories: true,
+            for: 'storefront_network',
+        };
+
+        if (isModel(parentCategory)) {
+            queryParams.parent = parentCategory.id;
+            queryParams.with_parent = true;
+        }
+
+        this.isLoading = true;
+        this.store
+            .query('category', queryParams)
+            .then((categories) => {
+                this.categories = categories.toArray();
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    @action onSelectCategory(category) {
+        this.selectedCategory = category;
+        this.setButtonTitle(category);
+
+        if (typeof this.args.onSelect === 'function') {
+            this.args.onSelect(category);
+        }
+
+        this.loadCategories(category);
+    }
+
+    @action onCreateNewCategory() {
+        if (typeof this.args.onCreateNewCategory === 'function') {
+            this.args.onCreateNewCategory(this, this.selectedCategory);
+        }
+    }
+
+    @action async loadParentCategories() {
+        if (this.selectedCategory.parent) {
+            return this.onSelectCategory(this.selectedCategory.parent);
+        }
+
+        this.onSelectCategory(null);
+    }
+}

package/addon/components/store-selector.hbs

@@ -1,11 +1,13 @@
 {{#if @activeStore}}
     <DropdownButton @renderInPlace={{true}} @size="xs" @type="primary" @icon="store" @iconSize="sm" @text={{@activeStore.name}} @buttonClass={{concat "w-full " @buttonClass}} @buttonWrapperClass={{concat "w-full " @buttonWrapperClass}} @wrapperClass={{@wrapperClass}} as |dd|>
-        <div role="menu" class="next-dd-menu py-1">
-            <div role="group" class="px-1 overflow-y-scroll" {{set-height "300px"}}>
+        <div role="menu" class="store-selector-dropdown-menu next-dd-menu py-1">
+            <div role="group" class="px-1 overflow-y-scroll max-h-72">
                 {{#each @stores as |store|}}
                     <a href="javascript:;" class="next-dd-item" role="menuitem" {{on "click" (dropdown-fn dd this.onSwitchStore store)}}>
                         {{or store.name "-"}}
                     </a>
+                {{else}}
+                    <div class="next-dd-item" role="menuitem">No stores to select</div>
                 {{/each}}
             </div>
             <div class="px-1">

package/addon/components/widget/orders.js

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
-import { action, computed } from '@ember/object';
+import { action, computed, get } from '@ember/object';
 import { later } from '@ember/runloop';
 
 export default class WidgetOrdersComponent extends Component {
@@ -26,8 +26,15 @@ export default class WidgetOrdersComponent extends Component {
             100
         );
 
-        this.storefront.on('order.broadcasted', this.reloadOrders);
-        this.storefront.on('storefront.changed', this.reloadOrders);
+        // reload orders when new order income
+        this.storefront.on('order.broadcasted', () => {
+            this.reloadOrders();
+        });
+
+        // reload orders when store changes
+        this.storefront.on('storefront.changed', () => {
+            this.reloadOrders();
+        });
     }
 
     @action async reloadOrders(params = {}) {
@@ -52,27 +59,25 @@ export default class WidgetOrdersComponent extends Component {
         this.isLoading = true;
 
         return new Promise((resolve) => {
-            const storefront = this.storefront?.activeStore?.public_id;
+            const storefront = get(this.storefront, 'activeStore.public_id');
 
             if (!storefront) {
                 this.isLoading = false;
                 return resolve([]);
             }
 
+            const queryParams = {
+                storefront,
+                limit: 14,
+                sort: '-created_at',
+                ...params,
+            };
+
             this.fetch
-                .get(
-                    'orders',
-                    {
-                        storefront,
-                        limit: 14,
-                        sort: '-created_at',
-                        ...params,
-                    },
-                    {
-                        namespace: 'storefront/int/v1',
-                        normalizeToEmberData: true,
-                    }
-                )
+                .get('orders', queryParams, {
+                    namespace: 'storefront/int/v1',
+                    normalizeToEmberData: true,
+                })
                 .then((orders) => {
                     this.isLoading = false;