@fleetbase/storefront-engine 0.2.7 → 0.2.9

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

@@ -1,34 +1,72 @@
 <div class="space-y-4 px-6 py-4">
-    <ContentPanel @title="General Network Settings" @open={{true}} @pad={{true}}>
+    <ContentPanel @title={{t "storefront.networks.index.network.index.general-network-settings-title"}} @open={{true}} @pad={{true}}>
         <div class="space-y-4">
             <div>
                 <h1 class="text-lg leading-6 font-bold text-gray-900 dark:text-gray-100">
-                    General Network Settings
+                    {{t "storefront.networks.index.network.index.general-network-settings-title"}}
                 </h1>
                 <p class="mt-1 text-sm text-gray-500">
-                    Provide the general settings for your network or marketplace.
+                    {{t "storefront.networks.index.network.index.general-network-settings-subtitle"}}
                 </p>
             </div>
 
-            <InputGroup @name="Name" @value={{@model.name}} @placeholder="Storefront Name" @helpText="The name of your network or marketplace." />
-            <InputGroup @name="Description" @value={{@model.description}} @placeholder="Storefront Description" @helpText="Give your store a brief description to let users know what your network is about." />
-            <InputGroup @name="Currency">
+            <InputGroup
+                @name={{t "storefront.networks.index.network.index.general-network-settings-form.name"}}
+                @value={{@model.name}}
+                @placeholder={{t "storefront.networks.index.network.index.general-network-settings-form.name-placeholder"}}
+                @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.name-help-text"}}
+            />
+            <InputGroup
+                @name={{t "storefront.networks.index.network.index.general-network-settings-form.description"}}
+                @value={{@model.description}}
+                @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 @value={{@model.currency}} @onSelect={{fn (mut @model.currency)}} @triggerClass="w-full form-select" />
             </InputGroup>
 
