Merge pull request #6 from fleetbase/dev-v0.2.8

v0.2.8
fleetbase · Jan 24, 2024 · cd1bb7f · cd1bb7f
2 parents 0f2645b + 5054592
commit cd1bb7f
Show file tree

Hide file tree

Showing 74 changed files with 1,926 additions and 576 deletions.
diff --git a/addon/components/file-record.hbs b/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>

diff --git a/addon/components/file-record.js b/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();
 

diff --git a/addon/components/modals/add-store-hours.hbs b/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>
diff --git a/addon/components/modals/assign-driver.hbs b/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>

diff --git a/addon/components/modals/create-first-store.hbs b/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>

diff --git a/addon/components/modals/create-gateway.hbs b/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>

diff --git a/addon/components/modals/create-network-category.hbs b/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)}} />

diff --git a/addon/components/modals/create-network.hbs b/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>

diff --git a/addon/components/modals/create-new-variant.hbs b/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)}} />