@fleetbase/storefront-engine 0.4.0 → 0.4.2

package/addon/styles/storefront-engine.css

@@ -40,12 +40,14 @@
     max-width: 100%;
 }
 
+.status-badge.accepted-status-badge > span,
 .status-badge.pickup-ready-status-badge > span {
     background-color: #166534;
     border: 1px solid #15803d;
     color: #dcfce7;
 }
 
+.status-badge.accepted-status-badge > span svg,
 .status-badge.pickup-ready-status-badge > span svg {
     color: #86efac;
 }
@@ -60,12 +62,16 @@
     color: #fca5a5;
 }
 
+.status-badge.driver-picked-up-status-badge > span,
+.status-badge.driver-enroute-to-store-status-badge > span,
 .status-badge.draft-status-badge > span {
     background-color: #a16207;
     border: 1px solid #a16207;
     color: #fef9c3;
 }
 
+.status-badge.driver-picked-up-status-badge > span svg,
+.status-badge.driver-enroute-to-store-status-badge > span svg,
 .status-badge.draft-status-badge > span svg {
     color: #fef9c3;
 }
@@ -84,3 +90,19 @@ td.network-store-name-column > div > svg {
     height: 0.5rem;
     width: 0.5rem;
 }
+
+.storefront-datepicker .air-datepicker-buttons {
+    animation: slideIn 0.3s ease-out;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 0.5rem;
+    max-height: 235px;
+    overflow-y: auto;
+}
+
+.storefront-datepicker .air-datepicker-buttons .quick-select-btn {
+    display: flex;
+    align-items: center;
+    width: 48%;
+}

package/addon/templates/home.hbs

@@ -2,7 +2,7 @@
 
 <Layout::Section::Body class="space-y-4 h-full overflow-y-scroll" @padded={{true}}>
     <Widget::StorefrontMetrics />
-    <Widget::Orders />
-    <Widget::Customers />
+    <Widget::Orders @wrapperClass="bordered-classic" />
+    <Widget::Customers @wrapperClass="bordered-classic" />
     <Spacer @height="300px" />
 </Layout::Section::Body>

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

@@ -1,5 +1,5 @@
-<div class="space-y-4 px-6 py-4">
-    <ContentPanel @title={{t "storefront.networks.index.network.index.general-network-settings-title"}} @open={{true}} @pad={{true}}>
+<div class="space-y-2">
+    <ContentPanel @title={{t "storefront.networks.index.network.index.general-network-settings-title"}} @open={{true}} @pad={{false}} @wrapperClass="bordered-top">
         <div class="space-y-4">
             <div>
                 <h1 class="text-lg leading-6 font-bold text-gray-900 dark:text-gray-100">
@@ -22,11 +22,24 @@
                 @placeholder={{t "storefront.networks.index.network.index.general-network-settings-form.description-placeholder"}}
                 @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.description-help-text"}}
             />
+
             <InputGroup @name={{t "storefront.networks.index.network.index.general-network-settings-form.currency"}}>
                 <CurrencySelect @currency={{@model.currency}} @onCurrencyChange={{fn (mut @model.currency)}} @triggerClass="w-full form-select" />
             </InputGroup>
 
