From 27a3bdc308a0763d8d28988e61439210158b05cc Mon Sep 17 00:00:00 2001
From: vincent <vincent@sleede.com>
Date: Thu, 1 Sep 2022 16:08:37 +0200
Subject: [PATCH] Admin orders (tmp)

---
 .../javascript/components/cart/store-cart.tsx |   2 +-
 .../components/store/order-item.tsx           |  40 +++++
 .../javascript/components/store/orders.tsx    | 111 ++++++++++---
 .../javascript/components/store/products.tsx  |   4 +-
 .../components/store/show-order.tsx           | 125 +++++++++++++++
 .../src/javascript/components/store/store.tsx |   4 +-
 .../src/javascript/controllers/orders.js      |  49 ++++++
 app/frontend/src/javascript/router.js         |  11 ++
 .../stylesheets/modules/cart/store-cart.scss  |  10 +-
 .../src/stylesheets/modules/store/orders.scss | 146 +++++++++++++++++-
 .../stylesheets/modules/store/products.scss   |   1 +
 app/frontend/templates/admin/orders/show.html |  19 +++
 app/frontend/templates/admin/store/index.html |  22 +--
 .../templates/admin/store/product_edit.html   |  22 +--
 .../templates/admin/store/product_new.html    |  24 ++-
 config/locales/app.admin.en.yml               |  16 ++
 config/locales/app.public.en.yml              |   5 +-
 17 files changed, 534 insertions(+), 77 deletions(-)
 create mode 100644 app/frontend/src/javascript/components/store/order-item.tsx
 create mode 100644 app/frontend/src/javascript/components/store/show-order.tsx
 create mode 100644 app/frontend/src/javascript/controllers/orders.js
 create mode 100644 app/frontend/templates/admin/orders/show.html

diff --git a/app/frontend/src/javascript/components/cart/store-cart.tsx b/app/frontend/src/javascript/components/cart/store-cart.tsx
index 163471d59..fac4abb2f 100644
--- a/app/frontend/src/javascript/components/cart/store-cart.tsx
+++ b/app/frontend/src/javascript/components/cart/store-cart.tsx
@@ -141,7 +141,7 @@ const StoreCart: React.FC<StoreCartProps> = ({ onSuccess, onError, currentUser,
               <img alt=''src={noImage} />
             </div>
             <div className="ref">
-              <span>ref: </span>
+              <span>{t('app.public.store_cart.reference_short')} </span>
               <p>{item.orderable_name}</p>
             </div>
             <div className="actions">
diff --git a/app/frontend/src/javascript/components/store/order-item.tsx b/app/frontend/src/javascript/components/store/order-item.tsx
new file mode 100644
index 000000000..ecf50222b
--- /dev/null
+++ b/app/frontend/src/javascript/components/store/order-item.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Order } from '../../models/order';
+import FormatLib from '../../lib/format';
+import { FabButton } from '../base/fab-button';
+
+interface OrderItemProps {
+  order?: Order
+  statusColor: string
+}
+
+/**
+ * List item for an order
+ */
+export const OrderItem: React.FC<OrderItemProps> = ({ order, statusColor }) => {
+  const { t } = useTranslation('admin');
+  /**
+   * Go to order page
+   */
+  const showOrder = (token: string) => {
+    window.location.href = `/#!/admin/store/o/${token}`;
+  };
+
+  return (
+    <div className='order-item'>
+      <p className="ref">order.token</p>
+      <span className={`order-status ${statusColor}`}>order.state</span>
+      <div className='client'>
+        <span>{t('app.admin.store.order_item.client')}</span>
+        <p>order.user.name</p>
+      </div>
+      <p className="date">order.created_at</p>
+      <div className='price'>
+        <span>{t('app.admin.store.order_item.total')}</span>
+        <p>{FormatLib.price(order?.total)}</p>
+      </div>
+      <FabButton onClick={() => showOrder('orderToken')} icon={<i className="fas fa-eye" />} className="is-black" />
+    </div>
+  );
+};
diff --git a/app/frontend/src/javascript/components/store/orders.tsx b/app/frontend/src/javascript/components/store/orders.tsx
index 45c0dc3e8..25d0a0ea3 100644
--- a/app/frontend/src/javascript/components/store/orders.tsx
+++ b/app/frontend/src/javascript/components/store/orders.tsx
@@ -7,6 +7,8 @@ import { IApplication } from '../../models/application';
 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';
 
 declare const Application: IApplication;
 
@@ -15,24 +17,15 @@ interface OrdersProps {
   onError: (message: string) => void,
 }
 /**
- * Option format, expected by react-select
- * @see https://github.com/JedWatson/react-select
- */
- type selectOption = { value: number, label: string };
- /**
- * Option format, expected by checklist
- */
+* Option format, expected by react-select
+* @see https://github.com/JedWatson/react-select
+*/
+type selectOption = { value: number, label: string };
+
+/**
+* Option format, expected by checklist
+*/
 type checklistOption = { value: number, label: string };
-const statusOptions: checklistOption[] = [
-  { value: 0, label: 'cart' },
-  { value: 1, label: 'paid by credit card' },
-  { value: 2, label: 'paid in cash' },
-  { value: 3, label: 'being processed' },
-  { value: 4, label: 'ready' },
-  { value: 5, label: 'delivered' },
-  { value: 6, label: 'canceled' },
-  { value: 7, label: 'refunded' }
-];
 
 /**
  * Admin list of orders
@@ -56,6 +49,17 @@ const Orders: React.FC<OrdersProps> = ({ onSuccess, onError }) => {
     console.log('Create new order');
   };
 
+  const statusOptions: checklistOption[] = [
+    { 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') }
+  ];
+
   /**
    * Apply filters
    */
@@ -101,6 +105,15 @@ const Orders: React.FC<OrdersProps> = ({ onSuccess, onError }) => {
     });
   };
 