-            <ContentPanel @title="Contact & Social" @open={{false}} @pad={{true}}>
-                <InputGroup @name="Phone">
+            <ContentPanel @title={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.panel-title"}} @open={{false}} @pad={{true}}>
+                <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>
-                <InputGroup @name="Email" @value={{@model.email}} @placeholder="Email" @helpText="Your business email." />
-                <InputGroup @name="Website" @value={{@model.website}} @placeholder="Website" @helpText="Your business website URL." />
-                <InputGroup @name="Facebook" @value={{@model.facebook}} @placeholder="Facebook ID" @helpText="Your business Facebook page ID." />
-                <InputGroup @name="Instagram" @value={{@model.instagram}} @placeholder="Instagram Username" @helpText="Your business Instagram username." />
-                <InputGroup @name="Twitter" @value={{@model.twitter}} @placeholder="Twitter Username" @helpText="Your business Twitter username." />
+                <InputGroup
+                    @name={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.email"}}
+                    @value={{@model.email}}
+                    @placeholder={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.email"}}
+                    @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.email-help-text"}}
+                />
+                <InputGroup
+                    @name={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.website"}}
+                    @value={{@model.website}}
+                    @placeholder={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.website"}}
+                    @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.website-help-text"}}
+                />
+                <InputGroup
+                    @name={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.facebook"}}
+                    @value={{@model.facebook}}
+                    @placeholder={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.facebook"}}
+                    @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.facebook-help-text"}}
+                />
+                <InputGroup
+                    @name={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.instagram"}}
+                    @value={{@model.instagram}}
+                    @placeholder={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.instagram"}}
+                    @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.instagram-help-text"}}
+                />
+                <InputGroup
+                    @name={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.twitter"}}
+                    @value={{@model.twitter}}
+                    @placeholder={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.twitter"}}
+                    @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.twitter-help-text"}}
+                />
             </ContentPanel>
 
-            <ContentPanel @title="Logo & Backdrop" @open={{false}} @pad={{true}}>
-                <InputGroup @name="Logo" @helpText="Logo for your store.">
+            <ContentPanel @title={{t "storefront.networks.index.network.index.general-network-settings-form.logo-backdrop-panel.panel-title"}} @open={{false}} @pad={{true}}>
+                <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"}}
+                >
                     <div class="flex flex-row items-center">
                         <img src={{@model.logo_url}} alt={{concat @model.name " logo"}} class="h-20 w-64 border dark:border-gray-900 rounded-md mr-4" />
                         <FileUpload @name="logo" @accept="image/*" @onFileAdded={{fn this.uploadFile "storefront_logo"}} as |queue|>
@@ -36,12 +74,12 @@
                                 {{#if queue.files.length}}
                                     <Spinner class="mr-1" />
                                     <span>
-                                        Uploading...
+                                        {{t "storefront.common.uploading"}}
                                     </span>
                                 {{else}}
                                     <FaIcon @icon="image" class="mr-1" />
                                     <span>
-                                        Upload new logo
+                                        {{t "storefront.networks.index.network.index.general-network-settings-form.logo-backdrop-panel.upload-logo-button-text"}}
                                     </span>
                                 {{/if}}
                             </a>
@@ -49,7 +87,10 @@
                     </div>
                 </InputGroup>
 
-                <InputGroup @name="Backdrop" @helpText="Optional banner or background image for your store.">
+                <InputGroup
+                    @name={{t "storefront.networks.index.network.index.general-network-settings-form.logo-backdrop-panel.backdrop-label"}}
+                    @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.logo-backdrop-panel.backdrop-help-text"}}
+                >
                     <div class="flex flex-row items-center">
                         <img src={{@model.backdrop_url}} alt={{concat @model.name " backdrop"}} class="h-20 w-64 border dark:border-gray-900 rounded-md mr-4" />
                         <FileUpload @name="backdrop" @accept="image/*" @onFileAdded={{fn this.uploadFile "storefront_backdrop"}} as |queue|>
@@ -57,12 +98,12 @@
                                 {{#if queue.files.length}}
                                     <Spinner class="mr-1" />
                                     <span>
-                                        Uploading...
+                                        {{t "storefront.common.uploading"}}
                                     </span>
                                 {{else}}
                                     <FaIcon @icon="image" class="mr-1" />
                                     <span>
-                                        Upload new backdrop
+                                        {{t "storefront.networks.index.network.index.general-network-settings-form.logo-backdrop-panel.upload-backdrop-button-text"}}
                                     </span>
                                 {{/if}}
                             </a>
@@ -71,11 +112,25 @@
                 </InputGroup>
             </ContentPanel>
 
-            <ContentPanel @title="Alerts" @open={{false}} @pad={{true}} @panelBodyClass="bg-gray-800">
+            <ContentPanel
+                @title={{t "storefront.networks.index.network.index.general-network-settings-form.alert-panel.panel-title"}}
+                @open={{false}}
+                @pad={{true}}
+                @panelBodyClass="bg-gray-800"
+            >
                 <div>
-                    <p class="dark:text-gray-100 mb-4">Configure who should be alerted for certain events.</p>
-                    <InputGroup @name="New order alert" @wrapperClass="mb-0">
-                        <ModelSelectMultiple @modelName="user" @selectedModel={{@model.alertable.for_new_order}} @placeholder="Select users to alert for new order" @triggerClass="form-select form-input multiple" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn this.makeAlertable "for_new_order"}} as |model|>
+                    <p class="dark:text-gray-100 mb-4">{{t "storefront.networks.index.network.index.general-network-settings-form.alert-panel.panel-description"}}</p>
+                    <InputGroup @name={{t "storefront.networks.index.network.index.general-network-settings-form.alert-panel.new-order-alert-label"}} @wrapperClass="mb-0">
+                        <ModelSelectMultiple
+                            @modelName="user"
+                            @selectedModel={{@model.alertable.for_new_order}}
+                            @placeholder={{t "storefront.networks.index.network.index.general-network-settings-form.alert-panel.new-order-alert-placeholder"}}
+                            @triggerClass="form-select form-input multiple"
+                            @infiniteScroll={{false}}
+                            @renderInPlace={{true}}
+                            @onChange={{fn this.makeAlertable "for_new_order"}}
+                            as |model|
+                        >
                             {{model.name}}
                         </ModelSelectMultiple>
                     </InputGroup>
@@ -85,119 +140,192 @@
             <div class="store-boolean-settings">
                 <div class="input-group">
                     <Toggle @isToggled={{@model.online}} @onToggle={{fn (mut @model.online)}}>
-                        <FaIcon @icon="plug" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Online</span>
+                        <FaIcon @icon="plug" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
+                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.online"
+                            }}</span>
                     </Toggle>
                 </div>
                 <div class="input-group">
                     <Toggle @isToggled={{@model.options.tax_enabled}} @onToggle={{fn (mut @model.options.tax_enabled)}}>
-                        <FaIcon @icon="percent" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Enable tax</span>
+                        <FaIcon @icon="percent" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
+                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.enable-tax"
+                            }}</span>
                     </Toggle>
                     {{#if @model.options.tax_enabled}}
-                        <InputGroup @wrapperClass="mb-0 mt-2" @type="number" @name="Tax Percentage" @value={{@model.options.tax_percentage}} @placeholder="Tax Percentage" @helpText="The sales tax percentage to apply to orders." />
+                        <InputGroup
+                            @wrapperClass="mb-0 mt-2"
+                            @type="number"
+                            @name={{t "storefront.networks.index.network.index.general-network-settings-form.config-switches.tax-percentage-input-label"}}
+                            @value={{@model.options.tax_percentage}}
+                            @placeholder={{t "storefront.networks.index.network.index.placeholder-tax"}}
+                            @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.config-switches.tax-percentage-input-help-text"}}
+                        />
                     {{/if}}
                 </div>
                 <div class="input-group">
                     <Toggle @isToggled={{@model.options.auto_accept_orders}} @onToggle={{fn (mut @model.options.auto_accept_orders)}}>
-                        <FaIcon @icon="robot" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Auto accept incoming orders</span>
+                        <FaIcon @icon="robot" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
+                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.auto-accept-incoming-orders"
+                            }}</span>
                     </Toggle>
                 </div>
                 <div class="input-group">
                     <Toggle @isToggled={{@model.options.auto_dispatch}} @onToggle={{fn (mut @model.options.auto_dispatch)}}>
-                        <FaIcon @icon="paper-plane" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Auto dispatch orders</span>
+                        <FaIcon @icon="paper-plane" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
+                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.auto-dispatch-orders"
+                            }}</span>
                     </Toggle>
                 </div>
                 <div class="input-group">
                     <Toggle @isToggled={{@model.options.require_pod}} @onToggle={{fn (mut @model.options.require_pod)}}>
-                        <FaIcon @icon="signature" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Require proof of delivery</span>
+                        <FaIcon @icon="signature" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
+                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.require-proof-of-delivery"
+                            }}</span>
                     </Toggle>
                     {{#if @model.options.require_pod}}
-                        <InputGroup @wrapperClass="mb-0 mt-2" @name="Proof of Delivery Method">
-                            <Select @options={{this.podMethods}} @optionValue="value" @optionLabel="name" @value={{@model.pod_method}} @onSelect={{fn (mut @model.pod_method)}} class="w-full" />
+                        <InputGroup @wrapperClass="mb-0 mt-2" @name={{t "storefront.networks.index.network.index.general-network-settings-form.config-switches.proof-of-delivery-method"}}>
+                            <Select
+                                @options={{this.podMethods}}
+                                @optionValue="value"
+                                @optionLabel="name"
+                                @value={{@model.pod_method}}
+                                @onSelect={{fn (mut @model.pod_method)}}
+                                class="w-full"
+                            />
                         </InputGroup>
                     {{/if}}
                 </div>
                 <div class="input-group">
                     <Toggle @isToggled={{@model.options.cod_enabled}} @onToggle={{fn (mut @model.options.cod_enabled)}}>
-                        <FaIcon @icon="money-bill-wave" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Enable cash on delivery</span>
+                        <FaIcon @icon="money-bill-wave" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
+                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.enable-cash-on-delivery"
+                            }}</span>
                     </Toggle>
                 </div>
                 <div class="input-group">
                     <Toggle @isToggled={{@model.options.pickup_enabled}} @onToggle={{fn (mut @model.options.pickup_enabled)}}>
-                        <FaIcon @icon="person-booth" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Enable order pickup</span>
+                        <FaIcon @icon="person-booth" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
+                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.enable-order-pickup"
+                            }}</span>
                     </Toggle>
                 </div>
                 <div class="input-group">
                     <Toggle @isToggled={{@model.options.tips_enabled}} @onToggle={{fn (mut @model.options.tips_enabled)}}>
-                        <FaIcon @icon="cash-register" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Enable tips</span>
+                        <FaIcon @icon="cash-register" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
+                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.enable-tips"
+                            }}</span>
                     </Toggle>
                 </div>
                 <div class="input-group">
                     <Toggle @isToggled={{@model.options.delivery_tips_enabled}} @onToggle={{fn (mut @model.options.delivery_tips_enabled)}}>
-                        <FaIcon @icon="face-smile" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Enable delivery tips</span>
+                        <FaIcon @icon="face-smile" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
+                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.enable-delivery-tips"
+                            }}</span>
                     </Toggle>
                 </div>
                 <div class="input-group">
                     <Toggle @isToggled={{@model.options.multi_cart_enabled}} @onToggle={{fn (mut @model.options.multi_cart_enabled)}}>
