From 0bb4f47b9911d8753e75ca0ccbe01a219c33009a Mon Sep 17 00:00:00 2001
From: vincent <vincent@sleede.com>
Date: Wed, 7 Sep 2022 17:14:06 +0200
Subject: [PATCH 1/3] (feat) Add actions dropdown

---
 .../components/store/show-order.tsx           | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/app/frontend/src/javascript/components/store/show-order.tsx b/app/frontend/src/javascript/components/store/show-order.tsx
index 17fc7d193..252b55036 100644
--- a/app/frontend/src/javascript/components/store/show-order.tsx
+++ b/app/frontend/src/javascript/components/store/show-order.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable fabmanager/scoped-translation */
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { IApplication } from '../../models/application';
@@ -5,6 +6,7 @@ import { react2angular } from 'react2angular';
 import { Loader } from '../base/loader';
 import noImage from '../../../../images/no_image.png';
 import { FabStateLabel } from '../base/fab-state-label';
+import Select from 'react-select';
 
 declare const Application: IApplication;
 
@@ -13,6 +15,11 @@ interface ShowOrderProps {
   onError: (message: string) => void,
   onSuccess: (message: string) => void
 }
+/**
+* Option format, expected by react-select
+* @see https://github.com/JedWatson/react-select
+*/
+type selectOption = { value: number, label: string };
 
 /**
  * This component shows an order details
@@ -22,6 +29,41 @@ interface ShowOrderProps {
 export const ShowOrder: React.FC<ShowOrderProps> = ({ orderRef, onError, onSuccess }) => {
   const { t } = useTranslation('admin');
 
+  /**
+   * Creates sorting options to the react-select format
+   */
+  const buildOptions = (): Array<selectOption> => {
+    return [
+      { value: 0, label: t('app.admin.store.orders.status.error') },
+      { value: 1, label: t('app.admin.store.orders.status.canceled') },
+      { value: 2, label: t('app.admin.store.orders.status.pending') },
+      { value: 3, label: t('app.admin.store.orders.status.under_preparation') },
+      { value: 4, label: t('app.admin.store.orders.status.paid') },
+      { value: 5, label: t('app.admin.store.orders.status.ready') },
+      { value: 6, label: t('app.admin.store.orders.status.collected') },
+      { value: 7, label: t('app.admin.store.orders.status.refunded') }
+    ];
+  };
+
+  /**
+   * Callback after selecting an action
+   */
+  const handleAction = (action: selectOption) => {
+    console.log('Action:', action);
+  };
+
+  // Styles the React-select component
+  const customStyles = {
+    control: base => ({
+      ...base,
+      width: '20ch',
+      backgroundColor: 'transparent'
+    }),
+    indicatorSeparator: () => ({
+      display: 'none'
+    })
+  };
+
   /**
    * Returns a className according to the status
    */
