@fleetbase/storefront-engine 0.0.1

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

@@ -0,0 +1,40 @@
+<Layout::Section::Header @title="All Products" @searchQuery={{this.query}} @onSearch={{perform this.search}} />
+
+<Layout::Section::Body>
+    <div class="h-screen overflow-y-scroll p-6">
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+            {{#each @model as |product|}}
+                <div class="border border-gray-200 bg-white dark:bg-gray-900 dark:text-gray-100 dark:border-gray-700 text-center rounded-md px-2 py-3">
+                    <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">
+                            <LinkTo @route="products.index.index.edit" @model={{product}} class="text-sm">
+                                <FaIcon @icon="pencil" class="mr-1" />
+                                <span class="destroy-action">Edit</span>
+                            </LinkTo>
+                            <a href="javascript:;" class="destroy-action text-sm" {{on "click" (fn this.deleteProduct product)}}>
+                                <FaIcon @icon="trash" class="text-red-500 mr-1" />
+                                <span class="destroy-action">Delete</span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            {{else}}
+                <div>
+                    <h3 class="dark:text-gray-100 text-opacity-75 text-sm">No products</h3>
+                </div>
+            {{/each}}
+        </div>
+    </div>
+</Layout::Section::Body>
+
+<Layout::Section::Footer>
+    <Pagination @meta={{@model.meta}} @currentPage={{this.page}} @onPageChange={{fn (mut this.page)}} />
+</Layout::Section::Footer>
+
+{{outlet}}

package/addon/templates/products/index.hbs

@@ -0,0 +1,22 @@
+<Layout::Section::Header @title="Products">
+    <Button @type="magic" @icon="tags" @text="Manage Addons" class="mr-2 flex-shrink-0" @onClick={{this.manageAddons}} />
+    <Button @type="primary" @icon="plus" @iconPrefix="fas" @text="New" class="mr-2 flex-shrink-0" @onClick={{this.createNewProduct}} @disabled={{not this.category}} @helpText={{unless this.category "Select a category to create a product within"}} />
+    <Button @icon="file-import" @text="Import" class="mr-2" @wrapperClass="hidden lg:flex flex-shrink-0" @onClick={{this.importProducts}} />
+    <Button @icon="long-arrow-up" @iconClass="rotate-icon-45" @wrapperClass="hidden lg:flex flex-shrink-0" @text="Export" />
+</Layout::Section::Header>
+
+<Layout::Section::Body class="section-content flex flex-col lg:flex-row">
+    <AsideItemScroller @title="Product Categories" @resource="category" @items={{@model}} @titleKey="name" @onCreate={{this.createNewProductCategory}} @onInit={{this.setAsideScroller}} @customTopItemComponent="aside-item-scroller/item" @customTopItemText="All Products" @customTopItemOnClick={{this.viewAllProducts}} @customTopItemClass="border-t border-gray-200 dark:border-gray-700" as |category dd|>
+        <a href="javascript:;" class="aside-item-link cursor-pointer flex w-full md:px-6 md:py-5" {{on "click" (fn this.switchCategory category)}}>
+            <div class="flex items-center justify-between">
+                <div>
+                    <h4>{{category.name}}</h4>
+                </div>
+            </div>
+        </a>
+    </AsideItemScroller>
+
+    <div id="productsViewPort" class="w-full h-full">
+        {{outlet}}
+    </div>
+</Layout::Section::Body>

package/addon/templates/settings/api.hbs

@@ -0,0 +1,18 @@
+<SettingsContainer>
+    <form>
+        <div class="space-y-6">
+            <div>
+                <h1 class="text-lg leading-6 font-bold text-gray-900 dark:text-gray-100">
+                    API Settings
+                </h1>
+                <p class="mt-1 text-sm text-gray-500">
+                    Access key for Storefront API & Integrations.
+                </p>
+            </div>
+
+            <InputGroup @name="Store Key" @helpText="This is your store key, use this to enable apps and integrations for your storefront.">
+                <ClickToReveal @value={{@model.key}} @clickToCopy={{true}} class="form-input disabled" />
+            </InputGroup>
+        </div>
+    </form>
+</SettingsContainer>

package/addon/templates/settings/gateways.hbs

@@ -0,0 +1,48 @@
+<SettingsContainer>
+    <form>
+        <div class="space-y-6">
+            <div class="flex justify-between">
+                <div>
+                    <h1 class="text-lg leading-6 font-bold text-gray-900 dark:text-gray-100">
+                        Gateway Settings
+                    </h1>
+                    <p class="mt-1 text-sm text-gray-500">
+                        Add or manage your payment gateway settings here.
+                    </p>
+                </div>
+                <div>
+                    <Button @icon="plus" @iconPrefix="fas" @type="primary" @text="Create new gateway" @onClick={{this.createGateway}} />
+                </div>
+            </div>
+
+            {{#each this.gateways as |gateway|}}
+                <ContentPanel @title={{gateway.name}} @open={{true}} @pad={{true}}>
+                    <InputGroup @name="Gateway name" @value={{gateway.name}} @helpText="Give your payment gateway a name, this will only be relevent internally" />
+                    <InputGroup @name="Gateway code" @value={{gateway.code}} @disabled={{true}} @helpText="Identifier code used to identify gateway to the SDK" />
+                    <InputGroup @name="Callback URL" @value={{gateway.callback_url}} @helpText="Callback URL if applicable" />
+                    <InputGroup @name="Return URL" @value={{gateway.return_url}} @helpText="Return URL if applicable" />
+                    <div class="input-group">
+                        <Checkbox @value={{gateway.sandbox}} @label="This is a sandbox gateway" @onToggle={{fn (mut gateway.sandbox)}} />
+                    </div>
+                    <div>
+                        <h4 class="mb-2 font-semibold text-sm dark:text-white">Config</h4>
+                        {{#each-in gateway.config as |key value|}}
+                            {{#if (is-bool-value value)}}
+                                <div class="input-group">
+                                    <Checkbox @value={{value}} @label={{humanize key}} />
+                                </div>
+                            {{else}}
+                                <InputGroup @name={{humanize key}}>
+                                    <Input class="form-input w-full" placeholder={{humanize key}} @value={{value}} />
+                                </InputGroup>
+                            {{/if}}
+                        {{/each-in}}
+                    </div>
+                    <div>
+                        <Button @size="sm" @type="danger" @icon="trash" @text="Delete payment gateway" @onClick={{fn this.deleteGateway gateway}} />
+                    </div>
+                </ContentPanel>
+            {{/each}}
+        </div>
+    </form>
+</SettingsContainer>

package/addon/templates/settings/index.hbs

@@ -0,0 +1,229 @@
+<SettingsContainer>
+    <form class="h-screen" {{on "submit" this.saveSettings}}>
+        <div class="space-y-4 h-screen">
+            <div>
+                <h1 class="text-lg leading-6 font-bold text-gray-900 dark:text-gray-100">
+                    General Settings
+                </h1>
+                <p class="mt-1 text-sm text-gray-500">
+                    Provide the general settings for your storefront.
+                </p>
+            </div>
+
+            <InputGroup @id="storefront_name_input" @name="Name" @value={{@model.name}} @placeholder="Storefront Name" @helpText="The name of your store." />
+            <InputGroup @name="Description" @value={{@model.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={{@model.tags}} @addTag={{this.addTag}} @removeTagAtIndex={{this.removeTag}} as |tag|>
+                    {{tag}}
+                </TagInput>
+            </InputGroup>
+            <InputGroup @name="Currency">
+                <CurrencySelect @value={{@model.currency}} @onSelect={{fn (mut @model.currency)}} @triggerClass="w-full form-select" />
+            </InputGroup>
+
+            <ContentPanel @title="Contact & Social" @open={{false}} @pad={{true}}>
+                <InputGroup @name="Phone">
+                    <PhoneInput @value={{@model.phone}} @onInput={{fn (mut @model.phone)}} class="form-input w-full" />
+                </InputGroup>
+                <InputGroup @name="Website" @value={{@model.website}} @placeholder="Website" @helpText="Your business website URL." />
+                <InputGroup @name="Facebook" @value={{@model.facebook}} @placeholder="Facebook ID" @helpText="Your business Facebook page ID." />
+                <InputGroup @name="Instagram" @value={{@model.instagram}} @placeholder="Instagram Username" @helpText="Your business Instagram username." />
+                <InputGroup @name="Twitter" @value={{@model.twitter}} @placeholder="Twitter Username" @helpText="Your business Twitter username." />
+            </ContentPanel>
+
+            <ContentPanel @title="Logo & Backdrop" @open={{false}} @pad={{true}}>
+                <InputGroup @name="Logo" @helpText="Logo for your store.">
+                    <div class="flex flex-row items-center">
+                        <img src={{@model.logo_url}} alt={{concat @model.name " logo"}} class="h-20 w-64 border dark:border-gray-900 rounded-md mr-4" />
+                        <FileUpload @name="logo" @accept="image/*" @onFileAdded={{fn this.uploadFile "storefront_logo"}} 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 logo
+                                    </span>
+                                {{/if}}
+                            </a>
+                        </FileUpload>
+                    </div>
+                </InputGroup>
+
+                <InputGroup @name="Backdrop" @helpText="Optional banner or background image for your store.">
+                    <div class="flex flex-row items-center">
+                        <img src={{@model.backdrop_url}} alt={{concat @model.name " backdrop"}} class="h-20 w-64 border dark:border-gray-900 rounded-md mr-4" />
+                        <FileUpload @name="backdrop" @accept="image/*" @onFileAdded={{fn this.uploadFile "storefront_backdrop"}} 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 backdrop
+                                    </span>
+                                {{/if}}
+                            </a>
+                        </FileUpload>
+                    </div>
+                </InputGroup>
+            </ContentPanel>
+
+            <ContentPanel @title="Images & Videos" @open={{false}} @pad={{false}} @panelBodyWrapperClass="px-0 py-4" @panelBodyClass="bg-white dark:bg-gray-800">
+                <div class="p-6">
+                    {{#if this.isUploading}}
+                        <div class="min-h-56 dropzone w-full rounded px-4 py-8 min-h bg-black 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">
+                                <PageLoader class="text-sm dar:text-gray-100" @loadingMessage="Uploading..." />
+                            </div>
+                        </div>
+                    {{else}}
+                        <FileDropzone @name="files" @multiple={{true}} @onFileAdded={{fn this.queueFile}} @accept={{join "," this.acceptedFileTypes}} class="dropzone file-dropzone" 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="photo-video" class="text-indigo-500 mr-2" />
+                                    {{pluralize queue.files.length "file"}}
+                                    ready for upload.
+                                </div>
+                                <div class="my-2">({{queue.progress}}%)</div>
+                            {{else}}
+                                <h4 class="font-semibold mb-8">
+                                    <FaIcon @icon="photo-video" @size="2x" class="text-indigo-500 mr-2" />
+                                    Upload Images & Videos
+                                </h4>
+                                <div>
+                                    {{#if dropzone.supported}}
+                                        <p class="text-base font-semibold my-5">Drag and drop image and video files onto this dropzone</p>
+                                    {{/if}}
+                                    <FileUpload @name="files" @for="files" @accept={{join "," this.acceptedFileTypes}} @multiple={{true}} @onFileAdded={{fn this.queueFile}}>
+                                        <a tabindex={{0}} class="btn btn-magic cursor-pointer ml-1">or select files to upload.</a>
+                                    </FileUpload>
+                                </div>
+                            {{/if}}
+                        </FileDropzone>
+                        {{#if this.uploadQueue}}
+                            <div class="mx-4 my-6">
+                                <div class="flex items-center justify-between mb-4">
+                                    <span class="leading-6 dark:text-gray-100">Upload Queue</span>
+                                </div>
+                                <div class="space-y-2 mb-5">
+                                    {{#each this.uploadQueue as |file|}}
+                                        <div class="flex items-center justify-between bg-green-100 border border-gray-300 dark:border-gray-900 py-2 shadow-sm rounded-lg px-4">
+                                            <div class="text-sm text-green-900">{{file.name}}</div>
+                                            <div class="flex items-center text-sm">
+                                                <Spinner class="text-green-400 mr-2" />
+                                                <span class="font-bold text-green-400">{{round file.progress}}%</span>
+                                            </div>
+                                        </div>
+                                    {{/each}}
+                                </div>
+                            </div>
+                        {{/if}}
+                        <div>
+                            <div class="grid grid-cols-2 md:grid-cols-3 gap-3 mt-6">
+                                {{#each @model.files as |file|}}
+                                    <FileRecord @file={{file}} @onDelete={{this.removeFile}} />
+                                {{/each}}
+                            </div>
+                        </div>
+                    {{/if}}
+                </div>
+            </ContentPanel>
+
+            <ContentPanel @title="Alerts" @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <div>
+                    <p class="dark:text-gray-100 mb-4">Configure who should be alerted for certain events.</p>
+                    <InputGroup @name="New order alert" @wrapperClass="mb-0">
+                        <ModelSelectMultiple @modelName="user" @selectedModel={{@model.alertable.for_new_order}} @placeholder="Select users to alert for new order" @triggerClass="form-select form-input multiple" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn this.makeAlertable "for_new_order"}} as |model|>
+                            {{model.name}}
+                        </ModelSelectMultiple>
+                    </InputGroup>
+                </div>
+            </ContentPanel>
+
+            <div class="store-boolean-settings">
+                <div class="input-group">
+                    <Toggle @isToggled={{@model.online}} @onToggle={{fn (mut @model.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 class="input-group">
+                    <Toggle @isToggled={{@model.options.tax_enabled}} @onToggle={{fn (mut @model.options.tax_enabled)}}>
+                        <FaIcon @icon="percent" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Enable tax</span>
+                    </Toggle>
+                    {{#if @model.options.tax_enabled}}
+                        <InputGroup @wrapperClass="mb-0 mt-2" @type="number" @name="Tax Percentage" @value={{@model.options.tax_percentage}} @placeholder="Tax Percentage" @helpText="The sales tax percentage to apply to orders." />
+                    {{/if}}
+                </div>
+                <div class="input-group">
+                    <Toggle @isToggled={{@model.options.auto_accept_orders}} @onToggle={{fn (mut @model.options.auto_accept_orders)}}>
+                        <FaIcon @icon="robot" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Auto accept incoming orders</span>
+                    </Toggle>
+                </div>
+                <div class="input-group">
+                    <Toggle @isToggled={{@model.options.auto_dispatch}} @onToggle={{fn (mut @model.options.auto_dispatch)}}>
+                        <FaIcon @icon="paper-plane" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Auto dispatch orders</span>
+                    </Toggle>
+                </div>
+                <div class="input-group">
+                    <Toggle @isToggled={{@model.options.require_pod}} @onToggle={{fn (mut @model.options.require_pod)}}>
+                        <FaIcon @icon="signature" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Require proof of delivery</span>
+                    </Toggle>
+                    {{#if @model.options.require_pod}}
+                        <InputGroup @wrapperClass="mb-0 mt-2" @name="Proof of Delivery Method">
+                            <Select @options={{this.podMethods}} @optionValue="value" @optionLabel="name" @value={{@model.pod_method}} @onSelect={{fn (mut @model.pod_method)}} class="w-full" />
+                        </InputGroup>
+                    {{/if}}
+                </div>
+                <div class="input-group">
+                    <Toggle @isToggled={{@model.options.cod_enabled}} @onToggle={{fn (mut @model.options.cod_enabled)}}>
+                        <FaIcon @icon="money-bill-wave" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Enable cash on delivery</span>
+                    </Toggle>
+                </div>
+                <div class="input-group">
+                    <Toggle @isToggled={{@model.options.pickup_enabled}} @onToggle={{fn (mut @model.options.pickup_enabled)}}>
+                        <FaIcon @icon="person-booth" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Enable order pickup</span>
+                    </Toggle>
+                </div>
+                <div class="input-group">
+                    <Toggle @isToggled={{@model.options.tips_enabled}} @onToggle={{fn (mut @model.options.tips_enabled)}}>
+                        <FaIcon @icon="cash-register" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Enable tips</span>
+                    </Toggle>
+                </div>
+                <div class="input-group">
+                    <Toggle @isToggled={{@model.options.delivery_tips_enabled}} @onToggle={{fn (mut @model.options.delivery_tips_enabled)}}>
+                        <FaIcon @icon="face-smile" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Enable delivery tips</span>
+                    </Toggle>
+                </div>
+                {{!-- <div class="input-group">
+                            <Toggle @isToggled={{@model.options.integrated_vendors_enabled}} @onToggle={{fn (mut @model.options.integrated_vendors_enabled)}}>
+                                <FaIcon @icon="truck" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Enable integrated vendors</span>
+                            </Toggle>
+                            {{#if @model.options.integrated_vendors_enabled}}
+                                <InputGroup @name="Select integrated vendors to use" @wrapperClass="mt-2 mb-0">
+                                    <ModelSelectMultiple @modelName="integrated-vendor" @selectedModel={{@model.options.integrated_vendors}} @placeholder="Select integrated vendors to use" @triggerClass="form-select form-input multiple" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @model.options.integrated_vendors)}} as |model|>
+                                        {{model.name}}
+                                    </ModelSelectMultiple>
+                                </InputGroup>
+                            {{/if}}
+                        </div> --}}
+            </div>
+
+            <div class="flex justify-end pb-12">
+                <Button @buttonType="submit" @type="primary" @text="Save Changes" @icon="save" @size="lg" @isLoading={{this.isLoading}} @onClick={{this.saveSettings}} />
+            </div>
+        </div>
+    </form>
+</SettingsContainer>

package/addon/templates/settings/locations.hbs

@@ -0,0 +1,39 @@
+<SettingsContainer>
+    <form>
+        <div class="space-y-6">
+            <div class="flex flex-col md:flex-row justify-between">
+                <div>
+                    <h1 class="text-lg leading-6 font-bold text-gray-900 dark:text-gray-100">
+                        Location Settings
+                    </h1>
+                    <p class="mt-1 text-sm text-gray-500">
+                        Manage your stores operating locations and hours.
+                    </p>
+                </div>
+                <div>
+                    <Button @wrapperClass="flex-shrink-0" @icon="plus" @iconPrefix="fas" @type="primary" @text="Create new location" @onClick={{this.createNewLocation}} />
+                </div>
+            </div>
+
+            {{#each @model as |storeLocation|}}
+                <ContentPanel @title={{storeLocation.name}} @open={{true}} @pad={{true}}>
+                    <div class="flex items-center justify-between mb-4">
+                        <div>
+                            <h4 class="dark:text-gray-100 text-base font-semibold">Manage store hours</h4>
+                        </div>
+                        <div class="flex items-center">
+                            <Button @icon="edit" @text="Edit" @onClick={{fn this.editStoreLocation storeLocation}} @wrapperClass="mr-2" />
+                            <Button @icon="trash" @type="danger" @text="Delete" @onClick={{fn this.removeStoreLocation storeLocation}} />
+                        </div>
+                    </div>
+                    <div class="mb-6 uppercase dark:text-gray-100">
+                        {{storeLocation.address}}
+                    </div>
+                    <div>
+                        <ScheduleManager @subject={{storeLocation}} @subjectKey="store_location_uuid" @hourModelType="store-hour" class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2" />
+                    </div>
+                </ContentPanel>
+            {{/each}}
+        </div>
+    </form>
+</SettingsContainer>

package/addon/templates/settings/notifications.hbs

@@ -0,0 +1,35 @@
+<SettingsContainer>
+    <form>
+        <div class="space-y-6">
+            <div class="flex justify-between">
+                <div class="w-3/4">
+                    <h1 class="text-lg leading-6 font-bold text-gray-900 dark:text-gray-100">
+                        Notification Settings
+                    </h1>
+                    <p class="mt-1 text-sm text-gray-500">
+                        Configure notification channels for your storefront, each notification channel additionally can
+                        have
+                        it's own rules and options.
+                    </p>
+                </div>
+                <div>
+                    <Button @icon="plus" @iconPrefix="fas" @type="primary" @text="New channel" @onClick={{this.createChannel}} />
+                </div>
+            </div>
+
+            <div class="space-y-3">
+                {{#each this.channels as |notificationChannel|}}
+                    <div class="flex px-4 py-2 items-center justify-between shadow-sm rounded-md dark:bg-gray-900 bg-gray-200">
+                        <div>
+                            <span class="dark:text-gray-50">{{notificationChannel.name}}</span>
+                        </div>
+                        <div class="flex items-center">
+                            <Button @size="xs" @type="default" @text="Edit" @wrapperClass="mr-2" @onClick={{fn this.editChannel notificationChannel}} />
+                            <Button @size="xs" @type="danger" @text="Delete" @onClick={{fn this.deleteChannel notificationChannel}} />
+                        </div>
+                    </div>
+                {{/each}}
+            </div>
+        </div>
+    </form>
+</SettingsContainer>

package/addon/templates/settings.hbs

@@ -0,0 +1,30 @@
+<Layout::Section::Header @title="Settings" class="align-items-unset" @actionsWrapperClass="align-items-end-i">
+    <div class="ui-tabs w-full border-b-0i">
+        <nav>
+            <LinkTo @route="settings.index" class="ui-tab">
+                <FaIcon @icon="cog" @prefix="fas" class="mr-1" />
+                <span>General</span>
+            </LinkTo>
+            <LinkTo @route="settings.locations" class="ui-tab">
+                <FaIcon @icon="map-marker-alt" class="mr-1" />
+                <span>Locations</span>
+            </LinkTo>
+            <LinkTo @route="settings.gateways" class="ui-tab">
+                <FaIcon @icon="cash-register" class="mr-1" />
+                <span>Gateways</span>
+            </LinkTo>
+            <LinkTo @route="settings.api" class="ui-tab">
+                <FaIcon @icon="code" class="mr-1" />
+                <span>API</span>
+            </LinkTo>
+            <LinkTo @route="settings.notifications" class="ui-tab">
+                <FaIcon @icon="bells" class="mr-1" />
+                <span>Notifications</span>
+            </LinkTo>
+        </nav>
+    </div>
+</Layout::Section::Header>
+
+<Layout::Section::Body>
+    {{outlet}}
+</Layout::Section::Body>

package/addon/utils/get-gateway-schemas.js

@@ -0,0 +1,34 @@
+export default function getGatewaySchemas() {
+    const schemas = {
+        stripe: {
+            secret_key: '',
+            publishable_key: '',
+            show_postal_code: true,
+            ideal_payment: false,
+            fpx_payment: false,
+        },
+        braintree: {
+            merchant_id: '',
+            public_key: '',
+            private_key: '',
+            tokenization_key: '',
+        },
+        qpay: {
+            username: '',
+            password: '',
+            invoice_id: '',
+        },
+        manual: {
+            public_key: '',
+            private_key: '',
+            key_id: '',
+            key_secret: '',
+            email: '',
+            name: '',
+            details: '',
+            payment_instructions: '',
+        },
+    };
+
+    return schemas;
+}

package/addon/utils/get-notification-schemas.js

@@ -0,0 +1,18 @@
+export default function getNotificationSchemas() {
+    const schemas = {
+        apn: {
+            key_id: '',
+            team_id: '',
+            app_bundle_id: '',
+            private_key_content: '',
+            production: true,
+        },
+        fcm: {
+            firebase_credentials_json: '',
+            firebase_database_url: '',
+            firebase_project_name: '',
+        },
+    };
+
+    return schemas;
+}

package/app/adapters/addon-category.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/adapters/addon-category';

package/app/adapters/gateway.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/adapters/gateway';

package/app/adapters/network.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/adapters/network';

package/app/adapters/notification-channel.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/adapters/notification-channel';

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

@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/adapters/product-addon-category';

package/app/adapters/product-addon.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/adapters/product-addon';

package/app/adapters/product-hour.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/adapters/product-hour';

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

@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/adapters/product-store-location';

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

@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/adapters/product-variant-option';

package/app/adapters/product-variant.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/adapters/product-variant';

package/app/adapters/product.js

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

package/app/adapters/store-hour.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/adapters/store-hour';

package/app/adapters/store-location.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/adapters/store-location';

package/app/adapters/store.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/adapters/store';

package/app/adapters/storefront.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/adapters/storefront';

package/app/components/file-record.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/components/file-record';

package/app/components/modals/add-store-hours.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/components/modals/add-store-hours';

package/app/components/modals/add-stores-to-network.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/components/modals/add-stores-to-network';

package/app/components/modals/assign-driver.js

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

package/app/components/modals/create-first-store.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/components/modals/create-first-store';

package/app/components/modals/create-gateway.js

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

package/app/components/modals/create-network-category.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/components/modals/create-network-category';

package/app/components/modals/create-network.js

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

package/app/components/modals/create-new-variant.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/components/modals/create-new-variant';

package/app/components/modals/create-notification-channel.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/components/modals/create-notification-channel';

package/app/components/modals/create-product-category.js

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

package/app/components/modals/create-store.js

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

package/app/components/modals/edit-network.js

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

package/app/components/modals/import-products.js

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