-            <ContentPanel @title={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.panel-title"}} @open={{false}} @pad={{true}}>
+            <InputGroup @name="Default Order Config" @helpText="Select the order config which will apply to all orders created for this network.">
+                <Select
+                    @value={{@model.order_config_uuid}}
+                    @options={{this.orderConfigs}}
+                    @optionValue="id"
+                    @optionLabel="name"
+                    @onSelect={{fn (mut @model.order_config_uuid)}}
+                    @placeholder="Select default order config"
+                    class="w-full"
+                />
+            </InputGroup>
+
+            <ContentPanel @title={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.panel-title"}} @open={{false}} @pad={{false}} @wrapperClass="bordered-top">
                 <InputGroup @name={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.phone"}}>
                     <PhoneInput @value={{@model.phone}} @onInput={{fn (mut @model.phone)}} class="form-input w-full" />
                 </InputGroup>
@@ -62,7 +75,7 @@
                 />
             </ContentPanel>
 
-            <ContentPanel @title={{t "storefront.networks.index.network.index.general-network-settings-form.logo-backdrop-panel.panel-title"}} @open={{false}} @pad={{true}}>
+            <ContentPanel @title={{t "storefront.networks.index.network.index.general-network-settings-form.logo-backdrop-panel.panel-title"}} @open={{false}} @pad={{false}} @wrapperClass="bordered-top">
                 <InputGroup
                     @name={{t "storefront.networks.index.network.index.general-network-settings-form.logo-backdrop-panel.logo-label"}}
                     @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.logo-backdrop-panel.logo-help-text"}}
@@ -255,7 +268,7 @@
         </div>
     </ContentPanel>
 
-    <ContentPanel @title={{t "storefront.networks.index.network.index.api-panel.panel-title"}} @open={{false}} @pad={{true}}>
+    <ContentPanel @title={{t "storefront.networks.index.network.index.api-panel.panel-title"}} @open={{false}} @pad={{false}} @wrapperClass="bordered-top">
         <div class="space-y-6">
             <div>
                 <h1 class="text-lg leading-6 font-bold text-gray-900 dark:text-gray-100">
@@ -275,7 +288,7 @@
         </div>
     </ContentPanel>
 
-    <ContentPanel @title={{t "storefront.networks.index.network.index.payment-gateways-panel.panel-title"}} @open={{false}} @pad={{true}}>
+    <ContentPanel @title={{t "storefront.networks.index.network.index.payment-gateways-panel.panel-title"}} @open={{false}} @pad={{false}} @wrapperClass="bordered-top">
         <div class="space-y-6">
             <div class="flex justify-between">
                 <div>
@@ -298,7 +311,7 @@
             </div>
 
             {{#each this.gateways as |gateway|}}
-                <ContentPanel @title={{gateway.name}} @open={{true}} @pad={{true}}>
+                <ContentPanel @title={{gateway.name}} @open={{true}} @pad={{false}} @wrapperClass="bordered-top">
                     <InputGroup
                         @name={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.name"}}
                         @value={{gateway.name}}
@@ -355,7 +368,7 @@
         </div>
     </ContentPanel>
 
-    <ContentPanel @title={{t "storefront.networks.index.network.index.notification-channels-panel.panel-title"}} @open={{false}} @pad={{true}}>
+    <ContentPanel @title={{t "storefront.networks.index.network.index.notification-channels-panel.panel-title"}} @open={{false}} @pad={{false}} @wrapperClass="bordered-top">
         <div class="space-y-6">
             <div class="flex justify-between">
                 <div class="w-3/4">

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

@@ -20,7 +20,14 @@
 
 <Layout::Section::Body>
     <div class="flex flex-row items-center space-x-2">
-        <NetworkCategoryPicker @network={{this.network}} @category={{this.category}} @onCreateNewCategory={{this.createNewCategory}} @onSelect={{this.selectCategory}} @onReady={{this.setCategoryPickerContext}} @wrapperClass="w-64 my-4 ml-9" />
+        <NetworkCategoryPicker
+            @network={{this.network}}
+            @category={{this.category}}
+            @onCreateNewCategory={{this.createNewCategory}}
+            @onSelect={{this.selectCategory}}
+            @onReady={{this.setCategoryPickerContext}}
+            @wrapperClass="w-64 my-4 ml-9"
+        />
         {{#if this.categoryModel}}
             <Button @icon="arrow-left" @size="xs" @onClick={{this.categoryPicker.loadParentCategories}} />
             <Button @icon="cog" @text="Edit Category" @size="xs" @onClick={{fn this.editCategory this.categoryModel}} />

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

@@ -7,79 +7,100 @@
         @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}}
-            @permission={{this.abilityPermission}}
-        />
+        <:actions>
+            <Button
+                @icon={{this.overlayActionButtonIcon}}
+                @type="primary"
+                @text={{this.overlayActionButtonTitle}}
+                @onClick={{perform this.saveProduct}}
+                @isLoading={{not this.saveProduct.isIdle}}
+                @permission={{this.abilityPermission}}
+            />
+        </:actions>
     </Overlay::Header>
 
-    <Overlay::Body @increaseInnerBodyHeightBy="0" @wrapperClass="new-order-overlay-body px-4 space-y-4 pt-4">
+    <Overlay::Body>
         {{#let (cannot this.abilityPermission) as |unauthorized|}}
-            <InputGroup @name="Product Name" @value={{this.product.name}} @helpText="Enter your product's name" @disabled={{unauthorized}} />
-            <InputGroup @name="Product Description" @helpText="Enter a description of your product">
-                <Textarea @value={{this.product.description}} class="form-input w-full" placeholder="Enter a description of your product...." disabled={{unauthorized}} rows={{4}} />
-            </InputGroup>
-            <InputGroup @name="Product Status">
-                <Select
-                    class="w-full"
-                    @value={{this.product.status}}
-                    @placeholder="Select product status"
-                    @options={{this.statusOptions}}
-                    @onSelect={{fn (mut this.product.status)}}
-                    @humanize={{true}}
-                />
-            </InputGroup>
-            <InputGroup @name="Product Tags">
-                <TagInput
-                    class="form-input"
-                    @placeholder="Add tags"
-                    @allowSpacesInTags={{true}}
-                    @tags={{this.product.tags}}
-                    @addTag={{this.addTag}}
-                    @removeTagAtIndex={{this.removeTag}}
-                    @disabled={{unauthorized}}
-                    as |tag|
-                >
-                    {{tag}}
-                </TagInput>
-            </InputGroup>
-            <InputGroup @name="Product SKU" @value={{this.product.sku}} @helpText="Enter product SKU if applicable" @disabled={{unauthorized}} />
-            <div class="grid grid-cols-2 gap-2">
-                <InputGroup @name="Price" @helpText="Enter a price users will pay to purchase this product">
-                    <MoneyInput
+            <ContentPanel @title={{t "common.details"}} @open={{true}} @wrapperClass="bordered-top">
+                <InputGroup @name="Product Name" @value={{this.product.name}} @helpText="Enter your product's name" @disabled={{unauthorized}} />
+                <InputGroup @name="Product Description" @helpText="Enter a description of your product">
+                    <Textarea @value={{this.product.description}} class="form-input w-full" placeholder="Enter a description of your product...." disabled={{unauthorized}} rows={{4}} />
+                </InputGroup>
+                <InputGroup @name="Product Category">
+                    <ModelSelect
+                        @modelName="category"
+                        @selectedModel={{this.product.category}}
+                        @query={{hash for="storefront_product" owner_uuid=this.activeStore.id}}
+                        @placeholder="Select Product Category"
+                        @triggerClass="form-select form-input"
+                        @infiniteScroll={{false}}
+                        @renderInPlace={{true}}
+                        @allowClear={{true}}
+                        @onChange={{fn (mut this.product.category)}}
+                        @onChangeId={{fn (mut this.product.category_uuid)}}
+                        as |model|
+                    >
+                        <div class="flex items-center">
+                            <span class="uppercase">
+                                {{model.name}}
+                            </span>
+                        </div>
+                    </ModelSelect>
+                </InputGroup>
+                <InputGroup @name="Product Status">
+                    <Select
                         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)}}
-                        @disabled={{unauthorized}}
+                        @value={{this.product.status}}
+                        @placeholder="Select product status"
+                        @options={{this.statusOptions}}
+                        @onSelect={{fn (mut this.product.status)}}
+                        @humanize={{true}}
                     />
                 </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)}}
+                <InputGroup @name="Product Tags">
+                    <TagInput
+                        class="form-input"
+                        @placeholder="Add tags"
+                        @allowSpacesInTags={{true}}
+                        @tags={{this.product.tags}}
+                        @addTag={{this.addTag}}
+                        @removeTagAtIndex={{this.removeTag}}
                         @disabled={{unauthorized}}
-                    />
+                        as |tag|
+                    >
+                        {{tag}}
+                    </TagInput>
                 </InputGroup>
-            </div>
+                <InputGroup @name="Product SKU" @value={{this.product.sku}} @helpText="Enter product SKU if applicable" @disabled={{unauthorized}} />
+                <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)}}
+                            @disabled={{unauthorized}}
+                        />
+                    </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)}}
+                            @disabled={{unauthorized}}
+                        />
+                    </InputGroup>
+                </div>
+            </ContentPanel>
 
