@fleetbase/storefront-engine 0.0.1

package/LICENSE.md

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright (c) 2022
+
+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 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

@@ -0,0 +1,32 @@
+# @fleetbase/storefront-engine
+
+[Short description of the addon.]
+
+
+## Compatibility
+
+* Ember.js v3.24 or above
+* Ember CLI v3.24 or above
+* Node.js v14 or above
+
+
+## Installation
+
+```
+ember install @fleetbase/storefront-engine
+```
+
+
+## Usage
+
+[Longer description of how to use the addon in apps.]
+
+
+## Contributing
+
+See the [Contributing](CONTRIBUTING.md) guide for details.
+
+
+## License
+
+This project is licensed under the [MIT License](LICENSE.md).

package/addon/adapters/addon-category.js

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

package/addon/adapters/customer.js

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

package/addon/adapters/gateway.js

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

package/addon/adapters/network.js

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

package/addon/adapters/notification-channel.js

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

package/addon/adapters/product-addon-category.js

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

package/addon/adapters/product-addon.js

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

package/addon/adapters/product-hour.js

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

package/addon/adapters/product-store-location.js

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

package/addon/adapters/product-variant-option.js

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

package/addon/adapters/product-variant.js

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

package/addon/adapters/product.js

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

package/addon/adapters/store-hour.js

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

package/addon/adapters/store-location.js

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

package/addon/adapters/store.js

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

package/addon/adapters/storefront.js

@@ -0,0 +1,5 @@
+import ApplicationAdapter from '@fleetbase/ember-core/adapters/application';
+
+export default class StorefrontAdapter extends ApplicationAdapter {
+    namespace = 'storefront/int/v1';
+}

package/addon/components/file-record.hbs