-                        <FaIcon @icon="gifts" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Enable multi-cart checkout</span>
+                        <FaIcon @icon="gifts" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
+                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.enable-multi-cart-checkout"
+                            }}</span>
                     </Toggle>
                 </div>
                 <div class="input-group">
                     <Toggle @isToggled={{@model.options.reviews_enabled}} @onToggle={{fn (mut @model.options.reviews_enabled)}}>
-                        <FaIcon @icon="star" @prefix="fas" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Enable user reviews</span>
+                        <FaIcon @icon="star" @prefix="fas" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
+                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.enable-user-reviews"
+                            }}</span>
                     </Toggle>
                 </div>
             </div>
 
             <div class="flex justify-end">
-                <Button @type="primary" @text="Save Changes" @icon="save" @size="lg" @isLoading={{this.isLoading}} @onClick={{this.saveSettings}} />
+                <Button
+                    @type="primary"
+                    @text={{t "storefront.networks.index.network.index.general-network-settings-form.save-changes-button-text"}}
+                    @icon="save"
+                    @size="lg"
+                    @isLoading={{this.isLoading}}
+                    @onClick={{this.saveSettings}}
+                />
             </div>
         </div>
     </ContentPanel>
 
-    <ContentPanel @title="API" @open={{false}} @pad={{true}}>
+    <ContentPanel @title={{t "storefront.networks.index.network.index.api-panel.panel-title"}} @open={{false}} @pad={{true}}>
         <div class="space-y-6">
             <div>
                 <h1 class="text-lg leading-6 font-bold text-gray-900 dark:text-gray-100">
