@fleetbase/storefront-engine 0.2.6 → 0.2.8

package/addon/components/file-record.hbs

@@ -1,6 +1,9 @@
 <div class="file-record relative" ...attributes>
     <div class="flex flex-col items-center justify-center">
-        <div class="file-record-icon {{@fileIconClass}} flex items-center justify-center mb-2 rounded-lg shadow-sm border-4 border-transparent dark:border-gray-900" style={{this.fileBackgroundStyle}}>
+        <div
+            class="file-record-icon {{@fileIconClass}} flex items-center justify-center mb-2 rounded-lg shadow-sm border-4 border-transparent dark:border-gray-900"
+            style={{this.fileBackgroundStyle}}
+        >
             {{#if this.isVideo}}
                 <FaIcon @icon="file-video" @size="3x" class="text-sky-400" />
             {{/if}}
@@ -15,7 +18,11 @@
         {{/if}}
     </div>
     <div class="absolute top-0 right-0">
-        <a href="javascript:;" {{on "click" (fn this.deleteFile @file)}} class="flex items-center justify-center text-center p-1 -mt-2 rounded-full w-6 h-6 hover:opacity-75 bg-red-400 shadow-md text-xs">
+        <a
+            href="javascript:;"
+            {{on "click" (fn this.deleteFile @file)}}
+            class="flex items-center justify-center text-center p-1 -mt-2 rounded-full w-6 h-6 hover:opacity-75 bg-red-400 shadow-md text-xs"
+        >
             <FaIcon @icon="trash" class="text-white" />
         </a>
     </div>

package/addon/components/file-record.js

@@ -7,6 +7,7 @@ import isImage from '@fleetbase/ember-core/utils/is-image-file';
 
 export default class FileRecordComponent extends Component {
     @service modalsManager;
+    @service intl;
     @alias('args.file') file;
 
     get isVideo() {
@@ -27,8 +28,8 @@ export default class FileRecordComponent extends Component {
 
     @action deleteFile(file) {
         return this.modalsManager.confirm({
-            title: 'Are you sure you wish to delete this file?',
-            body: 'Once you delete this file you will be unable to recover it.',
+            title: this.intl.t('storefront.component.file-record.delete-this-file'),
+            body: this.intl.t('storefront.component.file-record.delete-this-file-you-will-unable-recover'),
             confirm: (modal) => {
                 file.destroyRecord();
 

package/addon/components/modals/add-store-hours.hbs

@@ -1,8 +1,18 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
     <div class="modal-body-container">
         <div>
-            <InputGroup @type="time" @name="Start time" @value={{@options.hours.start}} @helpText="When availability/operation start" />
-            <InputGroup @type="time" @name="End time" @value={{@options.hours.end}} @helpText="When availability/operation hours end" />
+            <InputGroup
+                @type="time"
+                @name={{t "storefront.component.modals.add-store-hours.start-time"}}
+                @value={{@options.hours.start}}
+                @helpText={{t "storefront.component.modals.add-store-hours.operation.start"}}
+            />
+            <InputGroup
+                @type="time"
+                @name={{t "storefront.component.modals.add-store-hours.end-time"}}
+                @value={{@options.hours.end}}
+                @helpText={{t "storefront.component.modals.add-store-hours.operation-end"}}
+            />
         </div>
     </div>
 </Modal::Default>

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

@@ -3,19 +3,32 @@
         <div class="sm:flex sm:items-start">
             <div class="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto bg-red-100 rounded-full sm:mx-0 sm:h-10 sm:w-10">
                 <svg class="w-6 h-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z">
+                    <path
+                        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">
-                        Select a driver to assign to this order.
+                        {{t "storefront.component.modals.assign-driver.message-driver"}}
                     </p>
                 </div>
-                <InputGroup class="mt-4" @name="Select Driver">
-                    <ModelSelect @modelName="driver" @selectedModel={{@options.order.driver_assigned}} @placeholder="Select Driver to Assign" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut
-                        @options.order.driver_assigned)}} as |model|>
+                <InputGroup class="mt-4" @name={{t "storefront.component.modals.assign-driver.name-driver"}}>
+                    <ModelSelect
+                        @modelName="driver"
+                        @selectedModel={{@options.order.driver_assigned}}
+                        @placeholder={{t "storefront.component.modals.assign-driver.placeholder-driver"}}
+                        @triggerClass="form-select form-input"
+                        @infiniteScroll={{false}}
+                        @renderInPlace={{true}}
+                        @onChange={{fn (mut @options.order.driver_assigned)}}
+                        as |model|
+                    >
                         {{model.name}}
                     </ModelSelect>
                 </InputGroup>

package/addon/components/modals/create-first-store.hbs

@@ -3,17 +3,29 @@
         <div class="flex flex-col items-center justify-center mb-2">
             <FaIcon @icon="stars" @size="4x" class="text-sky-400" />
             <div class="my-2 text-center">
-                <h2 class="dark:text-gray-100 font-semibold">Welcome to Storefront!</h2>
+                <h2 class="dark:text-gray-100 font-semibold">{{t "storefront.component.modals.create-first-store.title"}}</h2>
                 <p class="my-2 px-6 dark:text-gray-100">
-                    Storefront allows you to quickly setup a headless and dynamic on-demand shop powered by Fleetbase.
-                    Submit the form below to create your first store.
+                    {{t "storefront.component.modals.create-first-store.message"}}
+                    {{t "storefront.component.modals.create-first-store.submit-message"}}
                 </p>
             </div>
         </div>
         <div>
-            <InputGroup @name="Storefront name" @value={{@options.store.name}} @helpText="Enter the name of your store" />
-            <InputGroup @name="Storefront description" @value={{@options.store.description}} @helpText="Give your store a simple brief description on the types of things sold" />
-            <InputGroup @name="Storefront currency" @value={{@options.store.currency}} @helpText="Select the default currency for your storefront">
+            <InputGroup
+                @name={{t "storefront.component.modals.create-first-store.storefront-name"}}
+                @value={{@options.store.name}}
+                @helpText={{t "storefront.component.modals.create-first-store.enter-name"}}
+            />
+            <InputGroup
+                @name={{t "storefront.component.modals.create-first-store.description"}}
+                @value={{@options.store.description}}
+                @helpText={{t "storefront.component.modals.create-first-store.brief-description"}}
+            />
+            <InputGroup
+                @name={{t "storefront.component.modals.create-first-store.currency"}}
+                @value={{@options.store.currency}}
+                @helpText={{t "storefront.component.modals.create-first-store.select-currency"}}
+            >
                 <CurrencySelect @value={{@options.store.currency}} @onSelect={{fn (mut @options.store.currency)}} @triggerClass="w-full form-select" />
             </InputGroup>
         </div>

package/addon/components/modals/create-gateway.hbs

@@ -1,20 +1,32 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
     <div class="modal-body-container">
         <div class="mb-4 w-full">
-            <InputGroup @name="Gateway type" @helpText="Select gateway type">
+            <InputGroup @name={{t "storefront.component.modals.create-getaway.getaway"}} @helpText={{t "storefront.component.modals.create-getaway.getaway-text"}}>
                 <Select class="w-full" @placeholder="Select gateway type" @options={{@options.schemaOptions}} @onSelect={{@options.selectSchema}} @humanize={{true}} />
             </InputGroup>
         </div>
 
         {{#if @options.schema}}
-            <InputGroup @name="Gateway name" @value={{@options.gateway.name}} @helpText="Give your payment gateway a name, this will only be relevent internally" />
-            <InputGroup @name="Gateway code" @helpText="Identifier code used to identify gateway to the SDK">
-                <KeyInput @name="Gateway code" @value={{@options.gateway.code}} @onChange={{fn (mut @options.gateway.code)}} />
+            <InputGroup
+                @name={{t "storefront.component.modals.create-getaway.getaway-name"}}
+                @value={{@options.gateway.name}}
+                @helpText={{t "storefront.component.modals.create-getaway.name-text"}}
+            />
+            <InputGroup @name={{t "storefront.component.modals.create-getaway.getaway-code"}} @helpText={{t "storefront.component.modals.create-getaway.code-text"}}>
+                <KeyInput @name={{t "storefront.component.modals.create-getaway.getaway-code"}} @value={{@options.gateway.code}} @onChange={{fn (mut @options.gateway.code)}} />
             </InputGroup>
-            <InputGroup @name="Callback URL" @value={{@options.gateway.callback_url}} @helpText="Callback URL if applicable" />
-            <InputGroup @name="Return URL" @value={{@options.gateway.return_url}} @helpText="Return URL if applicable" />
+            <InputGroup
+                @name={{t "storefront.component.modals.create-getaway.callback-url"}}
+                @value={{@options.gateway.callback_url}}
+                @helpText={{t "storefront.component.modals.create-getaway.callback-text"}}
+            />
+            <InputGroup
+                @name={{t "storefront.component.modals.create-getaway.return-url"}}
+                @value={{@options.gateway.return_url}}
+                @helpText={{t "storefront.component.modals.create-getaway.return-text"}}
+            />
             <div class="input-group">
-                <Checkbox @value={{@options.gateway.sandbox}} @label="This is a sandbox gateway" @onToggle={{fn (mut @options.gateway.sandbox)}} />
+                <Checkbox @value={{@options.gateway.sandbox}} @label={{t "storefront.component.modals.create-getaway.sandbox-getaway"}} @onToggle={{fn (mut @options.gateway.sandbox)}} />
             </div>
             <div class="p-2 rounded-md my-2 border border-gray-200 dark:border-gray-800">
                 <h4 class="mb-2 font-semibold text-sm dark:text-white">Config</h4>

package/addon/components/modals/create-network-category.hbs

@@ -1,13 +1,31 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
     <div class="modal-body-container">
-        <InputGroup @name="Parent category" @wrapperClass="border-b border-gray-200 dark:border-gray-700 pb-4 mb-3i">
-            <ModelSelect @modelName="category" @query={{hash for="storefront_network" owner_uuid=@options.network.id}} @selectedModel={{@options.parentCategory}} @placeholder="Select a parent category if any" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{@options.setParentCategory}} as |model|>
+        <InputGroup @name={{t "storefront.component.modals.create-network-category.parent-category"}} @wrapperClass="border-b border-gray-200 dark:border-gray-700 pb-4 mb-3i">
+            <ModelSelect
+                @modelName="category"
+                @query={{hash for="storefront_network" owner_uuid=@options.network.id}}
+                @selectedModel={{@options.parentCategory}}
+                @placeholder={{t "storefront.component.modals.create-network-category.select-parent"}}
+                @triggerClass="form-select form-input"
+                @infiniteScroll={{false}}
+                @renderInPlace={{true}}
+                @onChange={{@options.setParentCategory}}
+                as |model|
+            >
                 {{model.name}}
             </ModelSelect>
         </InputGroup>
-        <InputGroup @name="Category name" @value={{@options.category.name}} @helpText="Enter a name for category" />
-        <InputGroup @name="Category description" @value={{@options.category.description}} @helpText="Give your network category a brief description" />
-        {{!-- <InputGroup @name="Category icon type" @wrapperClass="mb-0">
+        <InputGroup
+            @name={{t "storefront.component.modals.create-network-category.category-name"}}
+            @value={{@options.category.name}}
+            @helpText={{t "storefront.component.modals.create-network-category.name-text"}}
+        />
+        <InputGroup
+            @name={{t "storefront.component.modals.create-network-category.description"}}
+            @value={{@options.category.description}}
+            @helpText={{t "storefront.component.modals.create-network-category.description-text"}}
+        />
+        {{!-- <InputGroup @name={{t "storefront.component.modals.create-network-category.category-icon"}} @wrapperClass="mb-0">
             <div class="flex flex-row dark:text-gray-100 mt-4">
                 <div class="flex flex-row items-center mr-4">
                     <RadioButton @radioClass="focus:ring-blue-500 mr-2" @radioId="image_icon_type" @value="image" @groupValue={{@options.iconType}} @name="icon_type" @changed={{fn (mut @options.iconType)}} />

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

@@ -3,17 +3,25 @@
         <div class="flex flex-col items-center justify-center mb-2">
             <FaIcon @icon="network-wired" @size="4x" class="text-sky-400" />
             <div class="my-2 text-center">
-                <h2 class="dark:text-gray-50 font-semibold">Start a Network</h2>
+                <h2 class="dark:text-gray-50 font-semibold">{{t "storefront.component.modals.create-network.title"}}</h2>
                 <p class="my-2 px-6 dark:text-gray-100">
-                    Storefront allows you to quickly create marketplaces, enabling multiple storefronts to sell under an umbrella.
-                    When you create the network you defined your rules and you're able to expand your network through invitiations.
-                    Get started by creating a network below.
+                    {{t "storefront.component.modals.create-network.message-line1"}}
+                    {{t "storefront.component.modals.create-network.message-line2"}}
+                    {{t "storefront.component.modals.create-network.message-line3"}}
                 </p>
             </div>
         </div>
-        <InputGroup @name="Network name" @value={{@options.network.name}} @helpText="Enter the name of your store" />
-        <InputGroup @name="Network description" @value={{@options.network.description}} @helpText="Give your store a simple brief description on the types of things sold" />
-        <InputGroup @name="Network currency" @value={{@options.network.currency}} @helpText="Select the default currency for your storefront">
+        <InputGroup @name={{t "storefront.component.modals.create-network.name"}} @value={{@options.network.name}} @helpText={{t "storefront.component.modals.create-network.name-text"}} />
+        <InputGroup
+            @name={{t "storefront.component.modals.create-network.description"}}
+            @value={{@options.network.description}}
+            @helpText={{t "storefront.component.modals.create-network.description-text"}}
+        />
+        <InputGroup
+            @name={{t "storefront.component.modals.create-network.currency"}}
+            @value={{@options.network.currency}}
+            @helpText={{t "storefront.component.modals.create-network.currency-text"}}
+        >
             <CurrencySelect @value={{@options.network.currency}} @onSelect={{fn (mut @options.network.currency)}} @triggerClass="w-full form-select" />
         </InputGroup>
     </div>

package/addon/components/modals/create-new-variant.hbs

@@ -1,12 +1,28 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
     <div class="modal-body-container">
-        <InputGroup @name="Variant name" @value={{@options.productVariant.name}} @helpText="Give your product variant a name" />
-        <InputGroup @name="Variant description" @value={{@options.productVariant.description}} @helpText="Short description of the variant" />
+        <InputGroup
+            @name={{t "storefront.component.modals.create-new-variant.name"}}
+            @value={{@options.productVariant.name}}
+            @helpText={{t "storefront.component.modals.create-new-variant.name-text"}}
+        />
+        <InputGroup
+            @name={{t "storefront.component.modals.create-new-variant.description"}}
+            @value={{@options.productVariant.description}}
+            @helpText={{t "storefront.component.modals.create-new-variant.description-text"}}
+        />
         <div class="input-group mb-2">
-            <Checkbox @value={{@options.productVariant.is_multiselect}} @label="Allow user to select multiple variant options at once" @onToggle={{fn (mut @options.productVariant.is_multiselect)}} />
+            <Checkbox
+                @value={{@options.productVariant.is_multiselect}}
+                @label={{t "storefront.component.modals.create-new-variant.checkbox-1"}}
+                @onToggle={{fn (mut @options.productVariant.is_multiselect)}}
+            />
         </div>
         <div class="input-group">
-            <Checkbox @value={{@options.productVariant.is_required}} @label="This product variant selection is required" @onToggle={{fn (mut @options.productVariant.is_required)}} />
+            <Checkbox
+                @value={{@options.productVariant.is_required}}
+                @label={{t "storefront.component.modals.create-new-variant.checkbox-2"}}
+                @onToggle={{fn (mut @options.productVariant.is_required)}}
+            />
         </div>
         <InputGroup>
             <TranslationsEditor @value={{@options.productVariant.translations}} @defaultKeys={{array "name" "description"}} @onChange={{fn (mut @options.productVariant.translations)}} />

package/addon/components/modals/create-notification-channel.hbs

@@ -2,40 +2,45 @@
     <div class="modal-body-container">
         {{#unless @options.channel.id}}
             <div class="mb-4 w-full">
-                <InputGroup @name="Channel" @helpText="Select notification channel">
-                    <Select class="w-full" @placeholder="Select notification channel"
-                        @options={{@options.schemaOptions}} @optionLabel="name" @optionValue="value" @onSelect={{@options.selectSchema}} @humanize={{true}} />
+                <InputGroup @name={{t "storefront.component.modals.create-notification-channel.title"}} @helpText={{t "storefront.component.modals.create-notification-channel.title-text"}}>
+                    <Select
+                        class="w-full"
+                        @placeholder={{t "storefront.component.modals.create-notification-channel.title-text"}}
+                        @options={{@options.schemaOptions}}
+                        @optionLabel="name"
+                        @optionValue="value"
+                        @onSelect={{@options.selectSchema}}
+                        @humanize={{true}}
+                    />
                 </InputGroup>
             </div>
         {{/unless}}
 
         {{#if @options.schema}}
-            <InputGroup @name="Channel name" @value={{@options.channel.name}}
-                @helpText="Give your notification channel a name, this will only be relevent internally" />
+            <InputGroup
+                @name={{t "storefront.component.modals.create-notification-channel.name"}}
+                @value={{@options.channel.name}}
+                @helpText={{t "storefront.component.modals.create-notification-channel.name-text"}}
+            />
             {{#if @options.channel.id}}
-                <InputGroup @name="Channel Key"
-                    @helpText="This is your notification channel key, use this to specify which apps should utilize this notification channel via sdk configs.">
-                    <ClickToReveal @value={{@options.channel.app_key}} @clickToCopy={{true}}
-                        class="form-input disabled" />
+                <InputGroup @name={{t "storefront.component.modals.create-notification-channel.key"}} @helpText={{t "storefront.component.modals.create-notification-channel.key-text"}}>
+                    <ClickToReveal @value={{@options.channel.app_key}} @clickToCopy={{true}} class="form-input disabled" />
                 </InputGroup>
             {{/if}}
             <div class="p-2 rounded-md my-2 border border-gray-800">
-                <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 @options.schema as |key value|}}
                     {{#if (is-bool-value value)}}
                         <div class="input-group">
-                            <Checkbox @value={{value}} @label={{humanize key}} @onToggle={{fn @options.setConfigKey
-                                key}} />
+                            <Checkbox @value={{value}} @label={{humanize key}} @onToggle={{fn @options.setConfigKey key}} />
                         </div>
-                    {{else if (or (eq key 'private_key_content') (eq key 'firebase_credentials_json'))}}
+                    {{else if (or (eq key "private_key_content") (eq key "firebase_credentials_json"))}}
                         <InputGroup @name={{humanize key}}>
-                            <Textarea class="form-input w-full" rows="6" placeholder={{humanize key}} @value={{value}} {{on "blur"
-                                (fn @options.setConfigKey key)}} />
+                            <Textarea class="form-input w-full" rows="6" placeholder={{humanize key}} @value={{value}} {{on "blur" (fn @options.setConfigKey key)}} />
                         </InputGroup>
                     {{else}}
                         <InputGroup @name={{humanize key}}>
-                            <Input class="form-input w-full" placeholder={{humanize key}} @value={{value}} {{on "blur"
-                                (fn @options.setConfigKey key)}} />
+                            <Input class="form-input w-full" placeholder={{humanize key}} @value={{value}} {{on "blur" (fn @options.setConfigKey key)}} />
                         </InputGroup>
                     {{/if}}
                 {{/each-in}}

package/addon/components/modals/create-product-category.hbs

@@ -1,24 +1,39 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
     <div class="modal-body-container">
-        <InputGroup @name="Category name" @value={{@options.category.name}} @helpText="Enter a name for category" />
-        <InputGroup @name="Category description" @value={{@options.category.description}} @helpText="Give your product category a brief description" />
-        <InputGroup @name="Category icon">
+        <InputGroup
+            @name={{t "storefront.component.modals.create-product-category.name"}}
+            @value={{@options.category.name}}
+            @helpText={{t "storefront.component.modals.create-product-category.name-text"}}
+        />
+        <InputGroup
+            @name={{t "storefront.component.modals.create-product-category.description"}}
+            @value={{@options.category.description}}
+            @helpText={{t "storefront.component.modals.create-product-category.description-text"}}
+        />
+        <InputGroup @name={{t "storefront.component.modals.create-product-category.icon"}}>
             <div class="flex flex-row">
                 <div class="mr-4">
-                    <Image src={{@options.category.icon_url}} @fallbackSrc={{config "defaultValues.categoryImage"}} alt={{@options.category.name}} height="80" width="80" class="h-20 w-20 rounded-md" />
+                    <Image
+                        src={{@options.category.icon_url}}
+                        @fallbackSrc={{config "defaultValues.categoryImage"}}
+                        alt={{@options.category.name}}
+                        height="80"
+                        width="80"
+                        class="h-20 w-20 rounded-md"
+                    />
                 </div>
                 <div class="flex-1">
-                    <FileUpload @name="photos" @accept="image/*" @onFileAdded={{@options.uploadNewPhoto}} as |queue|>
+                    <FileUpload @name={{t "storefront.common.photos"}} @accept="image/*" @onFileAdded={{@options.uploadNewPhoto}} as |queue|>
                         <a tabindex={{0}} class="flex items-center px-0 mt-2 text-xs no-underline truncate btn btn-sm btn-default">
                             {{#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 category icon
+                                    {{t "storefront.component.modals.create-product-category.uploading-new"}}
                                 </span>
                             {{/if}}
                         </a>

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

@@ -1,8 +1,16 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
     <div class="modal-body-container">
-        <InputGroup @name="Storefront name" @value={{@options.store.name}} @helpText="Enter the name of your store" />
-        <InputGroup @name="Storefront description" @value={{@options.store.description}} @helpText="Give your store a simple brief description on the types of things sold" />
-        <InputGroup @name="Storefront currency" @value={{@options.store.currency}} @helpText="Select the default currency for your storefront">
+        <InputGroup @name={{t "storefront.component.modals.create-store.name"}} @value={{@options.store.name}} @helpText={{t "storefront.component.modals.create-store.name-text"}} />
+        <InputGroup
+            @name={{t "storefront.component.modals.create-store.description"}}
+            @value={{@options.store.description}}
+            @helpText={{t "storefront.component.modals.create-store.description-text"}}
+        />
+        <InputGroup
+            @name={{t "storefront.component.modals.create-store.currency"}}
+            @value={{@options.store.currency}}
+            @helpText={{t "storefront.component.modals.create-store.currency-text"}}
+        >
             <CurrencySelect @value={{@options.store.currency}} @onSelect={{fn (mut @options.store.currency)}} @triggerClass="w-full form-select" />
         </InputGroup>
     </div>

package/addon/components/modals/import-products.hbs

@@ -1,38 +1,47 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
     <div class="modal-body-container my-5">
         {{#if @options.isProcessing}}
-            <div class="min-h-56 dropzone w-full rounded px-4 py-8 min-h 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 px-4 py-8 min-h 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 dark:text-gray-100" @loadingMessage="Processing import..." />
+                    <Spinner class="text-sm dark:text-gray-100" @loadingMessage={{t "storefront.component.modals.import-products.uploading-message"}} />
                 </div>
             </div>
         {{else}}
-            <FileDropzone @name="spreadsheets" @multiple={{true}} @onFileAdded={{@options.queueFile}} @accept={{join ","
-                @options.acceptedFileTypes}} class="min-h-56 dropzone w-full rounded px-4 py-8 min-h 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" as |dropzone queue|>
+            <FileDropzone
+                @name="spreadsheets"
+                @multiple={{true}}
+                @onFileAdded={{@options.queueFile}}
+                @accept={{join "," @options.acceptedFileTypes}}
+                class="min-h-56 dropzone w-full rounded px-4 py-8 min-h 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"
+                as |dropzone queue|
+            >
                 {{#if dropzone.active}}
                     {{#if dropzone.valid}}
-                        Drop to upload
+                        {{t "storefront.component.modals.import-products.drop-upload"}}
                     {{else}}
-                        Invalid
+                        {{t "storefront.common.invalid"}}
                     {{/if}}
                 {{else if queue.files.length}}
                     <div class="my-2">
                         <FaIcon @icon="file-spreadsheet" class="text-indigo-500 mr-2" />
-                        {{pluralize queue.files.length "spreadsheet"}} ready for upload.
+                        {{pluralize queue.files.length "spreadsheet"}}
+                        {{t "storefront.component.modals.import-products.ready-upload"}}
                     </div>
                     <div class="my-2">({{queue.progress}}%)</div>
                 {{else}}
                     <h4 class="font-semibold mb-8">
-                        <FaIcon @icon="file-spreadsheet" class="text-indigo-500 mr-2" /> Upload Spreadsheets
+                        <FaIcon @icon="file-spreadsheet" class="text-indigo-500 mr-2" />
+                        {{t "storefront.component.modals.import-products.upload-spreadsheets"}}
                     </h4>
                     <div>
                         {{#if dropzone.supported}}
-                            <p class="text-base font-semibold my-5">Drag and drop spreadsheet files onto this dropzone</p>
+                            <p class="text-base font-semibold my-5">{{t "storefront.component.modals.import-products.drag-drop"}}</p>
                         {{/if}}
 
                         <FileUpload @name="spreadsheets" @for="spreadsheets" @accept={{join "," @options.acceptedFileTypes}} @multiple={{true}} @onFileAdded={{@options.queueFile}}>
-                            <a tabindex="0" class="btn btn-magic cursor-pointer ml-1 hover:text-white">or select spreadsheets to
-                                upload.</a>
+                            <a tabindex="0" class="btn btn-magic cursor-pointer ml-1 hover:text-white">{{t "storefront.component.modals.import-products.select-spreadsheets"}}</a>
                         </FileUpload>
                     </div>
                 {{/if}}
@@ -41,7 +50,7 @@
             {{#if @options.uploadQueue}}
                 <div class="my-6">
                     <div class="mb-2">
-                        <span class="text-sm leading-5 text-gray-500 dark:text-white">Upload Queue</span>
+                        <span class="text-sm leading-5 text-gray-500 dark:text-white">{{t "storefront.component.modals.import-products.upload-queue"}}</span>
                     </div>
 
                     <div class="table-wrapper">
@@ -82,11 +91,21 @@
                 <div class="mt-6">
                     <div class="mb-2">
                         <p class="text-sm leading-5 text-gray-500 dark:text-white">
-                            Optionally select a category to import products into
+                            {{t "storefront.component.modals.import-products.optionally-select-category"}}
                         </p>
                     </div>
-                    <InputGroup @wrapperClass="mb-0" @name="Select Category">
-                        <ModelSelect @modelName="category" @query={{hash for="storefront_product" owner_uuid=@options.store.id}} @selectedModel={{@options.selectedCategory}} @placeholder="Select Category" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @options.selectedCategory)}} as |model|>
+                    <InputGroup @wrapperClass="mb-0" @name={{t "storefront.component.modals.import-products.select-category"}}>
+                        <ModelSelect
+                            @modelName="category"
+                            @query={{hash for="storefront_product" owner_uuid=@options.store.id}}
+                            @selectedModel={{@options.selectedCategory}}
+                            @placeholder={{t "storefront.component.modals.import-products.select-category"}}
+                            @triggerClass="form-select form-input"
+                            @infiniteScroll={{false}}
+                            @renderInPlace={{true}}
+                            @onChange={{fn (mut @options.selectedCategory)}}
+                            as |model|
+                        >
                             {{model.name}}
                         </ModelSelect>
                     </InputGroup>