@fleetbase/storefront-engine 0.2.7 → 0.2.9

package/addon/components/schedule-manager.js

@@ -6,6 +6,7 @@ export default class ScheduleManagerComponent extends Component {
     @service notifications;
     @service modalsManager;
     @service store;
+    @service intl;
 
     @computed('args.subject.hours.@each.id', 'hours.length') get schedule() {
         const schedule = {};
@@ -43,8 +44,8 @@ export default class ScheduleManagerComponent extends Component {
         });
 
         this.modalsManager.show('modals/add-store-hours', {
-            title: `Add new hours for ${day}`,
-            acceptButtonText: 'Add hours',
+            title: this.intl.t('storefront.component.schedule-manager.add-new-hours-for-day', { Day: day }),
+            acceptButtonText: this.intl.t('storefront.component.schedule-manager-add-hours'),
             acceptButtonIcon: 'save',
             hours,
             confirm: (modal) => {
@@ -52,7 +53,7 @@ export default class ScheduleManagerComponent extends Component {
 
                 return hours.save().then((hours) => {
                     subject.hours.pushObject(hours);
-                    this.notifications.success(`New hours added for ${day}`);
+                    this.notifications.success(this.intl.t('storefront.component.schedule-manager.new-hours-added-for-day', { day }));
                 });
             },
         });
@@ -60,8 +61,8 @@ export default class ScheduleManagerComponent extends Component {
 
     @action removeHours(hours) {
         this.modalsManager.confirm({
-            title: 'Are you sure you wish to remove these hours?',
-            body: 'By removing these operation/availability hours, your store or product may become inactive or unavailable according to the updated schedule...',
+            title: this.intl.t('storefront.component.schedule-manager.you-wish-to-remove-these-hour'),
+            body: this.intl.t('storefront.component.schedule-manager.by-removing-these-operation'),
             acceptButtonIcon: 'trash',
             confirm: (modal) => {
                 modal.startLoading();

package/addon/components/store-selector.hbs

@@ -1,5 +1,16 @@
 {{#if @activeStore}}
-    <DropdownButton @renderInPlace={{true}} @size="xs" @type="primary" @icon="store" @iconSize="sm" @text={{@activeStore.name}} @buttonClass={{concat "w-full " @buttonClass}} @buttonWrapperClass={{concat "w-full " @buttonWrapperClass}} @wrapperClass={{@wrapperClass}} as |dd|>
+    <DropdownButton
+        @renderInPlace={{true}}
+        @size="xs"
+        @type="primary"
+        @icon="store"
+        @iconSize="sm"
+        @text={{@activeStore.name}}
+        @buttonClass={{concat "w-full " @buttonClass}}
+        @buttonWrapperClass={{concat "w-full " @buttonWrapperClass}}
+        @wrapperClass={{@wrapperClass}}
+        as |dd|
+    >
         <div role="menu" class="store-selector-dropdown-menu next-dd-menu py-1">
             <div role="group" class="px-1 overflow-y-scroll max-h-72">
                 {{#each @stores as |store|}}
@@ -7,14 +18,14 @@
                         {{or store.name "-"}}
                     </a>
                 {{else}}
-                    <div class="next-dd-item" role="menuitem">No stores to select</div>
+                    <div class="next-dd-item" role="menuitem">{{t "storefront.component.store-selector.no-stores"}}</div>
                 {{/each}}
             </div>
             <div class="px-1">
                 <div class="next-dd-menu-seperator"></div>
                 <div role="group" class="px-1">
                     <a href="javascript:;" class="next-dd-item" role="menuitem" {{on "click" (dropdown-fn dd this.onCreateStore)}}>
-                        Create a new storefront
+                        {{t "storefront.component.store-selector.create-storefront"}}
                     </a>
                 </div>
             </div>

package/addon/components/widget/customers.hbs

@@ -1,4 +1,13 @@
-<ContentPanel @title={{this.title}} @titleStatusRight={{this.customers.length}} @titleStatusRightClass="info-status-badge" @hideStatusDot={{true}} @open={{this.customers.length}} @pad={{false}} @wrapperClass={{@wrapperClass}} @onInsert={{this.getCustomers}}>
+<ContentPanel
+    @title={{this.title}}
+    @titleStatusRight={{this.customers.length}}
+    @titleStatusRightClass="info-status-badge"
+    @hideStatusDot={{true}}
+    @open={{this.customers.length}}
+    @pad={{false}}
+    @wrapperClass={{@wrapperClass}}
+    @onInsert={{this.getCustomers}}
+>
     {{#if this.isLoading}}
         <div class="px-3 py-2">
             <Spinner class="text-sky-400" />
@@ -8,10 +17,10 @@
         <table>
             <thead>
                 <tr class="h-12 text-left py-1">
-                    <th>ID</th>
-                    <th>Phone</th>
-                    <th>Email</th>
-                    <th>Orders</th>
+                    <th>{{t "storefront.common.id"}}</th>
+                    <th>{{t "storefront.common.phone"}}</th>
+                    <th>{{t "storefront.common.email"}}</th>
+                    <th>{{t "storefront.common.orders"}}</th>
                     <th></th>
                 </tr>
             </thead>
@@ -35,8 +44,8 @@
                     <div class="flex-1 font-semibold">{{customer.name}}</div>
                 </div>
                 <div class="flex flex-col">
-                    <div class="text-xs">Phone:{{n-a customer.phone}}</div>
-                    <div class="text-xs">Email: {{n-a customer.email}}</div>
+                    <div class="text-xs">{{t "storefront.component.widget.customers.phone"}}{{n-a customer.phone}}</div>
+                    <div class="text-xs">{{t "storefront.component.widget.customers.email"}} {{n-a customer.email}}</div>
                 </div>
             </div>
         {{/each}}

package/addon/components/widget/customers.js

@@ -7,9 +7,10 @@ import setComponentArg from '@fleetbase/ember-core/utils/set-component-arg';
 export default class WidgetCustomersComponent extends Component {
     @service store;
     @service storefront;
+    @service intl;
     @tracked isLoading = true;
     @tracked customers = [];
-    @tracked title = 'Recent Customers';
+    @tracked title = this.intl.t('storefront.component.widget.customers.widget-title');
 
     constructor(owner, { title }) {
         super(...arguments);

package/addon/components/widget/orders.hbs

@@ -1,4 +1,13 @@
-<ContentPanel @title={{this.title}} @titleStatusRight={{this.orders.length}} @titleStatuRightClass="info-status-badge" @hideStatusDot={{true}} @open={{this.orders.length}} @pad={{false}} @wrapperClass={{@wrapperClass}} @onInsert={{this.setupWidget}}>
+<ContentPanel
+    @title={{this.title}}
+    @titleStatusRight={{this.orders.length}}
+    @titleStatuRightClass="info-status-badge"
+    @hideStatusDot={{true}}
+    @open={{this.orders.length}}
+    @pad={{false}}
+    @wrapperClass={{@wrapperClass}}
+    @onInsert={{this.setupWidget}}
+>
     {{#if this.isLoading}}
         <div class="px-3 py-2">
             <Spinner class="text-sky-400" />
@@ -8,12 +17,12 @@
         <table>
             <thead>
                 <tr class="h-12 text-left py-1">
-                    <th>ID</th>
-                    <th>Amount</th>
-                    <th>Customer</th>
-                    <th>Driver</th>
-                    <th>Created</th>
-                    <th>Status</th>
+                    <th>{{t "storefront.component.widget.orders.id-column"}}</th>
+                    <th>{{t "storefront.common.amount"}}</th>
+                    <th>{{t "storefront.common.customer"}}</th>
+                    <th>{{t "storefront.common.driver"}}</th>
+                    <th>{{t "storefront.common.created"}}</th>
+                    <th>{{t "storefront.common.status"}}</th>
                     <th></th>
                 </tr>
             </thead>
@@ -30,13 +39,26 @@
                         </td>
                         <td>
                             {{#if order.isFresh}}
-                                <Button @size="xs" @type="success" @iconPrefix="fas" @icon="check" @text="Accept Order!" @onClick={{fn this.acceptOrder order}} />
+                                <Button
+                                    @size="xs"
+                                    @type="success"
+                                    @iconPrefix="fas"
+                                    @icon="check"
+                                    @text={{concat (t "storefront.component.widget.orders.accept-order") "!"}}
+                                    @onClick={{fn this.acceptOrder order}}
+                                />
                             {{/if}}
                             {{#if order.isPreparing}}
-                                <Button @size="xs" @type="success" @icon="bells" @text="Mark as Ready!" @onClick={{fn this.markAsReady order}} />
+                                <Button @size="xs" @type="success" @icon="bells" @text={{t "storefront.component.widget.orders.mark-as-ready"}} @onClick={{fn this.markAsReady order}} />
                             {{/if}}
                             {{#if order.isPickupReady}}
-                                <Button @size="xs" @type="success" @icon="check" @text="Mark as Completed" @onClick={{fn this.markAsCompleted order}} />
+                                <Button
+                                    @size="xs"
+                                    @type="success"
+                                    @icon="check"
+                                    @text={{t "storefront.component.widget.orders.mark-as-completed"}}
+                                    @onClick={{fn this.markAsCompleted order}}
+                                />
                             {{/if}}
                         </td>
                     </tr>
@@ -59,48 +81,61 @@
                     </div>
                 </div>
                 <div class="flex flex-row space-x-2 flex-wrap">
-                    <Button @size="xs" @type="primary" @icon="eye" @text="View" @onClick={{fn this.viewOrder order}} />
-                    <Button @size="xs" @type="default" @icon="steering-wheel" @text={{if order.has_driver_assigned "Change Driver" "Assign Driver"}} @onClick={{fn this.assignDriver order}} />
+                    <Button @size="xs" @type="primary" @icon="eye" @text={{t "storefront.common.view"}} @onClick={{fn this.viewOrder order}} />
+                    <Button
+                        @size="xs"
+                        @type="default"
+                        @icon="steering-wheel"
+                        @text={{if order.has_driver_assigned (t "storefront.component.widget.order.change-driver") (t "storefront.component.widget.order.assign-driver")}}
+                        @onClick={{fn this.assignDriver order}}
+                    />
                     {{#if order.isFresh}}
-                        <Button @size="xs" @type="success" @iconPrefix="fas" @icon="check" @text="Accept Order!" @onClick={{fn this.acceptOrder order}} />
+                        <Button
+                            @size="xs"
+                            @type="success"
+                            @iconPrefix="fas"
+                            @icon="check"
+                            @text={{concat (t "storefront.component.widget.orders.accept-order") "!"}}
+                            @onClick={{fn this.acceptOrder order}}
+                        />
                     {{/if}}
                     {{#if order.isPreparing}}
-                        <Button @size="xs" @type="success" @icon="bells" @text="Mark as Ready!" @onClick={{fn this.markAsReady order}} />
+                        <Button @size="xs" @type="success" @icon="bells" @text={{t "storefront.component.widget.orders.mark-as-mark"}} @onClick={{fn this.markAsReady order}} />
                     {{/if}}
                     {{#if order.isPickupReady}}
-                        <Button @size="xs" @type="success" @icon="check" @text="Mark as Completed" @onClick={{fn this.markAsCompleted order}} />
+                        <Button @size="xs" @type="success" @icon="check" @text={{t "storefront.component.widget.orders.mark-as-completed"}} @onClick={{fn this.markAsCompleted order}} />
                     {{/if}}
                 </div>
-                <ContentPanel @title="More Details" class="mt-2">
+                <ContentPanel @title={{t "storefront.component.widget.orders.title"}} class="mt-2">
                     <div class="flex flex-col py-2 border-t dark:border-gray-800">
-                        <div>Customer: {{n-a order.customer_name}}</div>
-                        <div>Driver: {{n-a order.driver_name}}</div>
+                        <div>{{t "storefront.component.widget.orders.customer"}}: {{n-a order.customer_name}}</div>
+                        <div>{{t "storefront.component.widget.orders.driver"}}: {{n-a order.driver_name}}</div>
                     </div>
                     <div class="py-2 space-y-2 border-t dark:border-gray-800">
                         <div class="flex items-center justify-between">
-                            <span class="dark:text-gray-50">Subtotal</span>
+                            <span class="dark:text-gray-50">{{t "storefront.component.widget.orders.subtotal"}}</span>
                             <span class="dark:text-gray-50">{{format-currency order.meta.subtotal order.meta.currency}}</span>
                         </div>
                         {{#unless order.meta.is_pickup}}
                             <div class="flex items-center justify-between">
-                                <span class="dark:text-gray-50">Delivery fee</span>
+                                <span class="dark:text-gray-50">{{t "storefront.component.widget.orders.delivery-fee"}}</span>
                                 <span class="dark:text-gray-50">{{format-currency order.meta.delivery_fee order.meta.currency}}</span>
                             </div>
                         {{/unless}}
                         {{#if order.meta.tip}}
                             <div class="flex items-center justify-between">
-                                <span class="dark:text-gray-50">Tip</span>
+                                <span class="dark:text-gray-50">{{t "storefront.component.widget.order.tip"}}</span>
                                 <span class="dark:text-gray-50">{{get-tip-amount order.meta.tip order.meta.subtotal order.meta.currency}}</span>
                             </div>
                         {{/if}}
                         {{#if order.meta.delivery_tip}}
                             <div class="flex items-center justify-between">
-                                <span class="dark:text-gray-50">Delivery Tip</span>
+                                <span class="dark:text-gray-50">{{t "storefront.component.widget.order.delivery-tip"}}</span>
                                 <span class="dark:text-gray-50">{{get-tip-amount order.meta.delivery_tip order.meta.subtotal order.meta.currency}}</span>
                             </div>
                         {{/if}}
                         <div class="flex items-center justify-between">
-                            <span class="dark:text-gray-50 font-bold">Total</span>
+                            <span class="dark:text-gray-50 font-bold">{{t "storefront.component.widget.order.tip"}}</span>
                             <span class="dark:text-gray-50 font-bold">{{format-currency order.meta.total order.meta.currency}}</span>
                         </div>
                     </div>

package/addon/components/widget/orders.js

@@ -8,13 +8,14 @@ export default class WidgetOrdersComponent extends Component {
     @service store;
     @service storefront;
     @service fetch;
+    @service intl;
     @service appCache;
     @service modalsManager;
     @tracked isLoading = true;
     @tracked orders = [];
 
     @computed('args.title') get title() {
-        return this.args.title ?? 'Recent Orders';
+        return this.args.title ?? this.intl.t('storefront.component.widget.orders.widget-title');
     }
 
     constructor() {
@@ -139,8 +140,8 @@ export default class WidgetOrdersComponent extends Component {
         await order.loadCustomer();
 
         this.modalsManager.show('modals/incoming-order', {
-            title: 'Accept Order',
-            acceptButtonText: 'Accept Order',
+            title: this.intl.t('storefront.component.widget.orders.accept-order'),
+            acceptButtonText: this.intl.t('storefront.component.widget.orders.accept-order'),
             acceptButtonScheme: 'success',
             acceptButtonIcon: 'check',
             order,
@@ -162,9 +163,9 @@ export default class WidgetOrdersComponent extends Component {
         // for pickup orders
         if (order.meta?.is_pickup === true) {
             this.modalsManager.confirm({
-                title: 'Mark order ready for pickup?',
-                body: 'Marking the order as ready will notify the customer their order is ready for pickup!',
-                acceptButtonText: 'Ready for Pickup!',
+                title: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-pickup-title'),
+                body: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-pickup-body'),
+                acceptButtonText: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-pickup-accept-button-text'),
                 acceptButtonIcon: 'check',
                 acceptButtonScheme: 'success',
                 confirm: (modal) => {
@@ -183,8 +184,8 @@ export default class WidgetOrdersComponent extends Component {
         if (!order.adhoc) {
             // prompt to assign driver then dispatch
             return this.modalsManager.show('modals/order-ready-assign-driver', {
-                title: 'Assign driver and dispatch orders',
-                acceptButtonText: 'Assign & Dispatch!',
+                title: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-not-adhoc-title'),
+                acceptButtonText: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-not-adhoc-accept-button-text'),
                 acceptButtonScheme: 'success',
                 acceptButtonIcon: 'check',
                 adhoc: false,
@@ -206,9 +207,9 @@ export default class WidgetOrdersComponent extends Component {
         }
 
         this.modalsManager.confirm({
-            title: 'Are you want to mark order as ready?',
-            body: 'Marking the order as ready will dispatch the order to nearby drivers, only mark the order as ready when it can be picked up.',
-            acceptButtonText: 'Dispatch!',
+            title: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-title'),
+            body: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-body'),
+            acceptButtonText: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-accept-button-text'),
             acceptButtonIcon: 'check',
             acceptButtonScheme: 'success',
             confirm: (modal) => {
@@ -226,9 +227,9 @@ export default class WidgetOrdersComponent extends Component {
 
     @action markAsCompleted(order) {
         this.modalsManager.confirm({
-            title: 'Are you sure you want to mark order as completed?',
-            body: 'Marking the order as completed is a confirmation that the customer has picked up the order and the order is completed.',
-            acceptButtonText: 'Order Completed!',
+            title: this.intl.t('storefront.component.widget.orders.mark-as-completed-modal-title'),
+            body: this.intl.t('storefront.component.widget.orders.mark-as-completed-modal-body'),
+            acceptButtonText: this.intl.t('storefront.component.widget.orders.mark-as-completed-accept-button-text'),
             acceptButtonIcon: 'check',
             acceptButtonScheme: 'success',
             confirm: (modal) => {
@@ -248,8 +249,8 @@ export default class WidgetOrdersComponent extends Component {
         await order.loadDriver();
 
         this.modalsManager.show('modals/assign-driver', {
-            title: 'Assign driver',
-            acceptButtonText: 'Assign Driver',
+            title: this.intl.t('storefront.component.widget.orders.assign-driver-modal-title'),
+            acceptButtonText: this.intl.t('storefront.component.widget.orders.assign-driver-accept-button-text'),
             acceptButtonScheme: 'success',
             acceptButtonIcon: 'check',
             driver: order.driver_assigned,

package/addon/components/widget/storefront-metrics.hbs

@@ -2,7 +2,7 @@
     <div class="flex items-center justify-between">
         <div class="flex items-center">
             <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100 mr-2">
-                Last 30 days
+                {{t "storefront.component.widget.storefront-metrics.last-day"}}
             </h3>
             {{#if this.isLoading}}
                 <div>
@@ -17,7 +17,7 @@
     <dl class="mt-4 grid grid-cols-2 gap-5 sm:grid-cols-4">
         <div class="px-4 py-5 border border-gray-200 dark:border-gray-900 bg-gray-50 dark:bg-gray-700 shadow-sm dark:shadow rounded-lg overflow-hidden sm:p-6">
             <dt class="text-sm font-medium text-gray-500 dark:text-gray-100 truncate">
-                Orders
+                {{t "storefront.common.orders"}}
             </dt>
             <dd class="mt-1 text-3xl font-semibold text-gray-800 dark:text-white">
                 {{this.metrics.orders_count}}
@@ -26,7 +26,7 @@
 
         <div class="px-4 py-5 border border-gray-200 dark:border-gray-900 bg-gray-50 dark:bg-gray-700 shadow-sm dark:shadow rounded-lg overflow-hidden sm:p-6">
             <dt class="text-sm font-medium text-gray-500 dark:text-gray-100 truncate">
-                Customers
+                {{t "storefront.common.customers"}}
             </dt>
             <dd class="mt-1 text-3xl font-semibold text-gray-800 dark:text-white">
                 {{this.metrics.customers_count}}
@@ -35,7 +35,7 @@
 
         <div class="px-4 py-5 border border-gray-200 dark:border-gray-900 bg-gray-50 dark:bg-gray-700 shadow-sm dark:shadow rounded-lg overflow-hidden sm:p-6">
             <dt class="text-sm font-medium text-gray-500 dark:text-gray-100 truncate">
-                Stores
+                {{t "storefront.common.orders"}}
             </dt>
             <dd class="mt-1 text-3xl font-semibold text-gray-800 dark:text-white">
                 {{this.metrics.stores_count}}
@@ -44,7 +44,7 @@
 
         <div class="px-4 py-5 border border-gray-200 dark:border-gray-900 bg-gray-50 dark:bg-gray-700 shadow-sm dark:shadow rounded-lg overflow-hidden sm:p-6">
             <dt class="text-sm font-medium text-gray-500 dark:text-gray-100 truncate">
-                Earnings
+                {{t "storefront.common.earning"}}
             </dt>
             <dd class="mt-1 text-3xl font-semibold text-gray-800 dark:text-white">
                 {{format-currency this.metrics.earnings_sum this.metrics.currency}}

package/addon/controllers/customers/index.js

@@ -41,6 +41,13 @@ export default class CustomersIndexController extends Controller {
      */
     @service filters;
 
+    /**
+     * Inject the `intl` service
+     *
+     * @var {Service}
+     */
+    @service intl;
+
     /**
      * Queryable parameters for this controller's model
      *
@@ -111,7 +118,7 @@ export default class CustomersIndexController extends Controller {
      */
     @tracked columns = [
         {
-            label: 'Name',
+            label: this.intl.t('storefront.common.name'),
             valuePath: 'name',
             width: '15%',
             cellComponent: 'table/cell/media-name',
@@ -122,7 +129,7 @@ export default class CustomersIndexController extends Controller {
             filterComponent: 'filter/string',
         },
         {
-            label: 'ID',
+            label: this.intl.t('storefront.common.id'),
             valuePath: 'public_id',
             cellComponent: 'click-to-copy',
             width: '15%',
@@ -132,7 +139,7 @@ export default class CustomersIndexController extends Controller {
             filterComponent: 'filter/string',
         },
         {
-            label: 'Internal ID',
+            label: this.intl.t('storefront.customers.index.internal-id'),
             valuePath: 'internal_id',
             cellComponent: 'click-to-copy',
             width: '15%',
@@ -142,7 +149,7 @@ export default class CustomersIndexController extends Controller {
             filterComponent: 'filter/string',
         },
         {
-            label: 'Email',
+            label: this.intl.t('storefront.common.email'),
             valuePath: 'email',
             cellComponent: 'table/cell/base',
             width: '15%',
@@ -152,7 +159,7 @@ export default class CustomersIndexController extends Controller {
             filterComponent: 'filter/string',
         },
         {
-            label: 'Phone',
+            label: this.intl.t('storefront.common.phone'),
             valuePath: 'phone',
             cellComponent: 'table/cell/base',
             width: '15%',
@@ -162,7 +169,7 @@ export default class CustomersIndexController extends Controller {
             filterComponent: 'filter/string',
         },
         {
-            label: 'Address',
+            label: this.intl.t('storefront.common.address'),
             valuePath: 'address',
             cellComponent: 'table/cell/anchor',
             // action: this.viewVendorPlace,
@@ -174,7 +181,7 @@ export default class CustomersIndexController extends Controller {
             filterComponent: 'filter/string',
         },
         {
-            label: 'Country',
+            label: this.intl.t('storefront.common.country'),
             valuePath: 'country',
             cellComponent: 'table/cell/base',
             cellClassNames: 'uppercase',
@@ -186,7 +193,7 @@ export default class CustomersIndexController extends Controller {
             filterComponent: 'filter/string',
         },
         {
-            label: 'Created At',
+            label: this.intl.t('storefront.customers.index.create-at'),
             valuePath: 'createdAt',
             sortParam: 'created_at',
             width: '15%',
@@ -196,7 +203,7 @@ export default class CustomersIndexController extends Controller {
             filterComponent: 'filter/date',
         },
         {
-            label: 'Updated At',
+            label: this.intl.t('storefront.customers.index.update-at'),
             valuePath: 'updatedAt',
             sortParam: 'updated_at',
             width: '15%',
@@ -212,24 +219,25 @@ export default class CustomersIndexController extends Controller {
             ddButtonText: false,
             ddButtonIcon: 'ellipsis-h',
             ddButtonIconPrefix: 'fas',
-            ddMenuLabel: 'Vendor Actions',
+            ddMenuLabel: this.intl.t('storefront.customers.index.vendor-action'),
             cellClassNames: 'overflow-visible',
             wrapperClass: 'flex items-center justify-end mx-2',
             width: '10%',
             actions: [
                 {
-                    label: 'View Customer Details',
+                    label: this.intl.t('storefront.customers.index.view-customer-details'),
                     // fn: this.viewVendor,
                 },
                 {
-                    label: 'Edit Customer',
+                    label: this.intl.t('storefront.customers.index.edit-customer'),
+
                     // fn: this.editVendor,
                 },
                 {
                     separator: true,
                 },
                 {
-                    label: 'Delete Customer',
+                    label: this.intl.t('storefront.customers.index.delete-customer'),
                     // fn: this.deleteVendor,
                 },
             ],

package/addon/controllers/networks/index/network/index.js

@@ -42,6 +42,13 @@ export default class NetworksIndexNetworkIndexController extends Controller {
      */
     @service fetch;
 
+    /**
+     * intl service to handle file uploads and other network requests.
+     *
+     * @property {Service} intl
+     */
+    @service intl;
+
     /**
      * Proof of delivery methods.
      *
@@ -82,7 +89,7 @@ export default class NetworksIndexNetworkIndexController extends Controller {
         this.model
             .save()
             .then(() => {
-                this.notifications.success('Changes to network saved.');
+                this.notifications.success(this.intl.t('storefront.controllers.networks.index.change-network-saved'));
             })
             .catch((error) => {
                 this.notifications.serverError(error);
@@ -134,13 +141,13 @@ export default class NetworksIndexNetworkIndexController extends Controller {
         });
 
         this.editGateway(gateway, {
-            title: `Create a new payment gateway`,
-            acceptButtonText: 'Save Gateway',
+            title: this.intl.t('storefront.networks.index.network.index.create-new-payment-gateway'),
+            acceptButtonText: this.intl.t('storefront.networks.index.network.index.save-gateway'),
             confirm: (modal) => {
                 modal.startLoading();
 
                 return gateway.save().then((gateway) => {
-                    this.notifications.success(`New gateway added to network`);
+                    this.notifications.success(this.intl.t('storefront.networks.index.network.index.new-gateway-add-network'));
                     this.gateways.pushObject(gateway);
                 });
             },
@@ -169,7 +176,7 @@ export default class NetworksIndexNetworkIndexController extends Controller {
                 modal.startLoading();
 
                 return gateway.save().then(() => {
-                    this.notifications.success(`Payment gateway changes saved!`);
+                    this.notifications.success(this.intl.t('storefront.networks.index.network.index.payment-gateway-changes-success'));
                 });
             };
         }
@@ -200,13 +207,13 @@ export default class NetworksIndexNetworkIndexController extends Controller {
         });
 
         this.editChannel(channel, {
-            title: `Create a new notification channel`,
-            acceptButtonText: 'Create Notification Channel',
+            title: this.intl.t('storefront.networks.index.network.index.create-new-notification-channel'),
+            acceptButtonText: this.intl.t('storefront.networks.index.network.index.create-notification-channel'),
             confirm: (modal) => {
                 modal.startLoading();
 
                 return channel.save().then((channel) => {
-                    this.notifications.success(`New notification channel added to network!`);
+                    this.notifications.success(this.intl.t('storefront.networks.index.network.index.notification-channel-add-network'));
                     this.channels.pushObject(channel);
                 });
             },
@@ -235,7 +242,7 @@ export default class NetworksIndexNetworkIndexController extends Controller {
                 modal.startLoading();
 
                 return channel.save().then(() => {
-                    this.notifications.success(`Notification channel changes saved!`);
+                    this.notifications.success(this.intl.t('storefront.controllers.networks.index.notification-channel-changes-save'));
                 });
             };
         }