@@ -43,6 +85,11 @@ export const ShowOrder: React.FC<ShowOrderProps> = ({ orderRef, onError, onSucce
       <header>
         <h2>[order.ref]</h2>
         <div className="grpBtn">
+          <Select
+            options={buildOptions()}
+            onChange={option => handleAction(option)}
+            styles={customStyles}
+          />
           <a href={''}
             target='_blank'
             className='fab-button is-black'

From 157134f4efc072ffc7398bf8091d1faeea7df66c Mon Sep 17 00:00:00 2001
From: vincent <vincent@sleede.com>
Date: Wed, 7 Sep 2022 18:36:54 +0200
Subject: [PATCH 2/3] (feat) Add period filter

---
 .../components/base/fab-state-label.tsx       |  1 -
 .../javascript/components/store/orders.tsx    | 42 +++++++++++++++++--
 .../modules/store/store-filters.scss          |  6 +++
 config/locales/app.admin.en.yml               |  1 +
 4 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/app/frontend/src/javascript/components/base/fab-state-label.tsx b/app/frontend/src/javascript/components/base/fab-state-label.tsx
index ef1d7b053..25fc0a998 100644
--- a/app/frontend/src/javascript/components/base/fab-state-label.tsx
+++ b/app/frontend/src/javascript/components/base/fab-state-label.tsx
@@ -9,7 +9,6 @@ interface FabStateLabelProps {
  * Render a label preceded by a bot
  */
 export const FabStateLabel: React.FC<FabStateLabelProps> = ({ status, background, children }) => {
-  console.log('status: ', status);
   return (
     <span className={`fab-state-label ${status !== undefined ? status : ''} ${background ? 'bg' : ''}`}>
       {children}
diff --git a/app/frontend/src/javascript/components/store/orders.tsx b/app/frontend/src/javascript/components/store/orders.tsx
index 93cbd88d1..2402b226c 100644
--- a/app/frontend/src/javascript/components/store/orders.tsx
+++ b/app/frontend/src/javascript/components/store/orders.tsx
@@ -4,12 +4,15 @@ import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import { Loader } from '../base/loader';
 import { IApplication } from '../../models/application';
+import { useForm } from 'react-hook-form';
 import { FabButton } from '../base/fab-button';
 import { StoreListHeader } from './store-list-header';
 import { AccordionItem } from './accordion-item';
 import { OrderItem } from './order-item';
 import { MemberSelect } from '../user/member-select';
 import { User } from '../../models/user';
+import { FormInput } from '../form/form-input';
+import { TDateISODate } from '../../typings/date-iso';
 
 declare const Application: IApplication;
 
@@ -35,9 +38,10 @@ type checklistOption = { value: number, label: string };
 // TODO: delete next eslint disable
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const Orders: React.FC<OrdersProps> = ({ currentUser, onSuccess, onError }) => {
-  console.log('currentUser: ', currentUser);
   const { t } = useTranslation('admin');
 
+  const { register, getValues } = useForm();
+
   const [filters, setFilters] = useImmer<Filters>(initFilters);
   const [clearFilters, setClearFilters] = useState<boolean>(false);
   const [accordion, setAccordion] = useState({});
@@ -119,6 +123,13 @@ const Orders: React.FC<OrdersProps> = ({ currentUser, onSuccess, onError }) => {
     });
   };
 
+  /**
+   * Filter: by period
+   */
+  const handlePeriod = () => {
+    console.log(getValues(['period_from', 'period_to']));
+  };
+
   /**
    * Open/close accordion items
    */
@@ -186,6 +197,27 @@ const Orders: React.FC<OrdersProps> = ({ currentUser, onSuccess, onError }) => {
               </div>
             </div>
           </AccordionItem>
+          <AccordionItem id={3}
+            isOpen={accordion[3]}
+            onChange={handleAccordion}
+            label={t('app.admin.store.orders.filter_period')}
+          >
+            <div className='content'>
+              <div className="group">
+                <div className="period">
+                  from
+                  <FormInput id="period_from"
+                             register={register}
+                             type="date" />
+                  to
+                  <FormInput id="period_to"
+                             register={register}
+                             type="date" />
+                </div>
+                <FabButton onClick={handlePeriod} className="is-info">{t('app.admin.store.orders.filter_apply')}</FabButton>
+              </div>
+            </div>
+          </AccordionItem>
         </div>
       </div>
 
@@ -216,11 +248,15 @@ Application.Components.component('orders', react2angular(OrdersWrapper, ['curren
 interface Filters {
   reference: string,
   status: checklistOption[],
-  memberId: number
+  memberId: number,
+  period_from: TDateISODate,
+  period_to: TDateISODate
 }
 
 const initFilters: Filters = {
   reference: '',
   status: [],
-  memberId: null
+  memberId: null,
+  period_from: null,
+  period_to: null
 };
diff --git a/app/frontend/src/stylesheets/modules/store/store-filters.scss b/app/frontend/src/stylesheets/modules/store/store-filters.scss
index 6dbd308aa..b8009054d 100644
--- a/app/frontend/src/stylesheets/modules/store/store-filters.scss
+++ b/app/frontend/src/stylesheets/modules/store/store-filters.scss
@@ -143,4 +143,10 @@
       }
     }
   }
+
+  .period {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }
\ No newline at end of file
diff --git a/config/locales/app.admin.en.yml b/config/locales/app.admin.en.yml
index 3ac93f1f2..cd5f9474c 100644
--- a/config/locales/app.admin.en.yml
+++ b/config/locales/app.admin.en.yml
@@ -2037,6 +2037,7 @@ en:
           filter_ref: "By reference"
           filter_status: "By status"
           filter_client: "By client"
+          filter_period: "By period"
           status:
             error: "Payment error"
             canceled: "Canceled"

From d5d8a972cfc19e5869d4d9e93fffcabb12e1a24d Mon Sep 17 00:00:00 2001
From: vincent <vincent@sleede.com>
Date: Thu, 8 Sep 2022 12:04:37 +0200
Subject: [PATCH 3/3] (quality) Refacto orders views

---
 .../components/store/show-order.tsx           | 82 +++++++++++--------
 .../javascript/controllers/admin/orders.js    | 52 ++++++++++++
 .../src/javascript/controllers/orders.js      |  2 +-
 app/frontend/src/javascript/router.js         |  2 +-
 .../stylesheets/modules/store/order-item.scss |  1 +
 app/frontend/templates/admin/orders/show.html |  4 +-
 .../templates/admin/store/product_edit.html   |  2 +-
 .../templates/admin/store/product_new.html    |  2 +-
 app/frontend/templates/orders/show.html       | 17 ++++
 config/locales/app.admin.en.yml               | 17 +---
 config/locales/app.shared.en.yml              | 26 ++++++
 11 files changed, 150 insertions(+), 57 deletions(-)
 create mode 100644 app/frontend/src/javascript/controllers/admin/orders.js
 create mode 100644 app/frontend/templates/orders/show.html

diff --git a/app/frontend/src/javascript/components/store/show-order.tsx b/app/frontend/src/javascript/components/store/show-order.tsx
index 252b55036..b2aaac940 100644
--- a/app/frontend/src/javascript/components/store/show-order.tsx
+++ b/app/frontend/src/javascript/components/store/show-order.tsx
@@ -1,7 +1,7 @@
-/* eslint-disable fabmanager/scoped-translation */
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { IApplication } from '../../models/application';
+import { User } from '../../models/user';
 import { react2angular } from 'react2angular';
 import { Loader } from '../base/loader';
 import noImage from '../../../../images/no_image.png';
@@ -12,6 +12,7 @@ declare const Application: IApplication;
 
 interface ShowOrderProps {
   orderRef: string,
+  currentUser?: User,
   onError: (message: string) => void,
   onSuccess: (message: string) => void
 }
@@ -26,22 +27,29 @@ type selectOption = { value: number, label: string };
  */
 // TODO: delete next eslint disable
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const ShowOrder: React.FC<ShowOrderProps> = ({ orderRef, onError, onSuccess }) => {
-  const { t } = useTranslation('admin');
+export const ShowOrder: React.FC<ShowOrderProps> = ({ orderRef, currentUser, onError, onSuccess }) => {
+  const { t } = useTranslation('shared');
+
+  /**
+   * Check if the current operator has administrative rights or is a normal member
+   */
+  const isPrivileged = (): boolean => {
+    return (currentUser?.role === 'admin' || currentUser?.role === 'manager');
+  };
 
   /**
    * Creates sorting options to the react-select format
    */
   const buildOptions = (): Array<selectOption> => {
     return [
-      { value: 0, label: t('app.admin.store.orders.status.error') },
-      { value: 1, label: t('app.admin.store.orders.status.canceled') },
-      { value: 2, label: t('app.admin.store.orders.status.pending') },
-      { value: 3, label: t('app.admin.store.orders.status.under_preparation') },
-      { value: 4, label: t('app.admin.store.orders.status.paid') },
-      { value: 5, label: t('app.admin.store.orders.status.ready') },
-      { value: 6, label: t('app.admin.store.orders.status.collected') },
-      { value: 7, label: t('app.admin.store.orders.status.refunded') }
+      { value: 0, label: t('app.shared.store.show_order.status.error') },
+      { value: 1, label: t('app.shared.store.show_order.status.canceled') },
+      { value: 2, label: t('app.shared.store.show_order.status.pending') },
+      { value: 3, label: t('app.shared.store.show_order.status.under_preparation') },
+      { value: 4, label: t('app.shared.store.show_order.status.paid') },
+      { value: 5, label: t('app.shared.store.show_order.status.ready') },
+      { value: 6, label: t('app.shared.store.show_order.status.collected') },
+      { value: 7, label: t('app.shared.store.show_order.status.refunded') }
     ];
   };
 
@@ -85,33 +93,37 @@ export const ShowOrder: React.FC<ShowOrderProps> = ({ orderRef, onError, onSucce
       <header>
         <h2>[order.ref]</h2>
         <div className="grpBtn">
-          <Select
-            options={buildOptions()}
-            onChange={option => handleAction(option)}
-            styles={customStyles}
-          />
+          {isPrivileged() &&
+            <Select
+              options={buildOptions()}
+              onChange={option => handleAction(option)}
+              styles={customStyles}
+            />
+          }
           <a href={''}
             target='_blank'
             className='fab-button is-black'
             rel='noreferrer'>
-            {t('app.admin.store.show_order.see_invoice')}
+            {t('app.shared.store.show_order.see_invoice')}
           </a>
         </div>
       </header>
 
       <div className="client-info">
-        <label>{t('app.admin.store.show_order.client')}</label>
+        <label>{t('app.shared.store.show_order.tracking')}</label>
         <div className="content">
+          {isPrivileged() &&
+            <div className='group'>
+              <span>{t('app.shared.store.show_order.client')}</span>
+              <p>order.user.name</p>
+            </div>
+          }
           <div className='group'>
-            <span>{t('app.admin.store.show_order.client')}</span>
-            <p>order.user.name</p>
-          </div>
-          <div className='group'>
-            <span>{t('app.admin.store.show_order.created_at')}</span>
+            <span>{t('app.shared.store.show_order.created_at')}</span>
             <p>order.created_at</p>
           </div>
           <div className='group'>
-            <span>{t('app.admin.store.show_order.last_update')}</span>
+            <span>{t('app.shared.store.show_order.last_update')}</span>
             <p>order.???</p>
           </div>
           <FabStateLabel status={statusColor('error')} background>
@@ -121,7 +133,7 @@ export const ShowOrder: React.FC<ShowOrderProps> = ({ orderRef, onError, onSucce
       </div>
 
       <div className="cart">
-        <label>{t('app.admin.store.show_order.cart')}</label>
+        <label>{t('app.shared.store.show_order.cart')}</label>
         <div>
           {/* loop sur les articles du panier */}
           <article className='store-cart-list-item'>
@@ -129,19 +141,19 @@ export const ShowOrder: React.FC<ShowOrderProps> = ({ orderRef, onError, onSucce
               <img alt=''src={noImage} />
             </div>
             <div className="ref">
-              <span>{t('app.admin.store.show_order.reference_short')} orderable_id?</span>
+              <span>{t('app.shared.store.show_order.reference_short')} orderable_id?</span>
               <p>o.orderable_name</p>
             </div>
             <div className="actions">
               <div className='price'>
                 <p>o.amount</p>
-                <span>/ {t('app.admin.store.show_order.unit')}</span>
+                <span>/ {t('app.shared.store.show_order.unit')}</span>
               </div>
 
               <span className="count">o.quantity</span>
 
               <div className='total'>
-                <span>{t('app.admin.store.show_order.item_total')}</span>
+                <span>{t('app.shared.store.show_order.item_total')}</span>
                 <p>o.quantity * o.amount</p>
               </div>
             </div>
@@ -151,15 +163,15 @@ export const ShowOrder: React.FC<ShowOrderProps> = ({ orderRef, onError, onSucce
 
       <div className="subgrid">
         <div className="payment-info">
-          <label>{t('app.admin.store.show_order.payment_informations')}</label>
+          <label>{t('app.shared.store.show_order.payment_informations')}</label>
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum rerum commodi quaerat possimus! Odit, harum.</p>
         </div>
         <div className="amount">
-          <label>{t('app.admin.store.show_order.amount')}</label>
-          <p>{t('app.admin.store.show_order.products_total')}<span>order.amount</span></p>
-          <p className='gift'>{t('app.admin.store.show_order.gift_total')}<span>-order.amount</span></p>
-          <p>{t('app.admin.store.show_order.coupon')}<span>order.amount</span></p>
-          <p className='total'>{t('app.admin.store.show_order.total')} <span>order.total</span></p>
+          <label>{t('app.shared.store.show_order.amount')}</label>
+          <p>{t('app.shared.store.show_order.products_total')}<span>order.amount</span></p>
+          <p className='gift'>{t('app.shared.store.show_order.gift_total')}<span>-order.amount</span></p>
+          <p>{t('app.shared.store.show_order.coupon')}<span>order.amount</span></p>
+          <p className='total'>{t('app.shared.store.show_order.cart_total')} <span>order.total</span></p>
         </div>
       </div>
     </div>
@@ -174,4 +186,4 @@ const ShowOrderWrapper: React.FC<ShowOrderProps> = (props) => {
   );
 };
 
-Application.Components.component('showOrder', react2angular(ShowOrderWrapper, ['orderRef', 'onError', 'onSuccess']));
+Application.Components.component('showOrder', react2angular(ShowOrderWrapper, ['orderRef', 'currentUser', 'onError', 'onSuccess']));
diff --git a/app/frontend/src/javascript/controllers/admin/orders.js b/app/frontend/src/javascript/controllers/admin/orders.js
new file mode 100644
index 000000000..ba2b00cce
--- /dev/null
+++ b/app/frontend/src/javascript/controllers/admin/orders.js
@@ -0,0 +1,52 @@
+/* eslint-disable
+    no-return-assign,
+    no-undef,
+*/
+'use strict';
+
+Application.Controllers.controller('AdminShowOrdersController', ['$rootScope', '$scope', 'CSRF', 'growl', '$state', '$transition$',
+  function ($rootScope, $scope, CSRF, growl, $state, $transition$) {
+    /* PRIVATE SCOPE */
+
+    /* PUBLIC SCOPE */
+    $scope.orderToken = $transition$.params().token;
+
+    /**
+     * Callback triggered in case of error
+     */
+    $scope.onError = (message) => {
+      growl.error(message);
+    };
+
+    /**
+     * Callback triggered in case of success
+     */
+    $scope.onSuccess = (message) => {
+      growl.success(message);
+    };
+
+    /**
+     * Click Callback triggered in case of back products list
+     */
+    $scope.backProductsList = () => {
+      $state.go('app.admin.store.orders');
+    };
+
+    // currently logged-in user
+    $scope.currentUser = $rootScope.currentUser;
+
+    /* PRIVATE SCOPE */
+
+    /**
+     * Kind of constructor: these actions will be realized first when the controller is loaded
+     */
+    const initialize = function () {
+      // set the authenticity tokens in the forms
+      CSRF.setMetaTags();
+    };
+
+    // init the controller (call at the end !)
+    return initialize();
+  }
+
+]);
diff --git a/app/frontend/src/javascript/controllers/orders.js b/app/frontend/src/javascript/controllers/orders.js
index 4cace0dd9..d4df174cd 100644
--- a/app/frontend/src/javascript/controllers/orders.js
+++ b/app/frontend/src/javascript/controllers/orders.js
@@ -29,7 +29,7 @@ Application.Controllers.controller('ShowOrdersController', ['$rootScope', '$scop
      * Click Callback triggered in case of back products list
      */
     $scope.backProductsList = () => {
-      $state.go('app.admin.store.orders');
+      $state.go('app.logged.dashboard.orders');
     };
 
     // currently logged-in user
diff --git a/app/frontend/src/javascript/router.js b/app/frontend/src/javascript/router.js
index 6cd676c76..8dc6ebf8a 100644
--- a/app/frontend/src/javascript/router.js
+++ b/app/frontend/src/javascript/router.js
@@ -930,7 +930,7 @@ angular.module('application.router', ['ui.router'])
         views: {
           'main@': {
             templateUrl: '/admin/orders/show.html',
-            controller: 'ShowOrdersController'
+            controller: 'AdminShowOrdersController'
           }
         }
       })
diff --git a/app/frontend/src/stylesheets/modules/store/order-item.scss b/app/frontend/src/stylesheets/modules/store/order-item.scss
index dc91b15bc..75b5a9201 100644
--- a/app/frontend/src/stylesheets/modules/store/order-item.scss
+++ b/app/frontend/src/stylesheets/modules/store/order-item.scss
@@ -35,6 +35,7 @@
   }
   .date { @include text-sm; }
   .price {
+    flex: 0 1 30%;
     display: flex;
     flex-direction: column;
     justify-self: flex-end;
diff --git a/app/frontend/templates/admin/orders/show.html b/app/frontend/templates/admin/orders/show.html
index eaf7f0feb..e2274ce0c 100644
--- a/app/frontend/templates/admin/orders/show.html
+++ b/app/frontend/templates/admin/orders/show.html
@@ -12,8 +12,8 @@
   <div class="show-order-nav">
     <a class="back-btn" ng-click="backProductsList()" tabindex="0">
       <i class="fas fa-angle-left"></i>
-      <span translate>{{ 'app.admin.store.back_products_list' }}</span>
+      <span translate>{{ 'app.admin.store.back_to_list' }}</span>
     </a>
   </div>
-  <show-order order-token="orderToken" on-error="onError" on-success="onSuccess" />
+  <show-order current-user="currentUser" order-ref="orderRef" on-error="onError" on-success="onSuccess" />
 </section>
\ No newline at end of file
diff --git a/app/frontend/templates/admin/store/product_edit.html b/app/frontend/templates/admin/store/product_edit.html
index 02e9df374..71d6c1f1d 100644
--- a/app/frontend/templates/admin/store/product_edit.html
+++ b/app/frontend/templates/admin/store/product_edit.html
@@ -12,7 +12,7 @@
   <div class="edit-product-nav">
     <a class="back-btn" ng-click="backProductsList()">
       <i class="fas fa-angle-left"></i>
-      <span translate>{{ 'app.admin.store.back_products_list' }}</span>
+      <span translate>{{ 'app.admin.store.back_to_list' }}</span>
     </a>
   </div>
   <edit-product product-id="productId" on-success="onSuccess" on-error="onError"/>
diff --git a/app/frontend/templates/admin/store/product_new.html b/app/frontend/templates/admin/store/product_new.html
index 1af8e51f6..e72a6b162 100644
--- a/app/frontend/templates/admin/store/product_new.html
+++ b/app/frontend/templates/admin/store/product_new.html
@@ -12,7 +12,7 @@
   <div class="new-product-nav">
     <a class="back-btn" ng-click="backProductsList()" tabindex="0">
       <i class="fas fa-angle-left"></i>
-      <span translate>{{ 'app.admin.store.back_products_list' }}</span>
+      <span translate>{{ 'app.admin.store.back_to_list' }}</span>
     </a>
   </div>
   <new-product on-success="onSuccess" on-error="onError"/>
diff --git a/app/frontend/templates/orders/show.html b/app/frontend/templates/orders/show.html
new file mode 100644
index 000000000..b6a3fe056
--- /dev/null
+++ b/app/frontend/templates/orders/show.html
@@ -0,0 +1,17 @@
+<div>
+  <section class="heading">
+    <div class="row no-gutter">
+      <ng-include src="'/dashboard/nav.html'"></ng-include>
+    </div>
+  </section>
+
+  <section>
+    <div class="show-order-nav">
+      <a class="back-btn" ng-click="backProductsList()" tabindex="0">
+        <i class="fas fa-angle-left"></i>
+        <span translate>{{ 'app.shared.store.show_order.back_to_list' }}</span>
+      </a>
+    </div>
+    <show-order current-user="currentUser" order-token="orderToken" on-error="onError" on-success="onSuccess" />
+  </section>
+</div>
\ No newline at end of file
diff --git a/config/locales/app.admin.en.yml b/config/locales/app.admin.en.yml
index cd5f9474c..100ff4db4 100644
--- a/config/locales/app.admin.en.yml
+++ b/config/locales/app.admin.en.yml
@@ -1899,7 +1899,7 @@ en:
         all_products: "All products"
         categories_of_store: "Store's categories"
         the_orders: "Orders"
-        back_products_list: "Back to products list"
+        back_to_list: "Back to list"
         product_categories:
           title: "Categories"
           info: "<strong>Information:</strong></br>Find below all the categories created. The categories are arranged on two levels maximum, you can arrange them with a drag and drop. The order of the categories will be identical on the public view and the list below. Please note that you can delete a category or a sub-category even if they are associated with products. The latter will be left without categories. If you delete a category that contains sub-categories, the latter will also be deleted. <strong>Make sure that your categories are well arranged and save your choice.</strong>"
@@ -2050,21 +2050,6 @@ en:
           sort:
             newest: "Newest first"
             oldest: "Oldest first"
-        show_order:
-          see_invoice: "See invoice"
-          client: "Client"
-          created_at: "Creation date"
-          last_update: "Last update"
-          cart: "Cart"
-          reference_short: "ref:"
-          unit: "Unit"
-          item_total: "Total"
-          payment_informations : "Payment informations"
-          amount: "Amount"
-          products_total: "Products total"
-          gift_total: "Discount total"
-          coupon: "Coupon"
-          cart_total: "Cart total"
       store_settings:
         title: 'Settings'
         withdrawal_instructions: 'Product withdrawal instructions'
diff --git a/config/locales/app.shared.en.yml b/config/locales/app.shared.en.yml
index 6042d68c3..b5709dcff 100644
--- a/config/locales/app.shared.en.yml
+++ b/config/locales/app.shared.en.yml
@@ -564,3 +564,29 @@ en:
         order_item:
             total: "Total"
             client: "Client"
+        show_order:
+          back_to_list: "Back to list"
+          see_invoice: "See invoice"
+          tracking: "Order tracking"
+          client: "Client"
+          created_at: "Creation date"
+          last_update: "Last update"
+          cart: "Cart"
+          reference_short: "ref:"
+          unit: "Unit"
+          item_total: "Total"
+          payment_informations : "Payment informations"
+          amount: "Amount"
+          products_total: "Products total"
+          gift_total: "Discount total"
+          coupon: "Coupon"
+          cart_total: "Cart total"
+          status:
+            error: "Payment error"
+            canceled: "Canceled"
+            pending: "Pending payment"
+            under_preparation: "Under preparation"
+            paid: "Paid"
+            ready: "Ready"
+            collected: "Collected"
+            refunded: "Refunded"