-                    API Settings
+                    {{t "storefront.networks.index.network.index.api-panel.panel-header"}}
                 </h1>
                 <p class="mt-1 text-sm text-gray-500">
-                    Access key for Storefront API & Integrations.
+                    {{t "storefront.networks.index.network.index.api-panel.panel-description"}}
                 </p>
             </div>
 
-            <InputGroup @name="Network Key" @helpText="This is your network key, use this to enable apps and integrations for your network.">
+            <InputGroup
+                @name={{t "storefront.networks.index.network.index.api-panel.network-key-label"}}
+                @helpText={{t "storefront.networks.index.network.index.api-panel.network-key-help-text"}}
+            >
                 <ClickToReveal @value={{@model.key}} @clickToCopy={{true}} class="form-input disabled" />
             </InputGroup>
         </div>
     </ContentPanel>
 
-    <ContentPanel @title="Payment Gateways" @open={{false}} @pad={{true}}>
+    <ContentPanel @title={{t "storefront.networks.index.network.index.payment-gateways-panel.panel-title"}} @open={{false}} @pad={{true}}>
         <div class="space-y-6">
             <div class="flex justify-between">
                 <div>
                     <h1 class="text-lg leading-6 font-bold text-gray-900 dark:text-gray-100">
-                        Gateway Settings
+                        {{t "storefront.networks.index.network.index.payment-gateways-panel.panel-title"}}
                     </h1>
                     <p class="mt-1 text-sm text-gray-500">
