@fleetbase/storefront-engine 0.2.7 → 0.2.9

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

@@ -1,6 +1,20 @@
 <Overlay @position="right" @noBackdrop={{true}} @isResizable={{true}} @width="570px" @fullHeight={{true}} @containerClass="border-l border-transparent dark:border-gray-700">
-    <Overlay::Header @title={{this.overlayTitle}} @titleClass="truncate" @titleWrapperClass="w-3/4" @headerLeftClass="w-70pc" @headerLeftInnerClass="w-full flex-1" @onPressCancel={{this.transitionBack}}>
-        <Button @icon={{this.overlayActionButtonIcon}} @type="primary" @text={{this.overlayActionButtonTitle}} @onClick={{this.saveProduct}} @isLoading={{this.isSaving}} @isSubscriptionRequired={{true}} />
+    <Overlay::Header
+        @title={{this.overlayTitle}}
+        @titleClass="truncate"
+        @titleWrapperClass="w-3/4"
+        @headerLeftClass="w-70pc"
+        @headerLeftInnerClass="w-full flex-1"
+        @onPressCancel={{this.transitionBack}}
+    >
+        <Button
+            @icon={{this.overlayActionButtonIcon}}
+            @type="primary"
+            @text={{this.overlayActionButtonTitle}}
+            @onClick={{this.saveProduct}}
+            @isLoading={{this.isSaving}}
+            @isSubscriptionRequired={{true}}
+        />
     </Overlay::Header>
 
     <Overlay::Body @increaseInnerBodyHeightBy="0" @wrapperClass="new-order-overlay-body px-4 space-y-4 pt-4">
@@ -9,28 +23,56 @@
             <Textarea @value={{this.product.description}} class="form-input w-full" placeholder="Enter a description of your product...." rows={{4}} />
         </InputGroup>
         <InputGroup @name="Product Tags">
-            <TagInput class="form-input" @placeholder="Add tags" @allowSpacesInTags={{true}} @tags={{this.product.tags}} @addTag={{this.addTag}} @removeTagAtIndex={{this.removeTag}} as |tag|>
+            <TagInput
+                class="form-input"
+                @placeholder="Add tags"
+                @allowSpacesInTags={{true}}
+                @tags={{this.product.tags}}
+                @addTag={{this.addTag}}
+                @removeTagAtIndex={{this.removeTag}}
+                as |tag|
+            >
                 {{tag}}
             </TagInput>
         </InputGroup>
         <InputGroup @name="Product SKU" @value={{this.product.sku}} @helpText="Enter product SKU if applicable" />
         <div class="grid grid-cols-2 gap-2">
             <InputGroup @name="Price" @helpText="Enter a price users will pay to purchase this product">
-                <MoneyInput class="w-full" @currency={{this.product.currency}} @value={{this.product.price}} @canSelectCurrency={{true}} @onCurrencyChange={{fn (mut this.product.currency)}} />
+                <MoneyInput
+                    class="w-full"
+                    @currency={{this.product.currency}}
+                    @value={{this.product.price}}
+                    @canSelectCurrency={{true}}
+                    @onCurrencyChange={{fn (mut this.product.currency)}}
+                />
             </InputGroup>
             <InputGroup @name="Sale Price" @helpText="Optionally add a sale price for the product if the product is put on sale">
-                <MoneyInput class="w-full" @currency={{this.product.currency}} @value={{this.product.sale_price}} @canSelectCurrency={{true}} @onCurrencyChange={{fn (mut this.product.currency)}} />
+                <MoneyInput
+                    class="w-full"
+                    @currency={{this.product.currency}}
+                    @value={{this.product.sale_price}}
+                    @canSelectCurrency={{true}}
+                    @onCurrencyChange={{fn (mut this.product.currency)}}
+                />
             </InputGroup>
         </div>
 