+  /**
+   * Filter: by member
+   */
+  const handleSelectMember = (userId: number) => {
+    setFilters(draft => {
+      return { ...draft, memberId: userId };
+    });
+  };
+
   /**
    * Open/close accordion items
    */
@@ -108,13 +121,31 @@ const Orders: React.FC<OrdersProps> = ({ onSuccess, onError }) => {
     setAccordion({ ...accordion, [id]: state });
   };
 
+  /**
+   * Returns a className according to the status
+   */
+  const statusColor = (status: string) => {
+    switch (status) {
+      case 'error':
+        return 'error';
+      case 'canceled':
+        return 'canceled';
+      case 'pending' || 'under_preparation':
+        return 'pending';
+      default:
+        return 'normal';
+    }
+  };
+
   return (
     <div className='orders'>
       <header>
         <h2>{t('app.admin.store.orders.heading')}</h2>
-        <div className='grpBtn'>
-          <FabButton className="main-action-btn" onClick={newOrder}>{t('app.admin.store.orders.create_order')}</FabButton>
-        </div>
+        {false &&
+          <div className='grpBtn'>
+            <FabButton className="main-action-btn" onClick={newOrder}>{t('app.admin.store.orders.create_order')}</FabButton>
+          </div>
+        }
       </header>
 
       <div className="store-filters">
@@ -128,13 +159,25 @@ const Orders: React.FC<OrdersProps> = ({ onSuccess, onError }) => {
           <AccordionItem id={0}
             isOpen={accordion[0]}
             onChange={handleAccordion}
+            label={t('app.admin.store.orders.filter_ref')}
+          >
+            <div className='content'>
+              <div className="group">
+                <input type="text" />
+                <FabButton onClick={applyFilters} className="is-info">{t('app.admin.store.orders.filter_apply')}</FabButton>
+              </div>
+            </div>
+          </AccordionItem>
+          <AccordionItem id={1}
+            isOpen={accordion[1]}
+            onChange={handleAccordion}
             label={t('app.admin.store.orders.filter_status')}
           >
             <div className='content'>
-              <div className="list u-scrollbar">
+              <div className="group u-scrollbar">
                 {statusOptions.map(s => (
                   <label key={s.value}>
-                    <input type="checkbox" checked={filters.status.includes(s)} onChange={(event) => handleSelectStatus(s, event.target.checked)} />
+                    <input type="checkbox" checked={filters.status.some(o => o.label === s.label)} onChange={(event) => handleSelectStatus(s, event.target.checked)} />
                     <p>{s.label}</p>
                   </label>
                 ))}
@@ -142,6 +185,18 @@ const Orders: React.FC<OrdersProps> = ({ onSuccess, onError }) => {
               <FabButton onClick={applyFilters} className="is-info">{t('app.admin.store.orders.filter_apply')}</FabButton>
             </div>
           </AccordionItem>
+          <AccordionItem id={2}
+            isOpen={accordion[2]}
+            onChange={handleAccordion}
+            label={t('app.admin.store.orders.filter_client')}
+          >
+            <div className='content'>
+              <div className="group">
+                <MemberSelect noHeader onSelected={handleSelectMember} />
+                <FabButton onClick={applyFilters} className="is-info">{t('app.admin.store.orders.filter_apply')}</FabButton>
+              </div>
+            </div>
+          </AccordionItem>
         </div>
       </div>
 
@@ -151,6 +206,12 @@ const Orders: React.FC<OrdersProps> = ({ onSuccess, onError }) => {
           selectOptions={buildOptions()}
           onSelectOptionsChange={handleSorting}
         />
+        <div className="orders-list">
+          <OrderItem statusColor={statusColor('error')} />
+          <OrderItem statusColor={statusColor('canceled')} />
+          <OrderItem statusColor={statusColor('pending')} />
+          <OrderItem statusColor={statusColor('refunded')} />
+        </div>
       </div>
     </div>
   );
@@ -168,10 +229,12 @@ Application.Components.component('orders', react2angular(OrdersWrapper, ['onSucc
 
 interface Filters {
   reference: string,
-  status: checklistOption[]
+  status: checklistOption[],
+  memberId: number
 }
 
 const initFilters: Filters = {
   reference: '',
-  status: []
+  status: [],
+  memberId: null
 };
diff --git a/app/frontend/src/javascript/components/store/products.tsx b/app/frontend/src/javascript/components/store/products.tsx
index 19240f032..8c2da31fa 100644
--- a/app/frontend/src/javascript/components/store/products.tsx
+++ b/app/frontend/src/javascript/components/store/products.tsx
@@ -243,7 +243,7 @@ const Products: React.FC<ProductsProps> = ({ onSuccess, onError }) => {
             label={t('app.admin.store.products.filter_categories')}
           >
             <div className='content'>
-              <div className="list u-scrollbar">
+              <div className="group u-scrollbar">
                 {productCategories.map(pc => (
                   <label key={pc.id} className={pc.parent_id ? 'offset' : ''}>
                     <input type="checkbox" checked={filters.categories.includes(pc)} onChange={(event) => handleSelectCategory(pc, event.target.checked)} />
@@ -261,7 +261,7 @@ const Products: React.FC<ProductsProps> = ({ onSuccess, onError }) => {
             label={t('app.admin.store.products.filter_machines')}
           >
             <div className='content'>
-              <div className="list u-scrollbar">
+              <div className="group u-scrollbar">
                 {machines.map(m => (
                   <label key={m.value}>
                     <input type="checkbox" checked={filters.machines.includes(m)} onChange={(event) => handleSelectMachine(m, event.target.checked)} />
diff --git a/app/frontend/src/javascript/components/store/show-order.tsx b/app/frontend/src/javascript/components/store/show-order.tsx
new file mode 100644
index 000000000..b25e38707
--- /dev/null
+++ b/app/frontend/src/javascript/components/store/show-order.tsx
@@ -0,0 +1,125 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { IApplication } from '../../models/application';
+import { react2angular } from 'react2angular';
+import { Loader } from '../base/loader';
+import noImage from '../../../../images/no_image.png';
+
+declare const Application: IApplication;
+
+interface ShowOrderProps {
+  orderRef: string,
+  onError: (message: string) => void,
+  onSuccess: (message: string) => void
+}
+
+/**
+ * This component shows an order details
+ */
+export const ShowOrder: React.FC<ShowOrderProps> = ({ orderRef, onError, onSuccess }) => {
+  const { t } = useTranslation('admin');
+
+  /**
+   * Returns a className according to the status
+   */
+  const statusColor = (status: string) => {
+    switch (status) {
+      case 'error':
+        return 'error';
+      case 'canceled':
+        return 'canceled';
+      case 'pending' || 'under_preparation':
+        return 'pending';
+      default:
+        return 'normal';
+    }
+  };
+
+  return (
+    <div className='show-order'>
+      <header>
+        <h2>[order.ref]</h2>
+        <div className="grpBtn">
+          <a href={''}
+            target='_blank'
+            className='fab-button is-black'
+            rel='noreferrer'>
+            {t('app.admin.store.show_order.see_invoice')}
+          </a>
+        </div>
+      </header>
+
+      <div className="client-info">
+        <label>{t('app.admin.store.show_order.client')}</label>
+        <div className="content">
+          <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>
+            <p>order.created_at</p>
+          </div>
+          <div className='group'>
+            <span>{t('app.admin.store.show_order.last_update')}</span>
+            <p>order.???</p>
+          </div>
+          <span className={`order-status ${statusColor('error')}`}>order.state</span>
+        </div>
+      </div>
+
+      <div className="cart">
+        <label>{t('app.admin.store.show_order.cart')}</label>
+        <div>
+          {/* loop sur les articles du panier */}
+          <article className='store-cart-list-item'>
+            <div className='picture'>
+              <img alt=''src={noImage} />
+            </div>
+            <div className="ref">
+              <span>{t('app.admin.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>
+              </div>
+
+              <span className="count">o.quantity</span>
+
+              <div className='total'>
+                <span>{t('app.admin.store.show_order.item_total')}</span>
+                <p>o.quantity * o.amount</p>
+              </div>
+            </div>
+          </article>
+        </div>
+      </div>
+
+      <div className="group">
+        <div className="payment-info">
+          <label>{t('app.admin.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>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ShowOrderWrapper: React.FC<ShowOrderProps> = (props) => {
+  return (
+    <Loader>
+      <ShowOrder {...props} />
+    </Loader>
+  );
+};
+
+Application.Components.component('showOrder', react2angular(ShowOrderWrapper, ['orderRef', 'onError', 'onSuccess']));
diff --git a/app/frontend/src/javascript/components/store/store.tsx b/app/frontend/src/javascript/components/store/store.tsx
index 031f5c0fd..ca4dd12fd 100644
--- a/app/frontend/src/javascript/components/store/store.tsx
+++ b/app/frontend/src/javascript/components/store/store.tsx
@@ -164,7 +164,7 @@ const Store: React.FC<StoreProps> = ({ onError, currentUser }) => {
           <header>
             <h3>{t('app.public.store.products.filter_categories')}</h3>
           </header>
-          <div className="list u-scrollbar">
+          <div className="group u-scrollbar">
             {categoriesTree.map(c =>
               <div key={c.parent.id} className={`parent ${activeCategory?.id === c.parent.id || activeCategory?.parent === c.parent.id ? 'is-active' : ''}`}>
                 <p onClick={() => filterCategory(c.parent.id)}>
@@ -199,7 +199,7 @@ const Store: React.FC<StoreProps> = ({ onError, currentUser }) => {
               label={t('app.public.store.products.filter_machines')}
             >
               <div className='content'>
-                <div className="list u-scrollbar">
+                <div className="group u-scrollbar">
                   {machines.map(m => (
                     <label key={m.value}>
                       <input type="checkbox" />
diff --git a/app/frontend/src/javascript/controllers/orders.js b/app/frontend/src/javascript/controllers/orders.js
new file mode 100644
index 000000000..b6778948a
--- /dev/null
+++ b/app/frontend/src/javascript/controllers/orders.js
@@ -0,0 +1,49 @@
+/* eslint-disable
+    no-return-assign,
+    no-undef,
+*/
+'use strict';
+
+Application.Controllers.controller('ShowOrdersController', ['$scope', 'CSRF', 'growl', '$state', '$transition$',
+  function ($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');
+    };
+
+    /* 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/router.js b/app/frontend/src/javascript/router.js
index 75b5d5c1f..5796fdc0d 100644
--- a/app/frontend/src/javascript/router.js
+++ b/app/frontend/src/javascript/router.js
@@ -904,6 +904,17 @@ angular.module('application.router', ['ui.router'])
         }
       })
 
+      // show order
+      .state('app.admin.order_show', {
+        url: '/admin/store/o/:token',
+        views: {
+          'main@': {
+            templateUrl: '/admin/orders/show.html',
+            controller: 'ShowOrdersController'
+          }
+        }
+      })
+
       // invoices
       .state('app.admin.invoices', {
         url: '/admin/invoices',
diff --git a/app/frontend/src/stylesheets/modules/cart/store-cart.scss b/app/frontend/src/stylesheets/modules/cart/store-cart.scss
index 767708b75..58247baff 100644
--- a/app/frontend/src/stylesheets/modules/cart/store-cart.scss
+++ b/app/frontend/src/stylesheets/modules/cart/store-cart.scss
@@ -65,6 +65,14 @@
         }
         span { @include text-sm; }
       }
+      .count {
+        padding: 0.8rem 1.6rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: var(--gray-soft);
+        border-radius: var(--border-radius-sm);
+      }
       .total {
         span {
           @include text-sm;
@@ -100,8 +108,6 @@
   &-info {
     p { @include text-sm; }
   }
-  &-coupon {
-  }
 
   aside {
     grid-area: 1 / 10 / 3 / 13;
diff --git a/app/frontend/src/stylesheets/modules/store/orders.scss b/app/frontend/src/stylesheets/modules/store/orders.scss
index 223d5b550..16443137d 100644
--- a/app/frontend/src/stylesheets/modules/store/orders.scss
+++ b/app/frontend/src/stylesheets/modules/store/orders.scss
@@ -1,4 +1,5 @@
-.orders {
+.orders,
+.show-order {
   max-width: 1600px;
   margin: 0 auto;
   padding-bottom: 6rem;
@@ -11,4 +12,147 @@
     padding-bottom: 0;
     grid-column: 1 / -1;
   }
+
+  &-list {
+    & > *:not(:first-child) {
+      margin-top: 1.6rem;
+    }
+
+    .order-item {
+      width: 100%;
+      display: grid;
+      grid-auto-flow: column;
+      grid-template-columns: 1fr 15rem 15rem 10ch 12rem;
+      gap: 2.4rem;
+      justify-items: flex-start;
+      align-items: center;
+      padding: 1.6rem;
+      border: 1px solid var(--gray-soft-dark);
+      border-radius: var(--border-radius);
+      background-color: var(--gray-soft-lightest);
+
+      p { margin: 0; }
+      .ref {  @include text-base(600); }
+      .client {
+        span {
+          @include text-xs;
+          color: var(--gray-hard-light);
+        }
+        p { @include text-sm; }
+      }
+      .date { @include text-sm; }
+      .price {
+        justify-self: flex-end;
+        span {
+          @include text-xs;
+          color: var(--gray-hard-light);
+        }
+        p { @include text-base(600); }
+      }
+    }
+  }
+}
+
+.show-order {
+  &-nav { 
+    max-width: 1600px;
+    margin: 0 auto;
+    @include grid-col(12);
+    gap: 3.2rem;
+    justify-items: flex-start;
+    & > * {
+      grid-column: 2 / -2;
+    }
+  }
+  header { grid-column: 2 / -2; }
+  .client-info,
+  .cart {
+    grid-column: 2 / -2;
+    label {
+      margin-bottom: 1.6rem;
+      @include title-base;
+    }
+    .content {
+      display: flex;
+      align-items: center;
+      & > *:not(:last-child) {
+        margin-right: 2.4rem;
+        padding-right: 2.4rem;
+        border-right: 1px solid var(--gray-hard-dark);
+      }
+    }
+    p {
+      margin: 0;
+      line-height: 1.18;
+    }
+    .group {
+      span {
+        @include text-xs;
+        color: var(--gray-hard-light);
+      }
+    }
+  }
+
+  & > .group {
+    grid-column: 2 / -2;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 2.4rem;
+    align-items: flex-start;
+
+    .payment-info,
+    .amount {
+      padding: 2.4rem;
+      border: 1px solid var(--gray-soft);
+      border-radius: var(--border-radius);
+      label {
+        margin: 0 0 2.4rem;
+        padding: 0 0 0.8rem;
+        width: 100%;
+        border-bottom: 1px solid var(--gray-hard);
+        @include title-base;
+      }
+    }
+    .amount {
+      p {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        span { @include title-base; }
+      }
+      .gift { color: var(--information); }
+      .total {
+        padding: 1.6rem 0 0;
+        align-items: flex-start;
+        border-top: 1px solid var(--main);
+        @include text-base(600);
+        span { @include title-lg; }
+      }
+    }
+  }
+}
+
+.order-status {
+  --status-color: var(--success);
+  &.error { --status-color: var(--alert); }
+  &.canceled { --status-color: var(--alert-light); }
+  &.pending { --status-color: var(--information); }
+  &.normal { --status-color: var(--success); }
+  padding: 0.4rem 0.8rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--gray-soft-light);
+  border-radius: var(--border-radius);
+  @include text-sm(500);
+  line-height: 1.714;
+
+  &::before {
+    content: "";
+    margin-right: 0.8rem;
+    width: 1rem;
+    height: 1rem;
+    background-color: var(--status-color);
+    border-radius: 50%;
+  }
 }
\ No newline at end of file
diff --git a/app/frontend/src/stylesheets/modules/store/products.scss b/app/frontend/src/stylesheets/modules/store/products.scss
index 38db7bd46..d5cff3ce1 100644
--- a/app/frontend/src/stylesheets/modules/store/products.scss
+++ b/app/frontend/src/stylesheets/modules/store/products.scss
@@ -22,6 +22,7 @@
     max-width: 1600px;
     margin: 0 auto;
     @include grid-col(12);
+    gap: 3.2rem;
     justify-items: flex-start;
     & > * {
       grid-column: 2 / -2;
diff --git a/app/frontend/templates/admin/orders/show.html b/app/frontend/templates/admin/orders/show.html
new file mode 100644
index 000000000..eaf7f0feb
--- /dev/null
+++ b/app/frontend/templates/admin/orders/show.html
@@ -0,0 +1,19 @@
+<div class="header-page">
+  <div class="back">
+    <a ng-click="backPrevLocation($event)"><i class="fas fa-long-arrow-alt-left "></i></a>
+  </div>
+
+  <div class="center">
+    <h1 translate>{{ 'app.admin.store.manage_the_store' }}</h1>
+  </div>
+</div>
+
+<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.admin.store.back_products_list' }}</span>
+    </a>
+  </div>
+  <show-order order-token="orderToken" on-error="onError" on-success="onSuccess" />
+</section>
\ No newline at end of file
diff --git a/app/frontend/templates/admin/store/index.html b/app/frontend/templates/admin/store/index.html
index 745b51c57..d13802c80 100644
--- a/app/frontend/templates/admin/store/index.html
+++ b/app/frontend/templates/admin/store/index.html
@@ -1,18 +1,12 @@
-<section class="heading b-b">
-  <div class="row no-gutter">
-    <div class="col-xs-2 col-sm-2 col-md-1">
-      <section class="heading-btn">
-        <a ng-click="backPrevLocation($event)"><i class="fas fa-long-arrow-alt-left "></i></a>
-      </section>
-    </div>
-    <div class="col-xs-10 col-sm-10 col-md-8 b-l">
-      <section class="heading-title">
-        <h1 translate>{{ 'app.admin.store.manage_the_store' }}</h1>
-      </section>
-    </div>
-
+<div class="header-page">
+  <div class="back">
+    <a ng-click="backPrevLocation($event)"><i class="fas fa-long-arrow-alt-left "></i></a>
   </div>
-</section>
+
+  <div class="center">
+    <h1 translate>{{ 'app.admin.store.manage_the_store' }}</h1>
+  </div>
+</div>
 
 <section class="m-lg admin-store-manage">
   <div class="row">
diff --git a/app/frontend/templates/admin/store/product_edit.html b/app/frontend/templates/admin/store/product_edit.html
index 8f4318026..02e9df374 100644
--- a/app/frontend/templates/admin/store/product_edit.html
+++ b/app/frontend/templates/admin/store/product_edit.html
@@ -1,18 +1,12 @@
-<section class="heading b-b">
-  <div class="row no-gutter">
-    <div class="col-xs-2 col-sm-2 col-md-1">
-      <section class="heading-btn">
-        <a ng-click="backPrevLocation($event)"><i class="fas fa-long-arrow-alt-left "></i></a>
-      </section>
-    </div>
-    <div class="col-xs-10 col-sm-10 col-md-8 b-l">
-      <section class="heading-title">
-        <h1 translate>{{ 'app.admin.store.manage_the_store' }}</h1>
-      </section>
-    </div>
-
+<div class="header-page">
+  <div class="back">
+    <a ng-click="backPrevLocation($event)"><i class="fas fa-long-arrow-alt-left "></i></a>
   </div>
-</section>
+
+  <div class="center">
+    <h1 translate>{{ 'app.admin.store.manage_the_store' }}</h1>
+  </div>
+</div>
 
 <section class="admin-store-manage">
   <div class="edit-product-nav">
diff --git a/app/frontend/templates/admin/store/product_new.html b/app/frontend/templates/admin/store/product_new.html
index 40d3c5b6b..1af8e51f6 100644
--- a/app/frontend/templates/admin/store/product_new.html
+++ b/app/frontend/templates/admin/store/product_new.html
@@ -1,20 +1,14 @@
-<section class="heading b-b">
-  <div class="row no-gutter">
-    <div class="col-xs-2 col-sm-2 col-md-1">
-      <section class="heading-btn">
-        <a ng-click="backPrevLocation($event)"><i class="fas fa-long-arrow-alt-left "></i></a>
-      </section>
-    </div>
-    <div class="col-xs-10 col-sm-10 col-md-8 b-l">
-      <section class="heading-title">
-        <h1 translate>{{ 'app.admin.store.manage_the_store' }}</h1>
-      </section>
-    </div>
-
+<div class="header-page">
+  <div class="back">
+    <a ng-click="backPrevLocation($event)"><i class="fas fa-long-arrow-alt-left "></i></a>
   </div>
-</section>
 
-<section class="admin-store-manage">
+  <div class="center">
+    <h1 translate>{{ 'app.admin.store.manage_the_store' }}</h1>
+  </div>
+</div>
+
+<section>
   <div class="new-product-nav">
     <a class="back-btn" ng-click="backProductsList()" tabindex="0">
       <i class="fas fa-angle-left"></i>
diff --git a/config/locales/app.admin.en.yml b/config/locales/app.admin.en.yml
index 6fc821f07..46c57e89b 100644
--- a/config/locales/app.admin.en.yml
+++ b/config/locales/app.admin.en.yml
@@ -2011,3 +2011,19 @@ en:
         order_item:
           total: "Total"
           client: "Client"
+        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"
+
diff --git a/config/locales/app.public.en.yml b/config/locales/app.public.en.yml
index 4c8eef16d..5c1a49f70 100644
--- a/config/locales/app.public.en.yml
+++ b/config/locales/app.public.en.yml
@@ -417,14 +417,15 @@ en:
         checkout: "Checkout"
         cart_is_empty: "Your cart is empty"
         pickup: "Pickup your products"
+        reference_short: "ref:"
         unit: "Unit"
         total: "Total"
         checkout_header: "Total amount for your cart"
         checkout_products_COUNT: "Your cart contains {COUNT} {COUNT, plural, =1{product} other{products}}"
-        checkout_products_total: "Product total"
+        checkout_products_total: "Products total"
         checkout_gift_total: "Discount total"
         checkout_coupon: "Coupon"
-        checkout_total: "Total amount"
+        checkout_total: "Cart total"
         checkout_error: "An unexpected error occurred. Please contact the administrator."
         checkout_success: "Purchase confirmed. Thanks!"
       member_select: