@fleetbase/storefront-engine 0.0.1

package/addon/components/modals/incoming-order.hbs

@@ -0,0 +1,242 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="mt-4">
+        <div class="py-1">
+            <div class="flex flex-col items-center justify-center">
+                <div class="p-2 rounded-md bg-white">
+                    <img src={{concat "data:image/png;base64," @options.order.tracking_number.qr_code}} class="w-18 h-18" alt={{@options.order.public_id}} />
+                </div>
+                <div class="my-2.5 text-center">
+                    <h2 class="dark:text-gray-100 font-semibold">{{@options.order.public_id}}</h2>
+                </div>
+            </div>
+        </div>
+        <div class="w-full my-2">
+            <div class="flex px-6 py-4 border-t border-b border-gray-100 dark:border-gray-800">
+                <h5 class="dark:text-gray-100 font-semibold">Store</h5>
+            </div>
+            <div class="flex items-start px-6 py-2">
+                <img src={{@options.store.logo_url}} class="w-12 h-12 rounded-md shadow-sm mr-4" alt={{@options.store.name}} />
+                <div>
+                    <h5 class="font-semibold dark:text-white text-base">{{@options.store.name}}</h5>
+                    <DisplayPlace @place={{@options.order.payload.pickup}} @type="store location" @addressClass="text-sm dark:text-gray-100" @noAddressClass="text-sm" />
+                </div>
+            </div>
+        </div>
+        <div class="w-full my-2">
+            <div class="flex px-6 py-4 border-t border-b border-gray-100 dark:border-gray-800">
+                <h5 class="dark:text-gray-100 font-semibold">Driver Assigned</h5>
+            </div>
+            <div class="flex flex-col px-6 py-2">
+                {{#if @options.order.driver_assigned.id}}
+                    <div class="flex items-center">
+                        <img src={{@options.order.driver_assigned.photoUrl}} class="w-12 h-12 rounded-md shadow-sm mr-4" alt={{@options.order.driver_assigned.name}} />
+                        <div>
+                            <h5 class="font-semibold dark:text-white text-base">{{n-a @options.order.driver_assigned.displayName}}</h5>
+                            <div class="font-semibold dark:text-gray-100 text-sm">{{n-a @options.order.driver_assigned.phone "No phone"}}</div>
+                        </div>
+                    </div>
+                {{else}}
+                    <h5 class="text-red-500 text-sm">No driver assigned</h5>
+                {{/if}}
+                {{#if @options.assignDriver}}
+                    <div class="mt-2.5">
+                        <Button @size="xs" @type="default" @icon="steering-wheel" @text={{if @options.order.has_driver_assigned "Change Driver" "Assign Driver"}} @onClick={{@options.assignDriver}} />
+                    </div>
+                {{/if}}
+            </div>
+        </div>
+        <div class="w-full my-2">
+            <div class="flex px-6 py-4 border-t border-b border-gray-100 dark:border-gray-800">
+                <div class="flex-1">
+                    {{#if @options.order.meta.is_pickup}}
+                        <h5 class="dark:text-gray-100 font-semibold">Pickup</h5>
+                    {{else}}
+                        <h5 class="dark:text-gray-100 font-semibold">Delivery</h5>
+                    {{/if}}
+                </div>
+            </div>
+            <div class="py-2 px-6">
+                <div class="flex">
+                    {{#if @options.order.meta.is_pickup}}
+                        <div class="flex-1">
+                            <div class="rounded-md bg-blue-50 mr-4">
+                                <div class="rounded-t-md bg-blue-100 px-3 py-2 mb-3">
+                                    <span class="text-blue-500 font-semibold text-sm truncate">Customer must pickup order from</span>
+                                </div>
+                                <div class="flex flex-row items-center mb-4 pb-4 px-3">
+                                    <div class="flex items-center justify-center rounded-full bg-blue-500 w-8 h-8 mr-3">
+                                        <FaIcon @icon="store-alt" class="text-white" />
+                                    </div>
+                                    <div class="text-xs text-blue-900 truncate">
+                                        <DisplayPlace @place={{@options.order.payload.pickup}} @type="pickup" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    {{else if @options.order.payload.hasWaypoints}}
+                        <RouteList @order={{@options.order}} />
+                    {{else}}
+                        <div class="order-route-list storefront flex-1">
+                            <div class="order-route-stop">
+                                <div class="order-route-stop-index">
+                                    <div class="index-count">
+                                        <FaIcon @prefix="fas" @icon="store-alt" />
+                                    </div>
+                                </div>
+                                <div class="order-route-location dark:text-gray-100">
+                                    <DisplayPlace @place={{@options.order.payload.pickup}} @type="pickup" @addressClass="text-sm dark:text-gray-100" @noAddressClass="text-sm" />
+                                </div>
+                            </div>
+                            <div class="order-route-stop">
+                                <div class="order-route-stop-index">
+                                    <div class="index-count">
+                                        <FaIcon @prefix="fas" @icon="map-marker-alt" />
+                                    </div>
+                                </div>
+                                <div class="order-route-location dark:text-gray-100">
+                                    <DisplayPlace @place={{@options.order.payload.dropoff}} @type="dropoff" @addressClass="text-sm dark:text-gray-100" @noAddressClass="text-sm" />
+                                </div>
+                            </div>
+                        </div>
+                    {{/if}}
+                </div>
+            </div>
+        </div>
+        <div class="w-full my-2 flex flex-col">
+            <div class="flex px-6 py-4 border-t border-b border-gray-100 dark:border-gray-800">
+                <div class="flex-1 ">
+                    <h5 class="dark:text-gray-100 font-semibold">Customer</h5>
+                </div>
+            </div>
+            <div class="py-2 px-6">
+                <div class="mb-4 mt-2 text-sm text-blue-900 dark:text-blue-50">
+                    <div class="flex flex-row">
+                        <div>
+                            <img src={{avatar-url @options.order.customer.photo_url}} class="w-8 h-8 rounded-md shadow-sm mr-2" alt={{@options.order.customer.name}} />
+                        </div>
+                        <div>
+                            <div class="font-bold">{{@options.order.customer.name}}</div>
+                            <div>{{@options.order.customer.email}}</div>
+                            <div>{{@options.order.customer.phone}}</div>
+                        </div>
+                    </div>
+                </div>
+                {{#unless @options.order.meta.is_pickup}}
+                    <div class="rounded-md bg-blue-50">
+                        <div class="rounded-t-md bg-blue-100 px-3 py-2 mb-3">
+                            <span class="text-blue-500 font-semibold text-sm truncate">Customer address</span>
+                        </div>
+                        <div class="flex flex-row items-center mb-4 pb-4 px-3">
+                            <div class="flex items-center justify-center rounded-full bg-blue-500 w-8 h-8 mr-3">
+                                <FaIcon @icon="map-marker-alt" class="text-white" />
+                            </div>
+                            <div class="text-xs text-blue-900 truncate">
+                                <DisplayPlace @place={{@options.order.payload.dropoff}} @type="dropoff" />
+                            </div>
+                        </div>
+                    </div>
+                {{/unless}}
+            </div>
+        </div>
+        <div class="w-full my-2 flex flex-col">
+            <div class="flex px-6 py-4 border-t border-b border-gray-100 dark:border-gray-800">
+                <div class="flex-1 flex-row justify-between items-center">
+                    <h5 class="dark:text-gray-100 font-semibold">Tracking</h5>
+                    <h5 class="dark:text-gray-100 font-semibold">({{@options.order.tracking}})</h5>
+                </div>
+            </div>
+            <div class="py-2 px-6">
+                <div class="flex flex-row items-center justify-center space-x-4">
+                    <div class="p-2 rounded-md bg-white">
+                        <img src={{concat "data:image/png;base64," @options.order.tracking_number.qr_code}} class="w-18 h-18" alt={{@options.order.public_id}} />
+                    </div>
+                    <div class="p-2 rounded-md bg-white">
+                        <img src={{concat "data:image/png;base64," @options.order.tracking_number.barcode}} class="w-40 h-18" alt={{@options.order.public_id}} />
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="w-full my-2">
+            <div class="flex items-center justify-between px-6 py-4 border-t border-b border-gray-100 dark:border-gray-800">
+                <div>
+                    <h5 class="dark:text-gray-100 font-semibold">Order Summary</h5>
+                </div>
+                {{#if @options.order.payload.cod_amount}}
+                    <div>
+                        <FaIcon @icon="money-bill-wave" @size="sm" class="text-green-400 mr-1" />
+                        <span class="font-semibold text-green-400 text-sm">Cash</span>
+                    </div>
+                {{/if}}
+            </div>
+            <div class="flex flex-col space-y-4 p-6 overflow-hidden">
+                {{#each @options.order.payload.entities as |entity|}}
+                    <div class="flex flex-1">
+                        <div class="mr-2">
+                            <div class="flex items-center justify-center w-5 h-5 border border-gray-100 dark:border-blue-400 rounded-md">
+                                <span class="text-blue-400 text-xs">{{entity.meta.quantity}}x</span>
+                            </div>
+                        </div>
+                        <div class="flex-1 flex">
+                            <div class="mr-4">
+                                <img src={{entity.photo_url}} class="w-12 h-12 rounded-md shadow-sm" alt={{entity.name}} />
+                            </div>
+                            <div>
+                                <h4 class="font-semibold dark:text-gray-100 mb-1 text-sm">{{entity.name}}</h4>
+                                <div class="flex flex-wrap truncate w-44">
+                                    <p class="dark:text-gray-50 text-xs truncate">{{entity.description}}</p>
+                                </div>
+                                <div>
+                                    {{#each entity.meta.variants as |variant|}}
+                                        <div>
+                                            <span class="text-xs dark:text-gray-50">{{variant.name}}</span>
+                                        </div>
+                                    {{/each}}
+                                </div>
+                                <div>
+                                    {{#each entity.meta.addons as |addon|}}
+                                        <div>
+                                            <span class="text-xs dark:text-gray-50">+ {{addon.name}}</span>
+                                        </div>
+                                    {{/each}}
+                                </div>
+                            </div>
+                        </div>
+                        <div>
+                            <span class="dark:text-gray-50 text-sm">{{format-currency entity.meta.subtotal entity.currency}}</span>
+                        </div>
+                    </div>
+                {{/each}}
+            </div>
+            <div class="px-6 py-2.5 space-y-2 border-t border-b border-gray-100 dark:border-gray-800">
+                <div class="flex items-center justify-between">
+                    <span class="dark:text-gray-50 text-sm">Subtotal</span>
+                    <span class="dark:text-gray-50 text-sm">{{format-currency @options.order.meta.subtotal @options.order.meta.currency}}</span>
+                </div>
+                {{#unless @options.order.meta.is_pickup}}
+                    <div class="flex items-center justify-between">
+                        <span class="dark:text-gray-50 text-sm">Delivery fee</span>
+                        <span class="dark:text-gray-50 text-sm">{{format-currency @options.order.meta.delivery_fee @options.order.meta.currency}}</span>
+                    </div>
+                {{/unless}}
+                {{#if @options.order.meta.tip}}
+                    <div class="flex items-center justify-between">
+                        <span class="dark:text-gray-50 text-sm">Tip</span>
+                        <span class="dark:text-gray-50 text-sm">{{get-tip-amount @options.order.meta.tip @options.order.meta.subtotal @options.order.meta.currency}}</span>
+                    </div>
+                {{/if}}
+                {{#if @options.order.meta.delivery_tip}}
+                    <div class="flex items-center justify-between">
+                        <span class="dark:text-gray-50 text-sm">Delivery Tip</span>
+                        <span class="dark:text-gray-50 text-sm">{{get-tip-amount @options.order.meta.delivery_tip @options.order.meta.subtotal @options.order.meta.currency}}</span>
+                    </div>
+                {{/if}}
+            </div>
+            <div class="px-6 py-2">
+                <div class="flex items-center justify-between">
+                    <span class="dark:text-gray-50 font-bold text-sm">Total</span>
+                    <span class="dark:text-gray-50 font-bold text-sm">{{format-currency @options.order.meta.total @options.order.meta.currency}}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</Modal::Default>

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

@@ -0,0 +1,50 @@
+<Modal::Default @onOpen={{fn this.fetchCategories @options.store}} @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="flex items-center justify-between mb-4">
+            <div>
+                {{#if this.isLoading}}
+                    <Spinner class="text-sky-400" />
+                {{/if}}
+            </div>
+            <div>
+                <Button @type="magic" @text="New Category" @icon="plus" @iconPrefix="fas" @onClick={{fn this.createCategory @options.store}} @disabled={{this.isLoading}} />
+            </div>
+        </div>
+
+        <div class="space-y-4">
+            {{#each this.categories as |category index|}}
+                <div>
+                    <div class="flex items-center rounded-md shadow-sm px-3 py-2 font-semibold bg-gray-200 dark:bg-gray-800 dark:text-gray-100 mb-2">
+                        <div class="flex-1 flex items-center">
+                            <FaIcon @icon="pencil" class="mr-1 dark:text-gray-100" />
+                            <Input @type="text" @value={{category.name}} {{on "blur" (fn this.saveCategory category)}} class="w-full px-2 m-0 border-none bg-transparent dark:text-gray-100" />
+                        </div>
+                        <div class="flex items-center">
+                            <Button @text="New Addon" @icon="plus" @iconPrefix="fas" @onClick={{fn this.insertNewAddon category}} class="mr-3" />
+                            <a href="javascript:;" {{on "click" (fn this.deleteCategory index)}} class="destroy-action opacity-50 hover:opacity-100 text-sm">Delete Category</a>
+                        </div>
+                    </div>
+                    <div class="space-y-2 mb-2">
+                        {{#each category.addons as |addon i|}}
+                            <div class="grid grid-cols-10 gap-1 px-3 py-2 rounded-md dark:bg-gray-900 bg-gray-200">
+                                <div class="col-span-3 flex items-center">
+                                    <FaIcon @icon="tag" class="text-sky-400 mr-2" />
+                                    <Input @type="text" @value={{addon.name}} {{on "blur" (fn this.saveAddon addon)}} class="form-input flex-1 w-full" placeholder="Addon Name" />
+                                </div>
+                                <div class="col-span-4">
+                                    <Input @type="text" @value={{addon.description}} {{on "blur" (fn this.saveAddon addon)}} class="form-input w-full" placeholder="Addon Description" />
+                                </div>
+                                <div class="col-span-2">
+                                    <MoneyInput class="w-full" @currency={{this.activeStore.currency}} @canSelectCurrency={{false}} @value={{addon.price}} @onFormatCompleted={{fn this.saveAddon addon}} @disabled={{this.isLoading}} />
+                                </div>
+                                <div class="flex items-center justify-center text-center text-sm">
+                                    <a href="javascript:;" class="destroy-action opacity-50 hover:opacity-100" {{on "click" (fn this.removeAddon category i)}}>Remove</a>
+                                </div>
+                            </div>
+                        {{/each}}
+                    </div>
+                </div>
+            {{/each}}
+        </div>
+    </div>
+</Modal::Default>

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

@@ -0,0 +1,86 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { alias } from '@ember/object/computed';
+
+export default class ModalsManageAddonsComponent extends Component {
+    @service store;
+    @service currentUser;
+    @service modalsManager;
+    @tracked categories = [];
+    @tracked isLoading = true;
+
+    @action saveAddon(addon) {
+        this.isLoading = true;
+
+        return addon.save().then(() => {
+            this.isLoading = false;
+        });
+    }
+
+    @action insertNewAddon(category) {
+        const productAddon = this.store.createRecord('product-addon', { category_uuid: category.id });
+        category.addons.pushObject(productAddon);
+    }
+
+    @action removeAddon(category, index) {
+        const addon = category.addons.objectAt(index);
+
+        category.addons.removeAt(index);
+        return addon.destroyRecord();
+    }
+
+    @action saveCategory(category) {
+        this.isLoading = true;
+        return category.save().then(() => {
+            this.isLoading = false;
+        });
+    }
+
+    @action deleteCategory(index) {
+        const category = this.categories.objectAt(index);
+        const result = confirm('Are you sure you wish to delete this addon category? All addons assosciated will be lost!');
+
+        if (result) {
+            this.categories.removeAt(index);
+            return category.destroyRecord();
+        }
+    }
+
+    @action pushCategory(category) {
+        const { categories } = this;
+        categories.pushObject(category);
+    }
+
+    @action createCategory(store) {
+        const category = this.store.createRecord('addon-category', {
+            name: 'Untitled Addon Category',
+            for: 'storefront_product_addon',
+            owner_type: 'storefront:store',
+            owner_uuid: store.id,
+        });
+
+        this.isLoading = true;
+
+        return category.save().then((category) => {
+            this.pushCategory(category);
+            this.isLoading = false;
+        });
+    }
+
+    @action fetchCategories(store) {
+        this.isLoading = true;
+
+        return this.store
+            .query('addon-category', {
+                owner_uuid: store.id,
+            })
+            .then((categories) => {
+                this.categories = categories.toArray();
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+}

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

@@ -0,0 +1,36 @@
+<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">
+                        You are about to set this order as ready and dispatch, use the dropdown below to select a driver
+                        to dispatch to. <br><br>Or optionally you can opt to dispatch order as adhoc which will ping the
+                        order to all nearby drivers to be accepted.
+                    </p>
+                </div>
+                <div class="input-group">
+                    <ShortToggle @isToggled={{@options.adhoc}} @onToggle={{fn (mut @options.adhoc)}} @label="Adhoc dispatch to nearby drivers" />
+                </div>
+                {{#unless @options.adhoc}}
+                    <InputGroup class="mt-4" @name="Select Driver">
+                        <ModelSelect @modelName="driver" @selectedModel={{@options.driver}}
+                            @placeholder="Select Driver to Assign" @triggerClass="form-select form-input"
+                            @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut
+                            @options.driver)}} as |model|>
+                            {{model.name}}
+                        </ModelSelect>
+                    </InputGroup>
+                {{/unless}}
+            </div>
+        </div>
+    </div>
+</Modal::Default>

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

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

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

@@ -0,0 +1,35 @@
+<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="mail-bulk" @size="4x" class="text-sky-400" />
+            <div class="my-2 text-center">
+                <h2 class="dark:text-gray-100 font-semibold">Invite members to your network</h2>
+                <p class="my-2 px-6">
+                    Grab a shareable invitiation link or send individual invites via email below.
+                </p>
+            </div>
+        </div>
+
+        <div class="rounded-md border dark:border-gray-800 dark:bg-gray-800 p-4 mb-5">
+            <h4 class="dark:text-gray-50 font-semibold mb-2">Share with people and organizations</h4>
+            <p class="mb-4 text-sm dark:text-gray-200">
+                Enter the emails of people or organizations you want to send an invite to your network.
+            </p>
+            <div>
+                <TagInput class="form-input" @placeholder="Add emails" @tags={{@options.recipients}} @addTag={{@options.addRecipient}} @removeTagAtIndex={{@options.removeRecipient}} as |tag|>
+                    {{tag}}
+                </TagInput>
+            </div>
+        </div>
+
+        <div class="rounded-md border dark:border-gray-800 dark:bg-gray-800 p-4">
+            <h4 class="dark:text-gray-50 mb-4 font-semibold">Get link</h4>
+            <div class="input-group mb-0">
+                <ShortToggle @isToggled={{@options.network.options.shareable_link_enabled}} @onToggle={{@options.toggleShareableLink}} @label="Enable shareable link" @helpText="Anyone with this link is able to join your network" />
+            </div>
+            {{#if @options.network.options.shareable_link_enabled}}
+                <ClickToCopy class="mt-4 rounded-md border dark:border-gray-900 dark:bg-gray-900 truncate p-4 text-sm text-green-400 dark:text-green-300 text-center" @value={{@options.shareableLink}} />
+            {{/if}}
+        </div>
+    </div>
+</Modal::Default>

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

@@ -0,0 +1,30 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="grid grid-cols-3 gap-1 text-xs dark:text-gray-100">
+            <InputGroup @name="Name" @autocomplete="nope" @value={{@options.place.name}} @wrapperClass="col-span-3" />
+            <InputGroup @name="Street 1" @value={{@options.place.street1}} @wrapperClass="col-span-3">
+                <AutocompleteInput @value={{@options.place.street1}} @onSelect={{@options.autocomplete}} placeholder="Street 1" class="w-full" as |result|>
+                    {{result.address}}
+                </AutocompleteInput>
+            </InputGroup>
+            <InputGroup @name="Street 2" @autocomplete="nope" @value={{@options.place.street2}} @wrapperClass="col-span-3" />
+            <InputGroup @name="Neighborhood" @autocomplete="nope" @value={{@options.place.neighborhood}} />
+            <InputGroup @name="Building" @autocomplete="nope" @value={{@options.place.building}} />
+            <InputGroup @name="Security Access Code" @autocomplete="nope" @value={{@options.place.security_access_code}} />
+            <InputGroup @name="Postal Code" @autocomplete="nope" @value={{@options.place.postal_code}} />
+            <InputGroup @name="City" @autocomplete="nope" @value={{@options.place.city}} />
+            <InputGroup @name="State" @autocomplete="nope" @value={{@options.place.province}} />
+            <InputGroup @name="Country" @wrapperClass="col-span-2">
+                <CountrySelect class="w-full form-input form-select form-datalist" @value={{@options.place.country}} @onChange={{fn (mut @options.place.country)}} placeholder="Country" />
+            </InputGroup>
+            <InputGroup @name="Coordinates" @wrapperClass="col-span-2">
+                <CoordinatesInput @value={{@options.place.location}} @onChange={{@options.updatePlaceCoordinates}} @onGeocode={{@options.autocomplete}} @onInit={{@options.setCoordinatesInput}} />
+            </InputGroup>
+            <div class="col-span-1"></div>
+            <InputGroup @name="Phone">
+                <PhoneInput @value={{@options.place.phone}} @autocomplete="nope" @onInput={{fn (mut @options.place.phone)}} class="form-input w-full" />
+            </InputGroup>
+            <InputGroup @name="Email" @autocomplete="nope" @value={{@options.place.email}} />
+        </div>
+    </div>
+</Modal::Default>

package/addon/components/order-card.hbs

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

package/addon/components/order-card.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class OrderCardComponent extends Component {}

package/addon/components/schedule-manager.hbs

@@ -0,0 +1,22 @@
+<div class="schedule-manager-wrapper" ...attributes>
+    {{#each-in this.schedule as |day hours|}}
+        <div class="content-panel {{@contentPanelClass}} shadow-sm">
+            <div class="content-panel-header items-center {{@contentPanelHeaderClass}}">
+                <h4 class="font-semibold dark:text-gray-100">{{day}}</h4>
+                <div>
+                    <Button @icon="calendar-week" @text="Add Hours" @onClick={{fn this.addHours @subject day}} class="{{@addHoursButtonClass}}" />
+                </div>
+            </div>
+            <div class="content-panel-body {{@contentPanelBodyClass}}">
+                {{#each hours as |hour|}}
+                    <div class="flex items-center justify-between mb-2">
+                        <div class="dark:text-gray-100">{{hour.humanReadableHours}}</div>
+                        <div>
+                            <Button @iconPrefix="fas" @type="danger" @size="xs" @icon="times" @onClick={{fn this.removeHours hour}} class="{{@removeHoursButtonClass}}" />
+                        </div>
+                    </div>
+                {{/each}}
+            </div>
+        </div>
+    {{/each-in}}
+</div>

package/addon/components/schedule-manager.js

@@ -0,0 +1,73 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action, computed } from '@ember/object';
+
+export default class ScheduleManagerComponent extends Component {
+    @service notifications;
+    @service modalsManager;
+    @service store;
+
+    @computed('args.subject.hours.@each.id', 'hours.length') get schedule() {
+        const schedule = {};
+        const week = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+        const { subject } = this.args;
+        const { hours } = subject;
+
+        for (let i = 0; i < week.length; i++) {
+            const day = week.objectAt(i);
+
+            schedule[day] = [];
+        }
+
+        for (let i = 0; i < hours.length; i++) {
+            const hour = hours.objectAt(i);
+
+            schedule[hour.day_of_week].pushObject(hour);
+        }
+
+        return schedule;
+    }
+
+    @computed('args.hourModelType') get hourModelType() {
+        const { hourModelType } = this.args;
+
+        return hourModelType ?? 'store-hour';
+    }
+
+    @action addHours(subject, day) {
+        const { subjectKey } = this.args;
+
+        const hours = this.store.createRecord(this.hourModelType, {
+            [subjectKey]: subject.id,
+            day_of_week: day,
+        });
+
+        this.modalsManager.show('modals/add-store-hours', {
+            title: `Add new hours for ${day}`,
+            acceptButtonText: 'Add hours',
+            acceptButtonIcon: 'save',
+            hours,
+            confirm: (modal) => {
+                modal.startLoading();
+
+                return hours.save().then((hours) => {
+                    subject.hours.pushObject(hours);
+                    this.notifications.success(`New hours added for ${day}`);
+                });
+            },
+        });
+    }
+
+    @action removeHours(hours) {
+        this.modalsManager.confirm({
+            title: 'Are you sure you wish to remove these hours?',
+            body: 'By removing these operation/availability hours, your store or product may become inactive or unavailable according to the updated schedule...',
+            acceptButtonIcon: 'trash',
+            confirm: (modal) => {
+                modal.startLoading();
+
+                return hours.destroyRecord();
+            },
+        });
+    }
+}

package/addon/components/settings-container.hbs

@@ -0,0 +1,7 @@
+<div class="overflow-y-scroll h-screen">
+    <div class="h-screen" {{increase-height-by 2000}}>
+        <main class="h-screen max-w-xl mx-auto pt-10 pb-12 lg:pb-16" ...attributes>
+            {{yield}}
+        </main>
+    </div>
+</div>

package/addon/components/store-selector.hbs

@@ -0,0 +1,21 @@
+{{#if @activeStore}}
+    <DropdownButton @renderInPlace={{true}} @size="xs" @type="primary" @icon="store" @iconSize="sm" @text={{@activeStore.name}} @buttonClass={{concat "w-full " @buttonClass}} @buttonWrapperClass={{concat "w-full " @buttonWrapperClass}} @wrapperClass={{@wrapperClass}} as |dd|>
+        <div class="next-dd-menu py-1">
+            <div class="px-1 overflow-y-scroll" {{set-height "300px"}}>
+                {{#each @stores as |store|}}
+                    <a href="javascript:;" class="next-dd-item" role="menuitem" {{on "click" (dropdown-fn dd this.onSwitchStore store)}}>
+                        {{or store.name "-"}}
+                    </a>
+                {{/each}}
+            </div>
+            <div class="px-1">
+                <div class="next-dd-menu-seperator"></div>
+                <div class="px-1">
+                    <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.onCreateStore)}}>
+                        Create a new storefront
+                    </a>
+                </div>
+            </div>
+        </div>
+    </DropdownButton>
+{{/if}}