-        <ContentPanel @title="Metadata" @open={{this.product.meta_array.length}} @actionButtons={{this.metadataButtons}} @pad={{true}} @panelBodyWrapperClass="px-0 py-4" @panelBodyClass="bg-white dark:bg-gray-800">
+        <ContentPanel
+            @title="Metadata"
+            @open={{this.product.meta_array.length}}
+            @actionButtons={{this.metadataButtons}}
+            @pad={{true}}
+            @panelBodyWrapperClass="px-0 py-4"
+            @panelBodyClass="bg-white dark:bg-gray-800"
+        >
             {{#each this.product.meta_array as |metaField index|}}
                 <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
                     <div class="input-group">
                         <div class="flex justify-between items-center mb-1">
                             <Input class="form-input border-0 px-2 py-1 m-0 bg-white dark:bg-gray-900 shadow-none" @value={{metaField.label}} placeholder={{metaField.label}} />
                             <a href="javascript:;" class="text-xs" tabindex="-1" {{on "click" (fn this.removeMetaField index)}}>
-                                <FaIcon @icon="trash" @size="sm" class="mr-1" /> Remove
+                                <FaIcon @icon="trash" @size="sm" class="mr-1" />
+                                Remove
                             </a>
                         </div>
                         <Input class="w-full form-input" @value={{metaField.value}} placeholder={{metaField.label}} />
@@ -168,9 +210,11 @@
         <ContentPanel @title="Images & Videos" @open={{this.product.files.length}} @pad={{false}} @panelBodyWrapperClass="px-0 py-4" @panelBodyClass="bg-white dark:bg-gray-800">
             <div class="px-6 space-y-4">
                 {{#if this.isUploading}}
-                    <div class="min-h-56 dropzone w-full rounded-lg px-4 py-8 min-h bg-gray-50 dark:bg-gray-900 bg-opacity-25 text-gray-900 dark:text-white text-center flex flex-col items-center justify-center border-2 border-dashed border-gray-200 dark:border-indigo-500">
+                    <div
+                        class="min-h-56 dropzone w-full rounded-lg px-4 py-8 min-h bg-gray-50 dark:bg-gray-900 bg-opacity-25 text-gray-900 dark:text-white text-center flex flex-col items-center justify-center border-2 border-dashed border-gray-200 dark:border-indigo-500"
+                    >
                         <div class="flex items-center justify-center py-5">
-                            <Spinner class="text-sm dar:text-gray-100" @loadingMessage="Uploading..." />
+                            <Spinner class="text-sm dar:text-gray-100" @loadingMessage={{t "component.dropzone.uploading"}} />
                         </div>
                     </div>
                 {{else}}
@@ -178,26 +222,27 @@
                         <FileDropzone @queue={{queue}} class="dropzone file-dropzone" as |dropzone|>
                             {{#if dropzone.active}}
                                 {{#if dropzone.valid}}
-                                    Drop to upload
+                                    {{t "component.dropzone.drop-to-upload"}}
                                 {{else}}
-                                    Invalid
+                                    {{t "component.dropzone.invalid"}}
                                 {{/if}}
                             {{else if queue.files.length}}
                                 <div class="my-2">
                                     <FaIcon @icon="photo-video" class="text-indigo-500 mr-2" />
-                                    {{pluralize queue.files.length "file"}} ready for upload.
+                                    {{t "component.dropzone.files-ready-for-upload" numOfFiles=(pluralize queue.files.length (t "component.dropzone.file"))}}
                                 </div>
                                 <div class="my-2">({{queue.progress}}%)</div>
                             {{else}}
                                 <h4 class="font-semibold mb-8">
-                                    <FaIcon @icon="photo-video" @size="2x" class="text-indigo-500 mr-2" /> Upload Images & Videos
+                                    <FaIcon @icon="photo-video" @size="2x" class="text-indigo-500 mr-2" />
+                                    {{t "component.dropzone.upload-images-videos"}}
                                 </h4>
                                 <div>
                                     {{#if dropzone.supported}}
-                                        <p class="text-base font-semibold my-5">Drag and drop image and video files onto this dropzone</p>
+                                        <p class="text-base font-semibold my-5">{{t "component.dropzone.dropzone-supported-images-videos"}}</p>
                                     {{/if}}
                                     <FileUpload @name="files" @for="files" @accept={{join "," this.acceptedFileTypes}} @multiple={{true}} @onFileAdded={{this.queueFile}}>
-                                        <a tabindex={{0}} class="btn btn-magic cursor-pointer ml-1">or select files to upload.</a>
+                                        <a tabindex={{0}} class="btn btn-magic cursor-pointer ml-1">{{t "component.dropzone.or-select-button-text"}}</a>
                                     </FileUpload>
                                 </div>
                             {{/if}}
@@ -206,15 +251,15 @@
                     {{#if this.uploadQueue}}
                         <div class="mx-4">
                             <div class="flex items-center justify-between mb-4">
-                                <span class="leading-6 dark:text-gray-100">Upload Queue</span>
+                                <span class="leading-6 dark:text-gray-100">{{t "component.dropzone.upload-queue"}}</span>
                             </div>
                             <div class="space-y-2 mb-4">
                                 {{#each this.uploadQueue as |file|}}
-                                    <div class="flex items-center justify-between bg-green-100 border border-green-800 dark:border-green-800 py-1.5 shadow-sm rounded-lg px-4">
-                                        <div class="text-sm text-green-900">{{file.name}}</div>
+                                    <div class="flex items-center justify-between bg-blue-100 border border-blue-800 dark:border-blue-800 py-1.5 shadow-sm rounded-lg px-4">
+                                        <div class="text-xs text-blue-900 truncate">{{truncate-filename file.name 50}}</div>
                                         <div class="flex items-center text-sm">
-                                            <Spinner class="text-green-900 mr-2" />
-                                            <span class="font-bold text-green-900">{{round file.progress}}%</span>
+                                            <Spinner class="text-blue-900 mr-2" />
+                                            <span class="font-bold text-blue-900">{{round file.progress}}%</span>
                                         </div>
                                     </div>
                                 {{/each}}
@@ -224,9 +269,16 @@
                     <div>
                         <div class="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4">
                             {{#each this.product.files as |file|}}
-                                <FileRecord @file={{file}} @fileIconClass={{if (eq this.product.primary_image_uuid file.id) 'border-blue-400'}} @onDelete={{this.removeFile}}>
+                                <FileRecord @file={{file}} @fileIconClass={{if (eq this.product.primary_image_uuid file.id) "border-blue-400"}} @onDelete={{this.removeFile}}>
                                     <div class="flex items-center justify-evenly">
-                                        <Button @icon="magic" @text="Make Primary" @size="xs" @textClass="text-xs truncate" @onClick={{fn this.makePrimaryFile file}} @disabled={{eq this.product.primary_image_uuid file.id}} />
+                                        <Button
+                                            @icon="magic"
+                                            @text="Make Primary"
+                                            @size="xs"
+                                            @textClass="text-xs truncate"
+                                            @onClick={{fn this.makePrimaryFile file}}
+                                            @disabled={{eq this.product.primary_image_uuid file.id}}
+                                        />
                                     </div>
                                 </FileRecord>
                             {{/each}}

package/addon/templates/products/index.hbs

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

package/addon/templates/settings/api.hbs

@@ -3,14 +3,14 @@
         <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.settings.api.api-settings"}}
                 </h1>
                 <p class="mt-1 text-sm text-gray-500">
-                    Access key for Storefront API & Integrations.
+                    {{t "storefront.settings.api.access-key-for-storefront-api-integrations"}}
                 </p>
             </div>
 
-            <InputGroup @name="Store Key" @helpText="This is your store key, use this to enable apps and integrations for your storefront.">
+            <InputGroup @name={{t "storefront.settings.api.store-key"}} @helpText={{t "storefront.settings.api.store-key-help-text"}}>
                 <ClickToReveal @value={{@model.key}} @clickToCopy={{true}} class="form-input disabled" />
             </InputGroup>
         </div>

package/addon/templates/settings/gateways.hbs

@@ -4,28 +4,28 @@
             <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.settings.gateways.geteway-settings"}}
                     </h1>
                     <p class="mt-1 text-sm text-gray-500">
-                        Add or manage your payment gateway settings here.
+                        {{t "storefront.settings.gateways.add-or-manage-your-paymeny-gateway-settings-here"}}
                     </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.settings.gateways.create-new-gateway"}} @onClick={{this.createGateway}} />
                 </div>
             </div>
 
             {{#each this.gateways as |gateway|}}
                 <ContentPanel @title={{gateway.name}} @open={{true}} @pad={{true}}>
-                    <InputGroup @name="Gateway name" @value={{gateway.name}} @helpText="Give your payment gateway a name, this will only be relevent internally" />
-                    <InputGroup @name="Gateway code" @value={{gateway.code}} @disabled={{true}} @helpText="Identifier code used to identify gateway to the SDK" />
-                    <InputGroup @name="Callback URL" @value={{gateway.callback_url}} @helpText="Callback URL if applicable" />
-                    <InputGroup @name="Return URL" @value={{gateway.return_url}} @helpText="Return URL if applicable" />
+                    <InputGroup @name={{t "storefront.settings.gateways.gateway-name"}} @value={{gateway.name}} @helpText={{t "storefront.settings.gateways.helpText"}} />
+                    <InputGroup @name={{t "storefront.settings.gateways.gateway-code"}} @value={{gateway.code}} @disabled={{true}} @helpText={{t "storefront.settings.gateways.gateway-code-help-text"}} />
+                    <InputGroup @name={{t "storefront.settings.gateways.callback-url"}} @value={{gateway.callback_url}} @helpText={{t "storefront.settings.gateways.callback-url-help-text"}} />
+                    <InputGroup @name={{t "storefront.settings.gateways.return-url"}} @value={{gateway.return_url}} @helpText={{t "storefront.settings.gateways.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.settings.gateways.this-is-a-sandbox-gateway"}} @onToggle={{fn (mut gateway.sandbox)}} />
                     </div>
                     <div>
-                        <h4 class="mb-2 font-semibold text-sm dark:text-white">Config</h4>
+                        <h4 class="mb-2 font-semibold text-sm dark:text-white">{{t "storefront.common.config"}}</h4>
                         {{#each-in gateway.config as |key value|}}
                             {{#if (is-bool-value value)}}
                                 <div class="input-group">
@@ -39,7 +39,7 @@
                         {{/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.settings.gateways.delete-payment-gateway"}} @onClick={{fn this.deleteGateway gateway}} />
                     </div>
                 </ContentPanel>
             {{/each}}