@@ -0,0 +1,22 @@
+<div class="file-record relative" ...attributes>
+    <div class="flex flex-col items-center justify-center">
+        <div class="file-record-icon {{@fileIconClass}} flex items-center justify-center mb-2 rounded-lg shadow-sm border-4 border-transparent dark:border-gray-900" style={{this.fileBackgroundStyle}}>
+            {{#if this.isVideo}}
+                <FaIcon @icon="file-video" @size="3x" class="text-sky-400" />
+            {{/if}}
+        </div>
+        <div class="bg-blue-500 text-gray-100 text-xs text-center rounded-md px-3 py-1 truncate w-32">
+            <span>{{@file.original_filename}}</span>
+        </div>
+        {{#if (has-block)}}
+            <div class="mt-2">
+                {{yield @file}}
+            </div>
+        {{/if}}
+    </div>
+    <div class="absolute top-0 right-0">
+        <a href="javascript:;" {{on "click" (fn this.deleteFile @file)}} class="flex items-center justify-center text-center p-1 -mt-2 rounded-full w-6 h-6 hover:opacity-75 bg-red-400 shadow-md text-xs">
+            <FaIcon @icon="trash" class="text-white" />
+        </a>
+    </div>
+</div>

package/addon/components/file-record.js

@@ -0,0 +1,43 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { alias } from '@ember/object/computed';
+import isVideo from '@fleetbase/ember-core/utils/is-video-file';
+import isImage from '@fleetbase/ember-core/utils/is-image-file';
+
+export default class FileRecordComponent extends Component {
+    @service modalsManager;
+    @alias('args.file') file;
+
+    get isVideo() {
+        return isVideo(this.file.content_type);
+    }
+
+    get isImage() {
+        return isImage(this.file.content_type);
+    }
+
+    get previewUrl() {
+        return this.isImage ? this.file.url : '';
+    }
+
+    get fileBackgroundStyle() {
+        return `background-size: 100% 100%; background-repeat: no-repeat; background-image: url('${this.previewUrl}'); width: 8rem; height: 8rem;`;
+    }
+
+    @action deleteFile(file) {
+        return this.modalsManager.confirm({
+            title: 'Are you sure you wish to delete this file?',
+            body: 'Once you delete this file you will be unable to recover it.',
+            confirm: (modal) => {
+                file.destroyRecord();
+
+                if (typeof this.args.onDelete === 'function') {
+                    this.args.onDelete(file);
+                }
+
+                modal.done();
+            },
+        });
+    }
+}

package/addon/components/modals/add-store-hours.hbs

@@ -0,0 +1,8 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div>
+            <InputGroup @type="time" @name="Start time" @value={{@options.hours.start}} @helpText="When availability/operation start" />
+            <InputGroup @type="time" @name="End time" @value={{@options.hours.end}} @helpText="When availability/operation hours end" />
+        </div>
+    </div>
+</Modal::Default>

package/addon/components/modals/add-stores-to-network.hbs

@@ -0,0 +1,5 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <ComboBox @options={{@options.stores}} @selected={{@options.members}} @optionLabel="name" @comparator="id" @selectionBoxLabel="Selected" @onChange={{@options.updateSelected}} />
+    </div>
+</Modal::Default>

package/addon/components/modals/assign-driver.hbs

@@ -0,0 +1,25 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="sm:flex sm:items-start">
+            <div class="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto bg-red-100 rounded-full sm:mx-0 sm:h-10 sm:w-10">
+                <svg class="w-6 h-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z">
+                    </path>
+                </svg>
+            </div>
+            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                <div class="mb-4">
+                    <p class="text-sm leading-5 text-gray-500 dark:text-white">
+                        Select a driver to assign to this order.
+                    </p>
+                </div>
+                <InputGroup class="mt-4" @name="Select Driver">
+                    <ModelSelect @modelName="driver" @selectedModel={{@options.order.driver_assigned}} @placeholder="Select Driver to Assign" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut
+                        @options.order.driver_assigned)}} as |model|>
+                        {{model.name}}
+                    </ModelSelect>
+                </InputGroup>
+            </div>
+        </div>
+    </div>
+</Modal::Default>

package/addon/components/modals/create-first-store.hbs

@@ -0,0 +1,21 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="flex flex-col items-center justify-center mb-2">
+            <FaIcon @icon="stars" @size="4x" class="text-sky-400" />
+            <div class="my-2 text-center">
+                <h2 class="dark:text-gray-100 font-semibold">Welcome to Storefront!</h2>
+                <p class="my-2 px-6 dark:text-gray-100">
+                    Storefront allows you to quickly setup a headless and dynamic on-demand shop powered by Fleetbase.
+                    Submit the form below to create your first store.
+                </p>
+            </div>
+        </div>
+        <div>
+            <InputGroup @name="Storefront name" @value={{@options.store.name}} @helpText="Enter the name of your store" />
+            <InputGroup @name="Storefront description" @value={{@options.store.description}} @helpText="Give your store a simple brief description on the types of things sold" />
+            <InputGroup @name="Storefront currency" @value={{@options.store.currency}} @helpText="Select the default currency for your storefront">
+                <CurrencySelect @value={{@options.store.currency}} @onSelect={{fn (mut @options.store.currency)}} @triggerClass="w-full form-select" />
+            </InputGroup>
+        </div>
+    </div>
+</Modal::Default>

package/addon/components/modals/create-gateway.hbs

@@ -0,0 +1,35 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="mb-4 w-full">
+            <InputGroup @name="Gateway type" @helpText="Select gateway type">
+                <Select class="w-full" @placeholder="Select gateway type" @options={{@options.schemaOptions}} @onSelect={{@options.selectSchema}} @humanize={{true}} />
+            </InputGroup>
+        </div>
+
+        {{#if @options.schema}}
+            <InputGroup @name="Gateway name" @value={{@options.gateway.name}} @helpText="Give your payment gateway a name, this will only be relevent internally" />
+            <InputGroup @name="Gateway code" @helpText="Identifier code used to identify gateway to the SDK">
+                <KeyInput @name="Gateway code" @value={{@options.gateway.code}} @onChange={{fn (mut @options.gateway.code)}} />
+            </InputGroup>
+            <InputGroup @name="Callback URL" @value={{@options.gateway.callback_url}} @helpText="Callback URL if applicable" />
+            <InputGroup @name="Return URL" @value={{@options.gateway.return_url}} @helpText="Return URL if applicable" />
+            <div class="input-group">
+                <Checkbox @value={{@options.gateway.sandbox}} @label="This is a sandbox gateway" @onToggle={{fn (mut @options.gateway.sandbox)}} />
+            </div>
+            <div class="p-2 rounded-md my-2 border border-gray-200 dark:border-gray-800">
+                <h4 class="mb-2 font-semibold text-sm dark:text-white">Config</h4>
+                {{#each-in @options.schema as |key value|}}
+                    {{#if (is-bool-value value)}}
+                        <div class="input-group">
+                            <Checkbox @value={{value}} @label={{humanize key}} @onToggle={{fn @options.setConfigKey key}} />
+                        </div>
+                    {{else}}
+                        <InputGroup @name={{humanize key}}>
+                            <Input class="form-input w-full" placeholder={{humanize key}} @value={{value}} {{on "blur" (fn @options.setConfigKey key)}} />
+                        </InputGroup>
+                    {{/if}}
+                {{/each-in}}
+            </div>
+        {{/if}}
+    </div>
+</Modal::Default>

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

@@ -0,0 +1,50 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <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">
+            <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)}} />
+                    <span>Upload category icon</span>
+                </div>
+                <div class="flex flex-row items-center ">
+                    <RadioButton @radioClass="focus:ring-blue-500 mr-2" @radioId="svg_icon_type" @value="svg" @groupValue={{@options.iconType}} @name="icon_type" @changed={{fn (mut @options.iconType)}} />
+                    <span>Use svg (<a href="https://fontawesome.com/" target="_fa">FontAwesome</a>) category icon</span>
+                </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={{fn @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>
+                    </a>
+                </div>
+            {{/if}}
+        </InputGroup>
+        <InputGroup>
+            <TranslationsEditor @value={{@options.category.translations}} @defaultKeys={{array "name" "description"}} @onChange={{fn (mut @options.category.translations)}} />
+        </InputGroup>
+    </div>
+</Modal::Default>

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

@@ -0,0 +1,20 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="flex flex-col items-center justify-center mb-2">
+            <FaIcon @icon="network-wired" @size="4x" class="text-sky-400" />
+            <div class="my-2 text-center">
+                <h2 class="dark:text-gray-50 font-semibold">Start a Network</h2>
+                <p class="my-2 px-6 dark:text-gray-100">
+                    Storefront allows you to quickly create marketplaces, enabling multiple storefronts to sell under an umbrella.
+                    When you create the network you defined your rules and you're able to expand your network through invitiations.
+                    Get started by creating a network below.
+                </p>
+            </div>
+        </div>
+        <InputGroup @name="Network name" @value={{@options.network.name}} @helpText="Enter the name of your store" />
+        <InputGroup @name="Network description" @value={{@options.network.description}} @helpText="Give your store a simple brief description on the types of things sold" />
+        <InputGroup @name="Network currency" @value={{@options.network.currency}} @helpText="Select the default currency for your storefront">
+            <CurrencySelect @value={{@options.network.currency}} @onSelect={{fn (mut @options.network.currency)}} @triggerClass="w-full form-select" />
+        </InputGroup>
+    </div>
+</Modal::Default>

package/addon/components/modals/create-new-variant.hbs

@@ -0,0 +1,15 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @name="Variant name" @value={{@options.productVariant.name}} @helpText="Give your product variant a name" />
+        <InputGroup @name="Variant description" @value={{@options.productVariant.description}} @helpText="Short description of the variant" />
+        <div class="input-group mb-2">
+            <Checkbox @value={{@options.productVariant.is_multiselect}} @label="Allow user to select multiple variant options at once" @onToggle={{fn (mut @options.productVariant.is_multiselect)}} />
+        </div>
+        <div class="input-group">
+            <Checkbox @value={{@options.productVariant.is_required}} @label="This product variant selection is required" @onToggle={{fn (mut @options.productVariant.is_required)}} />
+        </div>
+        <InputGroup>
+            <TranslationsEditor @value={{@options.productVariant.translations}} @defaultKeys={{array "name" "description"}} @onChange={{fn (mut @options.productVariant.translations)}} />
+        </InputGroup>
+    </div>
+</Modal::Default>

package/addon/components/modals/create-notification-channel.hbs

@@ -0,0 +1,45 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        {{#unless @options.channel.id}}
+            <div class="mb-4 w-full">
+                <InputGroup @name="Channel" @helpText="Select notification channel">
+                    <Select class="w-full" @placeholder="Select notification channel"
+                        @options={{@options.schemaOptions}} @optionLabel="name" @optionValue="value" @onSelect={{@options.selectSchema}} @humanize={{true}} />
+                </InputGroup>
+            </div>
+        {{/unless}}
+
+        {{#if @options.schema}}
+            <InputGroup @name="Channel name" @value={{@options.channel.name}}
+                @helpText="Give your notification channel a name, this will only be relevent internally" />
+            {{#if @options.channel.id}}
+                <InputGroup @name="Channel Key"
+                    @helpText="This is your notification channel key, use this to specify which apps should utilize this notification channel via sdk configs.">
+                    <ClickToReveal @value={{@options.channel.app_key}} @clickToCopy={{true}}
+                        class="form-input disabled" />
+                </InputGroup>
+            {{/if}}
+            <div class="p-2 rounded-md my-2 border border-gray-800">
+                <h4 class="mb-2 font-semibold text-sm dark:text-white">Config</h4>
+                {{#each-in @options.schema as |key value|}}
+                    {{#if (is-bool-value value)}}
+                        <div class="input-group">
+                            <Checkbox @value={{value}} @label={{humanize key}} @onToggle={{fn @options.setConfigKey
+                                key}} />
+                        </div>
+                    {{else if (or (eq key 'private_key_content') (eq key 'firebase_credentials_json'))}}
+                        <InputGroup @name={{humanize key}}>
+                            <Textarea class="form-input w-full" rows="6" placeholder={{humanize key}} @value={{value}} {{on "blur"
+                                (fn @options.setConfigKey key)}} />
+                        </InputGroup>
+                    {{else}}
+                        <InputGroup @name={{humanize key}}>
+                            <Input class="form-input w-full" placeholder={{humanize key}} @value={{value}} {{on "blur"
+                                (fn @options.setConfigKey key)}} />
+                        </InputGroup>
+                    {{/if}}
+                {{/each-in}}
+            </div>
+        {{/if}}
+    </div>
+</Modal::Default>

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

@@ -0,0 +1,30 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <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 product category a brief description" />
+        <InputGroup @name="Category icon">
+            <div class="flex flex-row">
+                <div class="mr-4">
+                    <Image src={{@options.category.icon_url}} @fallbackSrc={{config "defaultValues.categoryImage"}} alt={{@options.category.name}} height="80" width="80" class="h-20 w-20 rounded-md" />
+                </div>
+                <div class="flex-1">
+                    <FileUpload @name="photos" @accept="image/*" @onFileAdded={{fn @options.uploadNewPhoto}} 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 category icon
+                                </span>
+                            {{/if}}
+                        </a>
+                    </FileUpload>
+                </div>
+            </div>
+        </InputGroup>
+    </div>
+</Modal::Default>

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

@@ -0,0 +1,9 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @name="Storefront name" @value={{@options.store.name}} @helpText="Enter the name of your store" />
+        <InputGroup @name="Storefront description" @value={{@options.store.description}} @helpText="Give your store a simple brief description on the types of things sold" />
+        <InputGroup @name="Storefront currency" @value={{@options.store.currency}} @helpText="Select the default currency for your storefront">
+            <CurrencySelect @value={{@options.store.currency}} @onSelect={{fn (mut @options.store.currency)}} @triggerClass="w-full form-select" />
+        </InputGroup>
+    </div>
+</Modal::Default>

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

@@ -0,0 +1 @@
+{{yield}}

package/addon/components/modals/import-products.hbs

@@ -0,0 +1,97 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container my-5">
+        {{#if @options.isProcessing}}
+            <div class="min-h-56 dropzone w-full rounded px-4 py-8 min-h 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">
+                    <PageLoader class="text-sm dar:text-gray-100" @loadingMessage="Processing import..." />
+                </div>
+            </div>
+        {{else}}
+            <FileDropzone @name="spreadsheets" @multiple={{true}} @onFileAdded={{fn @options.queueFile}} @accept={{join ","
+                @options.acceptedFileTypes}} class="min-h-56 dropzone w-full rounded px-4 py-8 min-h 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" as |dropzone queue|>
+                {{#if dropzone.active}}
+                    {{#if dropzone.valid}}
+                        Drop to upload
+                    {{else}}
+                        Invalid
+                    {{/if}}
+                {{else if queue.files.length}}
+                    <div class="my-2">
+                        <FaIcon @icon="file-spreadsheet" class="text-indigo-500 mr-2" />
+                        {{pluralize queue.files.length "spreadsheet"}} ready for upload.
+                    </div>
+                    <div class="my-2">({{queue.progress}}%)</div>
+                {{else}}
+                    <h4 class="font-semibold mb-8">
+                        <FaIcon @icon="file-spreadsheet" class="text-indigo-500 mr-2" /> Upload Spreadsheets
+                    </h4>
+                    <div>
+                        {{#if dropzone.supported}}
+                            <p class="text-base font-semibold my-5">Drag and drop spreadsheet files onto this dropzone</p>
+                        {{/if}}
+
+                        <FileUpload @name="spreadsheets" @for="spreadsheets" @accept={{join "," @options.acceptedFileTypes}} @multiple={{true}} @onFileAdded={{fn @options.queueFile}}>
+                            <a tabindex=0 class="btn btn-magic cursor-pointer ml-1 hover:text-white">or select spreadsheets to
+                                upload.</a>
+                        </FileUpload>
+                    </div>
+                {{/if}}
+            </FileDropzone>
+
+            {{#if @options.uploadQueue}}
+                <div class="my-6">
+                    <div class="mb-2">
+                        <span class="text-sm leading-5 text-gray-500 dark:text-white">Upload Queue</span>
+                    </div>
+
+                    <div class="table-wrapper">
+                        <table class="table">
+                            <thead>
+                                <tr>
+                                    {{#each @options.fileQueueColumns as |column|}}
+                                        <th>{{column.name}}</th>
+                                    {{/each}}
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {{#each @options.uploadQueue as |file|}}
+                                    <tr>
+                                        {{#each @options.fileQueueColumns as |column|}}
+                                            <td>
+                                                {{#if (eq column.key "delete")}}
+                                                    <a href="javascript:;" {{on "click" (fn @options.removeFile file)}}>
+                                                        <FaIcon @icon="trash" class="text-red-500" />
+                                                    </a>
+                                                {{else if (eq column.key "type")}}
+                                                    <FileIcon @file={{file}} />
+                                                {{else if (eq column.key "fileSize")}}
+                                                    {{format-bytes (get file column.valuePath)}}
+                                                {{else if (eq column.key "uploadDate")}}
+                                                    {{moment-format (get file column.valuePath) "DD MMM YYYY"}}
+                                                {{else}}
+                                                    <span class="w-11/12 truncate d-block">{{get file column.valuePath}}</span>
+                                                {{/if}}
+                                            </td>
+                                        {{/each}}
+                                    </tr>
+                                {{/each}}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                <div class="mt-6">
+                    <div class="mb-2">
+                        <p class="text-sm leading-5 text-gray-500 dark:text-white">
+                            Optionally select a category to import products into
+                        </p>
+                    </div>
+                    <InputGroup @wrapperClass="mb-0" @name="Select Category">
+                        <ModelSelect @modelName="category" @query={{hash for="storefront_product" owner_uuid=@options.store.id}} @selectedModel={{@options.selectedCategory}} @placeholder="Select Category" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @options.selectedCategory)}} as |model|>
+                            {{model.name}}
+                        </ModelSelect>
+                    </InputGroup>
+                </div>
+            {{/if}}
+        {{/if}}
+    </div>
+</Modal::Default>