-                        Add or manage your payment gateway settings here.
+                        {{t "storefront.networks.index.network.index.payment-gateways-panel.panel-description"}}
                     </p>
                 </div>
                 <div>
-                    <Button @icon="plus" @iconPrefix="fas" @type="primary" @text="Create new gateway" @onClick={{this.createGateway}} />
+                    <Button
+                        @icon="plus"
+                        @iconPrefix="fas"
+                        @type="primary"
+                        @text={{t "storefront.networks.index.network.index.payment-gateways-panel.new-gateway-button-text"}}
+                        @onClick={{this.createGateway}}
+                    />
                 </div>
             </div>
 
             {{#each this.gateways as |gateway|}}
                 <ContentPanel @title={{gateway.name}} @open={{true}} @pad={{true}}>
-                    <InputGroup @name="Gateway name" @value={{gateway.name}} @helpText="Give your payment gateway a name, this will only be relevent internally" />
-                    <InputGroup @name="Gateway code" @value={{gateway.code}} @disabled={{true}} @helpText="Identifier code used to identify gateway to the SDK" />
-                    <InputGroup @name="Callback URL" @value={{gateway.callback_url}} @helpText="Callback URL if applicable" />
-                    <InputGroup @name="Return URL" @value={{gateway.return_url}} @helpText="Return URL if applicable" />
+                    <InputGroup
+                        @name={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.name"}}
+                        @value={{gateway.name}}
+                        @helpText={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.name-help-text"}}
+                    />
+                    <InputGroup
+                        @name={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.code"}}
+                        @value={{gateway.code}}
+                        @disabled={{true}}
+                        @helpText={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.code-help-text"}}
+                    />
+                    <InputGroup
+                        @name={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.callback-url"}}
+                        @value={{gateway.callback_url}}
+                        @helpText={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.callback-url-help-text"}}
+                    />
+                    <InputGroup
+                        @name={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.return-url"}}
+                        @value={{gateway.return_url}}
+                        @helpText={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.return-url-help-text"}}
+                    />
                     <div class="input-group">
-                        <Checkbox @value={{gateway.sandbox}} @label="This is a sandbox gateway" @onToggle={{fn (mut gateway.sandbox)}} />
+                        <Checkbox
+                            @value={{gateway.sandbox}}
+                            @label={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.sandbox-toggle-label"}}
+                            @onToggle={{fn (mut gateway.sandbox)}}
+                        />
                     </div>
                     <div>
-                        <h4 class="mb-2 font-semibold text-sm dark:text-white">Config</h4>
+                        <h4 class="mb-2 font-semibold text-sm dark:text-white">{{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.config-header-label"}}</h4>
                         {{#each-in gateway.config as |key value|}}
                             {{#if (is-bool-value value)}}
                                 <div class="input-group">
@@ -211,28 +339,38 @@
                         {{/each-in}}
                     </div>
                     <div>
-                        <Button @size="sm" @type="danger" @icon="trash" @text="Delete payment gateway" @onClick={{fn this.deleteGateway gateway}} />
+                        <Button
+                            @size="sm"
+                            @type="danger"
+                            @icon="trash"
+                            @text={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.delete-gateway-button-text"}}
+                            @onClick={{fn this.deleteGateway gateway}}
+                        />
                     </div>
                 </ContentPanel>
             {{/each}}
         </div>
     </ContentPanel>
 
-    <ContentPanel @title="Notification Channels" @open={{false}} @pad={{true}}>
+    <ContentPanel @title={{t "storefront.networks.index.network.index.notification-channels-panel.panel-title"}} @open={{false}} @pad={{true}}>
         <div class="space-y-6">
             <div class="flex justify-between">
                 <div class="w-3/4">
                     <h1 class="text-lg leading-6 font-bold text-gray-900 dark:text-gray-100">
-                        Notification Settings
+                        {{t "storefront.networks.index.network.index.notification-channels-panel.panel-header"}}
                     </h1>
                     <p class="mt-1 text-sm text-gray-500">
-                        Configure notification channels for your storefront, each notification channel additionally can
-                        have
-                        it's own rules and options.
+                        {{t "storefront.networks.index.network.index.notification-channels-panel.panel-description"}}
                     </p>
                 </div>
                 <div>
-                    <Button @icon="plus" @iconPrefix="fas" @type="primary" @text="New channel" @onClick={{this.createChannel}} />
+                    <Button
+                        @icon="plus"
+                        @iconPrefix="fas"
+                        @type="primary"
+                        @text={{t "storefront.networks.index.network.index.notification-channels-panel.new-channel-button-text"}}
+                        @onClick={{this.createChannel}}
+                    />
                 </div>
             </div>
 
@@ -243,8 +381,8 @@
                             <span class="dark:text-gray-50">{{notificationChannel.name}}</span>
                         </div>
                         <div class="flex items-center">
-                            <Button @size="xs" @type="default" @text="Edit" @wrapperClass="mr-2" @onClick={{fn this.editChannel notificationChannel}} />
-                            <Button @size="xs" @type="danger" @text="Delete" @onClick={{fn this.deleteChannel notificationChannel}} />
+                            <Button @size="xs" @type="default" @text={{t "storefront.common.edit"}} @wrapperClass="mr-2" @onClick={{fn this.editChannel notificationChannel}} />
+                            <Button @size="xs" @type="danger" @text={{t "storefront.common.delete"}} @onClick={{fn this.deleteChannel notificationChannel}} />
                         </div>
                     </div>
                 {{/each}}

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

@@ -1,2 +1 @@
-
 {{outlet}}

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

@@ -1,6 +1,21 @@
-<Layout::Section::Header @title="Stores" @searchQuery={{this.storeQuery}} @onSearch={{perform this.search}}>
-    <Button @type="primary" @icon="plus" @text="Add Stores" @textClass="truncate" @size="sm" @onClick={{this.addStores}} @wrapperClass="mr-2" />
-    <Button @type="primary" @icon="envelope-open-text" @textClass="truncate" @size="sm" @text="Invite Stores" @onClick={{this.invite}} />
+<Layout::Section::Header @title={{t "storefront.networks.index.network.stores.store"}} @searchQuery={{this.storeQuery}} @onSearch={{perform this.search}}>
+    <Button
+        @type="primary"
+        @icon="plus"
+        @text={{t "storefront.networks.index.network.stores.add-stores-button-text"}}
+        @textClass="truncate"
+        @size="sm"
+        @onClick={{this.addStores}}
+        @wrapperClass="mr-2"
+    />
+    <Button
+        @type="primary"
+        @icon="envelope-open-text"
+        @textClass="truncate"
+        @size="sm"
+        @text={{t "storefront.networks.index.network.stores.invite-stores-button-text"}}
+        @onClick={{this.invite}}
+    />
 </Layout::Section::Header>
 
 <Layout::Section::Body>

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

@@ -1,5 +1,5 @@
 <Overlay @position="right" @isResizable={{true}} @noBackdrop={{true}} @width="570px" @minResizeWidth={{570}} @fullHeight={{true}}>
-    <Overlay::Header @title="Manage Network" @onPressCancel={{this.transitionBack}} />
+    <Overlay::Header @title={{t "storefront.networks.index.network.manage-network"}} @onPressCancel={{this.transitionBack}} />
     <Overlay::Body class="p-0i" @increaseInnerBodyHeightBy="0" @wrapperClass="space-y-4 pt-4">
         <div class="flex flex-col">
             <div class="px-4 flex items-center section-header-title mb-4">
@@ -13,19 +13,19 @@
                     <nav>
                         <LinkTo @route="networks.index.network.index" class="ui-tab">
                             <FaIcon @icon="cogs" class="mr-2" />
-                            <span>Settings</span>
+                            <span>{{t "storefront.networks.index.network.settings"}}</span>
                         </LinkTo>
                         <LinkTo @route="networks.index.network.stores" class="ui-tab">
                             <FaIcon @icon="store" class="mr-2" />
-                            <span>Stores</span>
+                            <span>{{t "storefront.networks.index.network.stores.store"}}</span>
                         </LinkTo>
                         <LinkTo @route="networks.index.network.orders" class="ui-tab">
                             <FaIcon @icon="file-invoice-dollar" class="mr-2" />
-                            <span>Orders</span>
+                            <span>{{t "storefront.networks.index.network.orders"}}</span>
                         </LinkTo>
                         <LinkTo @route="networks.index.network.customers" class="ui-tab">
                             <FaIcon @icon="users" class="mr-2" />
-                            <span>Customers</span>
+                            <span>{{t "storefront.networks.index.network.customers"}}</span>
                         </LinkTo>
                     </nav>
                 </div>

package/addon/templates/networks/index.hbs

@@ -1,5 +1,5 @@
-<Layout::Section::Header @title="Networks" @searchQuery={{this.query}} @onSearch={{perform this.search}}>
-    <Button @type="primary" @icon="plus" @iconPrefix="fas" @text="New" class="mr-2" @onClick={{this.createNetwork}} />
+<Layout::Section::Header @title={{t "storefront.common.network"}} @searchQuery={{this.query}} @onSearch={{perform this.search}}>
+    <Button @type="primary" @icon="plus" @iconPrefix="fas" @text={{t "storefront.common.new"}} class="mr-2" @onClick={{this.createNetwork}} />
 </Layout::Section::Header>
 
 <Layout::Section::Body>
@@ -21,7 +21,7 @@
                                         <div role="menu" class="next-dd-menu" aria-orientation="vertical" aria-labelledby="user-menu">
                                             <div class="px-1">
                                                 <div class="next-dd-title">
-                                                    Network Options
+                                                    {{t "storefront.networks.index.network-option"}}
                                                 </div>
                                             </div>
                                             <div class="next-dd-menu-seperator"></div>
@@ -30,19 +30,24 @@
                                                     <div class="w-7">
                                                         <FaIcon @icon="network-wired" class="mr-2" />
                                                     </div>
-                                                    <span>Manage Network</span>
+                                                    <span>{{t "storefront.networks.index.manage-network"}}</span>
                                                 </a>
                                                 <a href="javascript:;" class="next-dd-item" role="menuitem" {{on "click" (dropdown-fn dd this.sendInvites network)}}>
                                                     <div class="w-7">
                                                         <FaIcon @icon="envelope-open-text" class="mr-2" />
                                                     </div>
-                                                    <span>Send Invites</span>
+                                                    <span>{{t "storefront.networks.index.send-invite"}}</span>
                                                 </a>
-                                                <a href="javascript:;" class="next-dd-item text-red-500 hover:bg-opacity-75" role="menuitem" {{on "click" (dropdown-fn dd this.deleteNetwork network)}}>
+                                                <a
+                                                    href="javascript:;"
+                                                    class="next-dd-item text-red-500 hover:bg-opacity-75"
+                                                    role="menuitem"
+                                                    {{on "click" (dropdown-fn dd this.deleteNetwork network)}}
+                                                >
                                                     <div class="w-7">
                                                         <FaIcon @icon="trash" class="mr-2 text-red-500" />
                                                     </div>
-                                                    <span class="text-red-500">Delete Network</span>
+                                                    <span class="text-red-500">{{t "storefront.networks.index.delete-network"}}</span>
                                                 </a>
                                             </div>
                                         </div>

package/addon/templates/orders/index/edit.hbs

@@ -1,2 +1 @@
-
 {{outlet}}

package/addon/templates/orders/index/new.hbs

@@ -1,2 +1 @@
-
 {{outlet}}

package/addon/templates/orders/index/view.hbs

@@ -1,2 +1 @@
-
 {{outlet}}

package/addon/templates/orders/index.hbs

@@ -1,22 +1,41 @@
-<Layout::Section::Header @title="Orders" @searchQuery={{this.query}} @onSearch={{perform this.search}}>
-    <FiltersPicker @columns={{this.columns}} @onApply={{fn this.filters.apply this}} @onClear={{fn this.filters.reset this}} @onFilterClear={{this.filters.clear}} @onChange={{this.filters.set}} @buttonWrapperClass="mr-2" />
+<Layout::Section::Header @title={{t "storefront.common.orders"}} @searchQuery={{this.query}} @onSearch={{perform this.search}}>
+    <FiltersPicker
+        @columns={{this.columns}}
+        @onApply={{fn this.filters.apply this}}
+        @onClear={{fn this.filters.reset this}}
+        @onFilterClear={{this.filters.clear}}
+        @onChange={{this.filters.set}}
+        @buttonWrapperClass="mr-2"
+    />
     <VisibleColumnPicker @columns={{this.columns}} @onChange={{fn (mut this.columns)}} class="mr-2" />
     {{#if (safe-has this.table "selectedRows")}}
-        <DropdownButton @icon="layer-group" @text="Bulk Action" @type="magic" @size="sm" @buttonWrapperClass="mr-2" @contentClass="dropdown-menu" as |dd|>
+        <DropdownButton @icon="layer-group" @text={{t "storefront.common.bulk-action"}} @type="magic" @size="sm" @buttonWrapperClass="mr-2" @contentClass="dropdown-menu" as |dd|>
             <div class="next-dd-menu mt-2 mx-0">
                 <div class="px-1">
                     <a href="#" class="text-red-500 next-dd-item" {{on "click" (dropdown-fn dd this.bulkDeleteOrders)}}>
-                        Delete Orders
+                        {{t "storefront.orders.index.delete-order"}}
                     </a>
                 </div>
             </div>
         </DropdownButton>
     {{/if}}
-    <Button @icon="long-arrow-up" @iconClass="rotate-icon-45" @text="Export" />
+    <Button @icon="long-arrow-up" @iconClass="rotate-icon-45" @text={{t "storefront.common.export"}} />
 </Layout::Section::Header>
 
 <Layout::Section::Body>
-    <Table @rows={{@model}} @columns={{this.columns}} @selectable={{true}} @canSelectAll={{true}} @onSetup={{fn (mut this.table)}} @pagination={{true}} @paginationMeta={{@model.meta}} @page={{this.page}} @onPageChange={{fn (mut this.page)}} @tfootVerticalOffset="53" @tfootVerticalOffsetElements=".next-view-section-subheader" />
+    <Table
+        @rows={{@model}}
+        @columns={{this.columns}}
+        @selectable={{true}}
+        @canSelectAll={{true}}
+        @onSetup={{fn (mut this.table)}}
+        @pagination={{true}}
+        @paginationMeta={{@model.meta}}
+        @page={{this.page}}
+        @onPageChange={{fn (mut this.page)}}
+        @tfootVerticalOffset="53"
+        @tfootVerticalOffsetElements=".next-view-section-subheader"
+    />
 </Layout::Section::Body>
 
 {{outlet}}