-            <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|}}
+            <ContentPanel @title={{t "common.metadata"}} @open={{true}} @wrapperClass="bordered-top">
+                <div>
+                    <MetadataEditor @value={{this.product.meta}} @onChange={{fn (mut this.product.meta)}} />
+                </div>
+                {{!-- {{#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">
                             <div class="flex justify-between items-center mb-1">
@@ -97,7 +118,7 @@
                             <Input class="w-full form-input" @value={{metaField.value}} placeholder={{metaField.label}} disabled={{unauthorized}} />
                         </div>
                     </div>
-                {{/each}}
+                {{/each}} --}}
             </ContentPanel>
 
             <InputGroup>
@@ -143,11 +164,9 @@
                 </div>
             </div>
 
-            <ContentPanel @title="Variants" @open={{true}} @pad={{false}} @panelBodyWrapperClass="px-0 py-4" @panelBodyClass="bg-white dark:bg-gray-800">
-                <div class="content-panel-body p-4">
-                    <div class="flex items-center justify-end">
-                        <Button @text="New Variant" @icon="plus" @iconPrefix="fas" @onClick={{this.createProductVariant}} @permission="storefront create product-variant" />
-                    </div>
+            <ContentPanel @title="Variants" @open={{true}} @wrapperClass="bordered-top">
+                <div class="flex items-center justify-end">
+                    <Button @text="New Variant" @icon="plus" @iconPrefix="fas" @onClick={{this.createProductVariant}} @permission="storefront create product-variant" />
                 </div>
                 <Tabs class="overlay-content-panel" as |Tab|>
                     {{#each this.product.variants as |variant|}}
@@ -224,78 +243,74 @@
                 </Tabs>
             </ContentPanel>
 
-            <ContentPanel @title="Add-Ons" @open={{true}} @pad={{false}} @panelBodyWrapperClass="px-0 py-4" @panelBodyClass="bg-white dark:bg-gray-800">
-                <div class="px-4">
-                    <div class="flex items-center justify-end mb-3">
-                        <Button
-                            @text="Select Addon Categories"
-                            @icon="plus"
-                            @iconPrefix="fas"
-                            @onClick={{perform this.promptSelectAddonCategories}}
-                            @permission="storefront list product-addon"
-                        />
-                    </div>
-                    <div class="space-y-2">
-                        {{#each this.product.addon_categories as |addonCategory index|}}
-                            <div>
-                                <div class="flex items-center rounded-md shadow-sm px-3 py-2 font-semibold bg-gray-200 dark:bg-gray-900 dark:text-gray-100 mb-2">
-                                    <div class="flex-1 flex items-center">
-                                        <FaIcon @icon="pencil" class="mr-1 dark:text-gray-100" />
-                                        <div class="w-full px-2 m-0 border-none bg-transparent dark:text-gray-100">
-                                            {{addonCategory.name}}
-                                        </div>
-                                    </div>
-                                    <div class="flex items-center">
-                                        <a
-                                            href="javascript:;"
-                                            class="destroy-action opacity-50 hover:opacity-100 text-sm"
-                                            {{on "click" (fn this.removeAddonCategory index)}}
-                                            disabled={{cannot "storefront delete product-addon"}}
-                                        >Remove</a>
+            <ContentPanel @title="Add-Ons" @open={{true}} @wrapperClass="bordered-top">
+                <div class="flex items-center justify-end mb-2">
+                    <Button
+                        @text="Select Addon Categories"
+                        @icon="plus"
+                        @iconPrefix="fas"
+                        @onClick={{perform this.promptSelectAddonCategories}}
+                        @permission="storefront list product-addon"
+                    />
+                </div>
+                <div class="space-y-2">
+                    {{#each this.product.addon_categories as |addonCategory index|}}
+                        <div>
+                            <div class="flex items-center rounded-md shadow-sm px-3 py-2 font-semibold bg-gray-200 dark:bg-gray-900 dark:text-gray-100 mb-2">
+                                <div class="flex-1 flex items-center">
+                                    <FaIcon @icon="pencil" class="mr-1 dark:text-gray-100" />
+                                    <div class="w-full px-2 m-0 border-none bg-transparent dark:text-gray-100">
+                                        {{addonCategory.name}}
                                     </div>
                                 </div>
-                                <div class="space-y-2 mb-2">
-                                    {{#each addonCategory.category.addons as |addon|}}
-                                        <div class="grid grid-cols-10 gap-1 px-3 py-2 rounded-md border border-gray-200 dark:border-gray-900 dark:text-gray-100 dark:bg-gray-800 bg-gray-200">
-                                            <div class="flex items-center">
-                                                <Checkbox
-                                                    @value={{not (in-array addon.id addonCategory.excluded_addons)}}
-                                                    @onToggle={{fn this.excludeAddon index addon}}
-                                                    disabled={{cannot "storefront update product-addon"}}
-                                                />
-                                            </div>
-                                            <div class="col-span-3 flex items-center">
-                                                {{addon.name}}
-                                            </div>
-                                            <div class="col-span-4">
-                                                {{addon.description}}
-                                            </div>
-                                            <div class="col-span-2">
-                                                {{format-currency addon.price this.product.currency}}
-                                            </div>
-                                        </div>
-                                    {{/each}}
+                                <div class="flex items-center">
+                                    <a
+                                        href="javascript:;"
+                                        class="destroy-action opacity-50 hover:opacity-100 text-sm"
+                                        {{on "click" (fn this.removeAddonCategory index)}}
+                                        disabled={{cannot "storefront delete product-addon"}}
+                                    >Remove</a>
                                 </div>
                             </div>
-                        {{/each}}
-                    </div>
+                            <div class="space-y-2 mb-2">
+                                {{#each addonCategory.category.addons as |addon|}}
+                                    <div class="grid grid-cols-10 gap-1 px-3 py-2 rounded-md border border-gray-200 dark:border-gray-900 dark:text-gray-100 dark:bg-gray-800 bg-gray-200">
+                                        <div class="flex items-center">
+                                            <Checkbox
+                                                @value={{not (in-array addon.id addonCategory.excluded_addons)}}
+                                                @onToggle={{fn this.excludeAddon index addon}}
+                                                disabled={{cannot "storefront update product-addon"}}
+                                            />
+                                        </div>
+                                        <div class="col-span-3 flex items-center">
+                                            {{addon.name}}
+                                        </div>
+                                        <div class="col-span-4">
+                                            {{addon.description}}
+                                        </div>
+                                        <div class="col-span-2">
+                                            {{format-currency addon.price this.product.currency}}
+                                        </div>
+                                    </div>
+                                {{/each}}
+                            </div>
+                        </div>
+                    {{/each}}
                 </div>
             </ContentPanel>
 
-            <ContentPanel @title="Availability" @open={{this.product.hours.length}} @pad={{false}} @panelBodyClass="bg-white dark:bg-gray-800">
-                <div class="p-2">
-                    <ScheduleManager
-                        @subject={{this.product}}
-                        @subjectKey="product_uuid"
-                        @hourModelType="product-hour"
-                        @disabled={{unauthorized}}
-                        class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2"
-                    />
-                </div>
+            <ContentPanel @title="Availability" @open={{true}} @wrapperClass="bordered-top">
+                <ScheduleManager
+                    @subject={{this.product}}
+                    @subjectKey="product_uuid"
+                    @hourModelType="product-hour"
+                    @disabled={{unauthorized}}
+                    class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2"
+                />
             </ContentPanel>
 
-            <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">
+            <ContentPanel @title="Images & Videos" @open={{true}} @wrapperClass="bordered-top">
+                <div class="space-y-2">
                     {{#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"
@@ -382,7 +397,7 @@
                 </div>
             </ContentPanel>
 
-            <ContentPanel @title="Youtube Videos" @open={{this.product.youtube_urls.length}} @wrapperClass="mb-12" @panelBodyWrapperClass="p-4" @panelBodyClass="bg-white dark:bg-gray-800">
+            <ContentPanel @title="Youtube Videos" @open={{true}} @wrapperClass="bordered-top">
                 <p class="text-sm">Add YouTube video urls to assosciate with this product or service.</p>
                 <div class="input-group">
                     <ArrayInput @data={{this.product.youtube_urls}} @placeholder="Enter youtube video url" @onDataChanged={{fn (mut this.product.youtube_urls)}} @disabled={{unauthorized}}>

package/addon/templates/settings/gateways.hbs

@@ -38,17 +38,28 @@
                         {{#each-in gateway.config as |key value|}}
                             {{#if (is-bool-value value)}}
                                 <div class="input-group">
-                                    <Checkbox @value={{value}} @label={{humanize key}} />
+                                    <Checkbox @value={{value}} @label={{humanize key}} @disabled={{true}} />
                                 </div>
                             {{else}}
                                 <InputGroup @name={{humanize key}}>
-                                    <Input class="form-input w-full" placeholder={{humanize key}} @value={{value}} />
+                                    <Input
+                                        @type={{if (can "storefront update gateway") "text" "password"}}
+                                        class="form-input w-full"
+                                        placeholder={{humanize key}}
+                                        @value={{value}}
+                                        disabled
+                                    />
                                 </InputGroup>
                             {{/if}}
                         {{/each-in}}
                     </div>
-                    <div>
-                        <Button @size="sm" @type="danger" @icon="trash" @text={{t "storefront.settings.gateways.delete-payment-gateway"}} @onClick={{fn this.deleteGateway gateway}} />
+                    <div class="flex flex-row items-center space-x-2">
+                        {{#if (can "storefront update gateway")}}
+                            <Button @size="sm" @type="primary" @icon="pencil" @text="Edit Gateway" @onClick={{fn this.editGateway gateway}} />
+                        {{/if}}
+                        {{#if (can "storefront delete gateway")}}
+                            <Button @size="sm" @type="danger" @icon="trash" @text={{t "storefront.settings.gateways.delete-payment-gateway"}} @onClick={{fn this.deleteGateway gateway}} />
+                        {{/if}}
                     </div>
                 </ContentPanel>
             {{/each}}

package/addon/templates/settings/index.hbs

@@ -36,10 +36,23 @@
                     {{tag}}
                 </TagInput>
             </InputGroup>
+
             <InputGroup @name={{t "storefront.common.currency"}}>
                 <CurrencySelect @currency={{@model.currency}} @onCurrencyChange={{fn (mut @model.currency)}} @triggerClass="w-full form-select" />
             </InputGroup>
 
+            <InputGroup @name="Default Order Config" @helpText="Select the order config which will apply to all orders created for this store">
+                <Select
+                    @value={{@model.order_config_uuid}}
+                    @options={{this.orderConfigs}}
+                    @optionValue="id"
+                    @optionLabel="name"
+                    @onSelect={{fn (mut @model.order_config_uuid)}}
+                    @placeholder="Select default order config"
+                    class="w-full"
+                />
+            </InputGroup>
+
             <ContentPanel @title={{t "storefront.settings.index.contact-social"}} @open={{false}} @pad={{true}}>
                 <InputGroup @name={{t "storefront.common.phone"}}>
                     <PhoneInput @value={{@model.phone}} @onInput={{fn (mut @model.phone)}} class="form-input w-full" />

package/addon/templates/settings/notifications.hbs

@@ -16,8 +16,8 @@
             </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">
+                {{#each @model as |notificationChannel|}}
+                    <div class="flex px-4 py-2 items-center justify-between shadow-sm rounded-md dark:bg-gray-900 bg-gray-200 border border-gray-200 dark:border-gray-700">
                         <div>
                             <span class="dark:text-gray-50">{{notificationChannel.name}}</span>
                         </div>