@fleetbase/storefront-engine 0.2.6 → 0.2.8

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

@@ -12,7 +12,7 @@
         </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>
+                <h5 class="dark:text-gray-100 font-semibold">{{t "storefront.common.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}} />
@@ -24,7 +24,7 @@
         </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>
+                <h5 class="dark:text-gray-100 font-semibold">{{t "storefront.component.modals.incoming-order.assigned"}}</h5>
             </div>
             <div class="flex flex-col px-6 py-2">
                 {{#if @options.order.driver_assigned.id}}
@@ -32,15 +32,25 @@
                         <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 class="font-semibold dark:text-gray-100 text-sm">{{n-a @options.order.driver_assigned.phone (t "storefront.component.modals.incoming-order.no-phone")}}</div>
                         </div>
                     </div>
                 {{else}}
-                    <h5 class="text-red-500 text-sm">No driver assigned</h5>
+                    <h5 class="text-red-500 text-sm">{{t "storefront.component.modals.incoming-order.not-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}} />
+                        <Button
+                            @size="xs"
+                            @type="default"
+                            @icon="steering-wheel"
+                            @text={{if
+                                @options.order.has_driver_assigned
+                                (t "storefront.component.modals.incoming-order.change-driver")
+                                (t "storefront.component.modals.incoming-order.assign-driver")
+                            }}
+                            @onClick={{@options.assignDriver}}
+                        />
                     </div>
                 {{/if}}
             </div>
@@ -49,9 +59,9 @@
             <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>
+                        <h5 class="dark:text-gray-100 font-semibold">{{t "storefront.common.pickup"}}</h5>
                     {{else}}
-                        <h5 class="dark:text-gray-100 font-semibold">Delivery</h5>
+                        <h5 class="dark:text-gray-100 font-semibold">{{t "storefront.common.delivery"}}</h5>
                     {{/if}}
                 </div>
             </div>
@@ -61,7 +71,7 @@
                         <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>
+                                    <span class="text-blue-500 font-semibold text-sm truncate">{{t "storefront.component.modals.incoming-order.pickup-order"}}</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">
@@ -104,8 +114,8 @@
         </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 class="flex-1">
+                    <h5 class="dark:text-gray-100 font-semibold">{{t "storefront.common.customer"}}</h5>
                 </div>
             </div>
             <div class="py-2 px-6">
@@ -124,7 +134,7 @@
                 {{#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>
+                            <span class="text-blue-500 font-semibold text-sm truncate">{{t "storefront.component.modals.incoming-order.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">
@@ -141,7 +151,7 @@
         <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">{{t "storefront.component.modals.incoming-order.tracking"}}</h5>
                     <h5 class="dark:text-gray-100 font-semibold">({{@options.order.tracking}})</h5>
                 </div>
             </div>
@@ -159,12 +169,12 @@
         <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>
+                    <h5 class="dark:text-gray-100 font-semibold">{{t "storefront.component.modals.incoming-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>
+                        <span class="font-semibold text-green-400 text-sm">{{t "storefront.common.cash"}}</span>
                     </div>
                 {{/if}}
             </div>
@@ -209,31 +219,31 @@
             </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">{{t "storefront.component.modals.incoming-order.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">{{t "storefront.component.modals.incoming-order.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">{{t "storefront.component.modals.incoming-order.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">{{t "storefront.component.modals.incoming-order.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">{{t "storefront.common.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>

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

@@ -1,4 +1,4 @@
-<Modal::Default @onOpen={{fn this.fetchCategories @options.store}} @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+s<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>
@@ -7,7 +7,14 @@
                 {{/if}}
             </div>
             <div>
-                <Button @type="magic" @text="New Category" @icon="plus" @iconPrefix="fas" @onClick={{fn this.createCategory @options.store}} @disabled={{this.isLoading}} />
+                <Button
+                    @type="magic"
+                    @text={{t "storefront.component.modals.manage-addons.title"}}
+                    @icon="plus"
+                    @iconPrefix="fas"
+                    @onClick={{fn this.createCategory @options.store}}
+                    @disabled={{this.isLoading}}
+                />
             </div>
         </div>
 
@@ -17,11 +24,24 @@
                     <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" />
+                            <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>
+                            <Button
+                                @text={{t "storefront.component.modals.manage-addons.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">{{t
+                                    "storefront.component.modals.manage-addons.delete"
+                                }}</a>
                         </div>
                     </div>
                     <div class="space-y-2 mb-2">
@@ -29,16 +49,37 @@
                             <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" />
+                                    <Input
+                                        @type="text"
+                                        @value={{addon.name}}
+                                        {{on "blur" (fn this.saveAddon addon)}}
+                                        class="form-input flex-1 w-full"
+                                        placeholder={{t "storefront.component.modals.manage-addons.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" />
+                                    <Input
+                                        @type="text"
+                                        @value={{addon.description}}
+                                        {{on "blur" (fn this.saveAddon addon)}}
+                                        class="form-input w-full"
+                                        placeholder={{t "storefront.component.modals.manage-addons.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}} />
+                                    <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>
+                                    <a href="javascript:;" class="destroy-action opacity-50 hover:opacity-100" {{on "click" (fn this.removeAddon category i)}}>{{t
+                                            "storefront.common.remove"
+                                        }}</a>
                                 </div>
                             </div>
                         {{/each}}

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

@@ -5,6 +5,7 @@ import { action } from '@ember/object';
 
 export default class ModalsManageAddonsComponent extends Component {
     @service store;
+    @service intl;
     @service currentUser;
     @service modalsManager;
     @tracked categories = [];
@@ -39,7 +40,7 @@ export default class ModalsManageAddonsComponent extends Component {
 
     @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!');
+        const result = confirm(this.intl.t('storefront.component.modals.manage-addons.delete-this-addon-category-assosiated-will-lost'));
 
         if (result) {
             this.categories.removeAt(index);
@@ -54,7 +55,7 @@ export default class ModalsManageAddonsComponent extends Component {
 
     @action createCategory(store) {
         const category = this.store.createRecord('addon-category', {
-            name: 'Untitled Addon Category',
+            name: this.intl.t('storefront.component.modals.manage-addons.untitled-addon-category'),
             for: 'storefront_product_addon',
             owner_type: 'storefront:store',
             owner_uuid: store.id,

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

@@ -1,31 +1,42 @@
 <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">
+            <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
+                        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.
+                        {{t "storefront.component.modals.order-ready-assign-driver.driver-dispatch" htmlSafe=true}}
                     </p>
                 </div>
                 <div class="input-group">
-                    <ShortToggle @isToggled={{@options.adhoc}} @onToggle={{fn (mut @options.adhoc)}} @label="Adhoc dispatch to nearby drivers" />
+                    <ShortToggle
+                        @isToggled={{@options.adhoc}}
+                        @onToggle={{fn (mut @options.adhoc)}}
+                        @label={{t "storefront.component.modals.order-ready-assign-driver.adhoc-dispatch-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|>
+                    <InputGroup class="mt-4" @name={{t "storefront.component.modals.order-ready-assign-driver.select-driver"}}>
+                        <ModelSelect
+                            @modelName="driver"
+                            @selectedModel={{@options.driver}}
+                            @placeholder={{t "storefront.component.modals.order-ready-assign-driver.select-driver-to-assign"}}
+                            @triggerClass="form-select form-input"
+                            @infiniteScroll={{false}}
+                            @renderInPlace={{true}}
+                            @onChange={{fn (mut @options.driver)}}
+                            as |model|
+                        >
                             {{model.name}}
                         </ModelSelect>
                     </InputGroup>

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

@@ -1,5 +1,12 @@
 <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}} />
+        <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

@@ -3,9 +3,9 @@
         <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>
+                <h2 class="dark:text-gray-100 font-semibold">{{t "storefront.component.modals.share-network.invite-member"}}</h2>
                 <p class="my-2 px-6">
-                    Grab a shareable invitiation link or send individual invites via email below.
+                    {{t "storefront.component.modals.share-network.email-below"}}
                 </p>
             </div>
         </div>
@@ -13,22 +13,37 @@
         <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.
+                {{t "storefront.component.modals.share-network.invite-network"}}
             </p>
             <div>
-                <TagInput class="form-input" @placeholder="Add emails" @tags={{@options.recipients}} @addTag={{@options.addRecipient}} @removeTagAtIndex={{@options.removeRecipient}} as |tag|>
+                <TagInput
+                    class="form-input"
+                    @placeholder={{t "storefront.component.modals.share-network.add-email"}}
+                    @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="rounded-md border dark:border-fgray-800 dark:bg-gray-800 p-4">
+            <h4 class="dark:text-gray-50 mb-4 font-semibold">{{t "storefront.component.modals.share-network.get-link"}}</h4>
             <div class="input-group mb-0i">
-                <Toggle @isToggled={{@options.network.options.shareable_link_enabled}} @onToggle={{@options.toggleShareableLink}} @label="Enable shareable link" @helpText="Anyone with this link is able to join your network" />
+                <Toggle
+                    @isToggled={{@options.network.options.shareable_link_enabled}}
+                    @onToggle={{@options.toggleShareableLink}}
+                    @label={{t "storefront.component.modals.share-network.enable-shareable-link"}}
+                    @helpText={{t "storefront.component.modals.share-network.anyone-with-this-link-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 px-4 py-2.5 text-sm text-green-400 dark:text-green-300 text-center" @value={{@options.shareableLink}} />
+                <ClickToCopy
+                    class="mt-4 rounded-md border dark:border-gray-900 dark:bg-gray-900 truncate px-4 py-2.5 text-sm text-green-400 dark:text-green-300 text-center"
+                    @value={{@options.shareableLink}}
+                />
             {{/if}}
         </div>
     </div>

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

@@ -2,19 +2,19 @@
     <div class="modal-body-container">
         <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-4 text-xs dark:text-gray-100">
             <div class="field-info-container">
-                <div class="field-name">Name</div>
+                <div class="field-name">{{t "storefront.common.name"}}</div>
                 <div class="field-value">{{n-a @options.store.name}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Description</div>
+                <div class="field-name">{{t "storefront.common.description"}}</div>
                 <div class="field-value">{{n-a @options.store.description}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Tags</div>
+                <div class="field-name">{{t "storefront.common.tag"}}</div>
                 <div class="field-value">{{n-a @options.store.tagsList}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Currency</div>
+                <div class="field-name">{{t "storefront.common.currency"}}</div>
                 <div class="field-value">{{n-a @options.store.currency}}</div>
             </div>
         </div>

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

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

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

@@ -1,30 +1,40 @@
 <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|>
+            <InputGroup @name={{t "storefront.common.name"}} @autocomplete="nope" @value={{@options.place.name}} @wrapperClass="col-span-3" />
+            <InputGroup @name={{t "storefront.common.street-1"}} @value={{@options.place.street1}} @wrapperClass="col-span-3">
+                <AutocompleteInput @value={{@options.place.street1}} @onSelect={{@options.autocomplete}} placeholder={{t "storefront.common.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 @name={{t "storefront.component.modals.store-location-form.street-2"}} @autocomplete="nope" @value={{@options.place.street2}} @wrapperClass="col-span-3" />
+            <InputGroup @name={{t "storefront.common.neighborhood"}} @autocomplete="nope" @value={{@options.place.neighborhood}} />
+            <InputGroup @name={{t "storefront.common.building"}} @autocomplete="nope" @value={{@options.place.building}} />
+            <InputGroup @name={{t "storefront.component.modals.store-location-form.security-access-code"}} @autocomplete="nope" @value={{@options.place.security_access_code}} />
+            <InputGroup @name={{t "storefront.component.modals.store-location-form.postal-code"}} @autocomplete="nope" @value={{@options.place.postal_code}} />
+            <InputGroup @name={{t "storefront.common.city"}} @autocomplete="nope" @value={{@options.place.city}} />
+            <InputGroup @name={{t "storefront.common.state"}} @autocomplete="nope" @value={{@options.place.province}} />
+            <InputGroup @name={{t "storefront.common.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={{t "storefront.common.country"}}
+                />
             </InputGroup>
-            <InputGroup @name="Coordinates" @wrapperClass="col-span-2">
-                <CoordinatesInput @value={{@options.place.location}} @onChange={{@options.updatePlaceCoordinates}} @onGeocode={{@options.autocomplete}} @onInit={{@options.setCoordinatesInput}} />
+            <InputGroup @name={{t "storefront.common.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">
+            <InputGroup @name={{t "storefront.common.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}} />
+            <InputGroup @name={{t "storefront.common.email"}} @autocomplete="nope" @value={{@options.place.email}} />
         </div>
     </div>
 </Modal::Default>

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

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

package/addon/components/schedule-manager.hbs

@@ -4,7 +4,14 @@
             <div class="content-panel-header items-center {{@contentPanelHeaderClass}}">
                 <h4 class="font-semibold text-sm dark:text-gray-100">{{day}}</h4>
                 <div>
-                    <Button @icon="calendar-week" @text="Add Hours" @textClass="truncate text-xs" @size="sm" @onClick={{fn this.addHours @subject day}} class="{{@addHoursButtonClass}}" />
+                    <Button
+                        @icon="calendar-week"
+                        @text={{t "storefront.component.schedule-manager.add-hours"}}
+                        @textClass="truncate text-xs"
+                        @size="sm"
+                        @onClick={{fn this.addHours @subject day}}
+                        class="{{@addHoursButtonClass}}"
+                    />
                 </div>
             </div>
             <div class="content-panel-body {{@contentPanelBodyClass}}">