Order checkout

back/common/models/item.js

@@ -1,6 +1,50 @@
 const warehouseIds = [1, 44];
 
 module.exports = Self => {
+    Self.remoteMethod('calcCatalog', {
+        description: 'Get the available and prices list for an item',
+        accessType: 'READ',
+        accepts: [
+            {
+                arg: 'id',
+                type: 'Number',
+                description: 'The item id'
+            }, {
+                arg: 'dated',
+                type: 'Date',
+                description: 'The date'
+            }, {
+                arg: 'addressFk',
+                type: 'Number',
+                description: 'The address id'
+            }, {
+                arg: 'agencyModeFk',
+                type: 'Number',
+                description: 'The agency id'
+            }
+        ],
+        returns: {
+            type: ['Object'],
+            description: 'The item available and prices list',
+            root: true,
+        },
+        http: {
+            path: `/:id/calcCatalog`,
+            verb: 'GET'
+        }
+    });
+
+    Self.calcCatalog = (id, dated, addressFk, agencyModeFk, cb) => {
+        Self.dataSource.connector.query(
+            `CALL hedera.item_calcCatalog(?, ?, ?, ?)`,
+            [id, dated, addressFk, agencyModeFk],
+            (err, res) => {
+                if (err) return cb(err)
+                return cb(null, res[0])
+            }
+        );
+    };
+
     Self.remoteMethod('catalog', {
         description: 'Get the catalog',
         accessType: 'READ',

back/common/models/order-row.json

@@ -3,7 +3,7 @@
     "base": "PersistedModel",
     "options": {
         "mysql": {
-        "table": "hedera.orderRow"
+            "table": "hedera.orderRow"
         }
     },
     "properties": {

back/common/models/order.json

@@ -3,7 +3,7 @@
     "base": "PersistedModel",
     "options": {
         "mysql": {
-        "table": "hedera.order"
+            "table": "hedera.order"
         }
     },
     "properties": {
@@ -79,9 +79,23 @@
             "mysql": {
                 "columnName": "confirm_date"
             }
+        },
+        "taxableBase": {
+            "type": "Number"
+        },
+        "tax": {
+            "type": "Number"
+        },
+        "total": {
+            "type": "Number"
         }
     },
     "relations": {
+        "rows": {
+          "type": "hasMany",
+          "model": "OrderRow",
+          "foreignKey": "orderFk"
+        },
         "agencyMode": {
             "type": "belongsTo",
             "model": "AgencyMode",
@@ -101,11 +115,6 @@
             "type": "belongsTo",
             "model": "DeliveryMethod",
             "foreignKey": "delivery_method_id"
-        },
-        "rows": {
-            "type": "hasMany",
-            "model": "OrderRow",
-            "foreignKey": "orderFk"
         }
     }
 }

quasar.conf.js

@@ -52,6 +52,7 @@ module.exports = function (ctx) {
         'QItemLabel',
         'QList',
         'QLayout',
+        'QMarkupTable',
         'QPageContainer',
         'QPage',
         'QPageSticky',
@@ -79,8 +80,8 @@ module.exports = function (ctx) {
         'ClosePopup'
       ],
 
-      // Quasar plugins
       plugins: [
+        'Dialog',
         'Notify'
       ]
 

src/boot/filters.js

@@ -6,7 +6,7 @@ export default async ({ app, Vue }) => {
   let i18n = app.i18n
 
   function currency (val) {
-    return val ? val.toFixed(2) + '€' : val
+    return typeof val === 'number' ? val.toFixed(2) + '€' : val
   }
 
   function date (val, format) {

src/boot/state.js

@@ -9,7 +9,11 @@ export default async ({ app, Vue }) => {
     title: null,
     subtitle: null,
     useRightDrawer: false,
-    rightDrawerOpen: true
+    rightDrawerOpen: true,
+    catalogConfig: {
+      agencyModeFk: 2,
+      addressFk: 1823
+    }
   })
   Vue.prototype.$state = state
 }

src/components/LbScroll.vue

@@ -115,7 +115,7 @@ export default {
         params.filter = filter
         limit = filter.limit
 
-        if (!limit) {
+        if (limit === undefined) {
           limit = this.index * 30
           filter.limit = limit
         }
@@ -149,7 +149,7 @@ export default {
       this.doRequest()
         .then(res => {
           if (!res) return done(true)
-          done(!res.limit || res.data.length < res.limit)
+          done(!res.limit || !Array.isArray(res.data) || res.data.length < res.limit)
           return res
         })
         .catch(err => {

src/i18n/en-us/index.js

@@ -1,9 +1,5 @@
 export default {
-  // Login
+  // global
-  enter: 'Enter',
-  email: 'E-Mail',
-  password: 'Password',
-  remember: 'Don not close session',
   search: 'Search',
   accept: 'Accept',
   cancel: 'Cancel',
@@ -22,6 +18,7 @@ export default {
   createdSuccess: 'Item created successfully',
   fieldIsRequired: 'Field is required',
   setSearchFilter: 'Please, set a search filter',
+  id: 'Id',
   today: 'Today',
   yesterday: 'Yesterday',
   tomorrow: 'Tomorrow',
@@ -81,7 +78,13 @@ export default {
   logout: 'Logout',
   visitor: 'Visitor',
 
-  // Menu
+  // login
+  enter: 'Enter',
+  email: 'E-Mail',
+  password: 'Password',
+  remember: 'Don not close session',
+
+  // menu
   home: 'Home',
   catalog: 'Catalog',
   orders: 'Orders',
@@ -104,7 +107,7 @@ export default {
   addressEdit: 'Edit address',
   register: 'Register',
 
-  // Home
+  // home
   recentNews: 'Recent news',
   startOrder: 'Start order',
 
@@ -123,7 +126,7 @@ export default {
   n1InPrice: 'Nº1 in price',
   ourBigVolumeAllows: 'our big volume allows us to offer the best prices',
 
-  // Catalog
+  // catalog
   more: 'More',
   noItemsFound: 'No items found',
   pleaseSetFilter: 'Please, set a filter using the right menu',
@@ -146,21 +149,60 @@ export default {
   siceAsc: 'Ascending size',
   sizeDesc: 'Descencing size',
 
-  // Orders
+  // orders
-  ordersMadeAt: 'Orders made at',
-  pendingConfirmtion: 'Pending confirmation',
-  noOrdersFound: 'No orders found',
   pending: 'Pending',
   confirmed: 'Confirmed',
+
+  // orders
+  pendingConfirmtion: 'Pending confirmation',
+  noOrdersFound: 'No orders found',
+
+  // orders
+  ordersMadeAt: 'Orders made at',
   packages: '{n} packages',
 
-  // Conditions
+  // order
+  total: 'Total',
+  confirm: 'Confirm',
+  delivery: 'Delivery date',
+  address: 'Address',
+  agency: 'Agency',
+  warehouse: 'Warehouse',
+  configure: 'Configure',
+
+  // order/checkout
+  checkout: 'Checkout',
+  orderSummary: 'Order summary',
+  accountsSummary: 'Accounts summary',
+  previousBalance: 'Previous balance',
+  orderTotal: 'Order total',
+  vat: 'VAT',
+  totalDebt: 'Total debt',
+  credit: 'Credit',
+  exceededCredit: 'Exceeded credit',
+  payAmount: 'Amount to pay',
+  payMethod: 'Pay method',
+  useMyBalance: 'Use my balance',
+  youHaveFaborableBalance: 'You do not need to perform any payment, you have a favorable balance.',
+  useMyCredit: 'Use my credit',
+  youHaveFaborableCredit: 'You do not need to pay now, you have a favorable credit.',
+  creditCard: 'Credit card',
+  youWillRedirectToPayment: 'By confirming the order you will be redirected to the payment platform.',
+  bankTransfer: 'Bank Transfer',
+  makeTransfer: 'Make a transfer to the following account and send the receipt to your salesperson.',
+  payLater: 'Pay later',
+  doYouWantToConfirm: 'Do you want to confirm the order?',
+  orderConfirmedSuccessfully: 'Your order has been confirmed successfully',
+  youExceededCredit: 'You have exceeded your credit, in order to prepare your order please pay your debt.',
+  notes: 'Notes',
+
+  // conditions
   conditionsDesc: 'The order will arrive to your home in 24/48 hours depending on which area you are.',
 
-  // About
+  // about
   aboutDesc: 'Verdnatura offers all services for your florist.',
 
-  // Connections
+  // connections
   nConnections: '{0} connections',
   refreshRate: 'Refresh rate',
   lastAction: 'Last actions',
@@ -168,27 +210,27 @@ export default {
   nSeconds: '{0} seconds',
   dontRefresh: 'Do not refresh',
 
-  // Visits
+  // accessLog
+  accessLog: 'Access log',
+
+  // visits
   visitsCount: '{0} visits, {1} new',
 
-  // New
+  // new
   title: 'Title',
   image: 'Image',
   tag: 'Tag',
   priority: 'Priority',
   text: 'Text',
 
-  // Images
+  // images
   collection: 'Collection',
   updateMatchingId: 'Update items with matching id',
   uploadAutomatically: 'Upload automatically',
   imagesUploadSuccess: 'Images uploaded successfully',
   imagesUploadFailed: 'Some images could not be uploaded',
 
-  // User
+  // user
-  accessLog: 'Access log',
-
-  // Config
   userName: 'Username',
   nickname: 'Nickname',
   language: 'Language',
@@ -207,14 +249,14 @@ export default {
   passwordsDontMatch: 'Passwords do not match',
   passwordChanged: 'Password changed successfully!',
 
-  // Addresses
+  // addresses
   setAsDefault: 'Set as default',
   addressSetAsDefault: 'Address set as default',
   addressRemoved: 'Address removed',
   areYouSureDeleteAddress: 'Are you sure you want to delete the address?',
   addressCreated: 'Address created successfully!',
 
-  // Address
+  // address
   consignatary: 'Consignatary',
   street: 'Street',
   city: 'City',
@@ -224,7 +266,7 @@ export default {
   phone: 'Phone',
   mobile: 'Mobile',
 
-  // Register
+  // register
   registerAsNew: 'Registrarse como nuevo usuario',
   notYetUser: 'You are not yet a user, register now and start enjoying everything that Verdnatura offers you.',
   receiveOffers: 'Receive offers and promotions by e-mail',

src/i18n/es-es/index.js

@@ -1,9 +1,5 @@
 export default {
-  // Login
+  // global
-  enter: 'Entrar',
-  email: 'Correo electrónico',
-  password: 'Contraseña',
-  remember: 'No cerrar sesión',
   search: 'Buscar',
   accept: 'Aceptar',
   cancel: 'Cancelar',
@@ -22,6 +18,7 @@ export default {
   createdSuccess: 'Elemento creado correctamente',
   fieldIsRequired: 'Campo requerido',
   setSearchFilter: 'Por favor, establece un filtro de búsqueda',
+  id: 'Id',
   today: 'Hoy',
   yesterday: 'Ayer',
   tomorrow: 'Mañana',
@@ -76,12 +73,18 @@ export default {
     ]
   },
 
-  // Layout
+  // layout
   login: 'Iniciar sesión',
   logout: 'Cerrar sesión',
   visitor: 'Visitante',
 
-  // Menu
+  // login
+  enter: 'Entrar',
+  email: 'Correo electrónico',
+  password: 'Contraseña',
+  remember: 'No cerrar sesión',
+
+  // menu
   home: 'Inicio',
   catalog: 'Catálogo',
   orders: 'Pedidos',
@@ -104,7 +107,7 @@ export default {
   addressEdit: 'Editar dirección',
   register: 'Registrarse',
 
-  // Home
+  // home
   recentNews: 'Noticias recientes',
   startOrder: 'Empezar pedido',
 
@@ -123,7 +126,7 @@ export default {
   n1InPrice: 'Nº1 en precio',
   ourBigVolumeAllows: 'Nuestro gran volumen nos permite ofrecerte los mejores precios',
 
-  // Catalog
+  // catalog
   more: 'Más',
   noItemsFound: 'No se han encontrado artículos',
   pleaseSetFilter: 'Por favor, establece un filtro usando el menú de la derecha',
@@ -146,21 +149,60 @@ export default {
   siceAsc: 'Medida ascendente',
   sizeDesc: 'Medida descendente',
 
-  // Orders
+  // orders
-  ordersMadeAt: 'Pedidos realizados en',
-  pendingConfirmtion: 'Pendientes de confirmar',
-  noOrdersFound: 'No se han encontrado pedidos',
   pending: 'Pendientes',
   confirmed: 'Confirmados',
+
+  // orders/pending
+  pendingConfirmtion: 'Pendientes de confirmar',
+  noOrdersFound: 'No se han encontrado pedidos',
+
+  // orders/confirmed
+  ordersMadeAt: 'Pedidos realizados en',
   packages: '{n} bultos',
 
-  // Conditions
+  // order
+  total: 'Total',
+  confirm: 'Confirmar',
+  delivery: 'Fecha de entrega',
+  address: 'Dirección',
+  agency: 'Agencia',
+  warehouse: 'Almacén',
+  configure: 'Configurar',
+
+  // order/checkout
+  checkout: 'Finalizar pedido',
+  orderSummary: 'Resumen del pedido',
+  accountsSummary: 'Resumen de cuentas',
+  previousBalance: 'Saldo anterior',
+  orderTotal: 'Total pedido',
+  vat: 'IVA',
+  totalDebt: 'Total deuda',
+  credit: 'Crédito',
+  exceededCredit: 'Crédito excedido',
+  payAmount: 'Cantidad a pagar',
+  payMethod: 'Método de pago',
+  useMyBalance: 'Usar mi saldo',
+  youHaveFaborableBalance: 'No necesitas pagar nada, tienes un saldo favorable.',
+  useMyCredit: 'Usar mi crédito',
+  youHaveFaborableCredit: 'No necesitas pagar nada, tienes crédito favorable.',
+  creditCard: 'Tarjeta de crédito',
+  youWillRedirectToPayment: 'Al confirmar el pedido serás redirigido a la plataforma de pago.',
+  bankTransfer: 'Transferencia bancaria',
+  makeTransfer: 'Haz una transferecia a la siguiente cuenta y enví­a el justificante a tu comercial.',
+  payLater: 'Pagar más tarde',
+  doYouWantToConfirm: '¿Deseas confirmar el pedido?',
+  orderConfirmedSuccessfully: 'Tu pedido ha sido realizado con éxito',
+  youExceededCredit: 'Has excedido tu crédito, por favor realiza el pago para que podamos preparar tu pedido.',
+  notes: 'Notas',
+
+  // conditions
   conditionsDesc: 'Te aseguramos que el pedido llegara a tu casa/tienda en menos de 24/48 horas (Dependiendo de en que zona te encuentres).',
 
-  // About
+  // about
   aboutDesc: 'Verdnatura te ofrece todos los servicios que necesita tu floristería.',
 
-  // Connections
+  // connections
   nConnections: '{0} connexiones',
   refreshRate: 'Frecuencia de actualización',
   lastAction: 'Última acción',
@@ -168,27 +210,27 @@ export default {
   nSeconds: '{0} segundos',
   dontRefresh: 'No refrescar',
 
-  // Visits
+  // accessLog
+  accessLog: 'Registro de accesos',
+
+  // visits
   visitsCount: '{0} visitas, {1} nuevas',
 
-  // New
+  // new
   title: 'Título',
   image: 'Imagen',
   tag: 'Etiqueta',
   priority: 'Prioridad',
   text: 'Texto',
 
-  // Images
+  // images
   collection: 'Colección',
   updateMatchingId: 'Actualizar ítems con id coincidente',
   uploadAutomatically: 'Subir automáticamente',
   imagesUploadSuccess: 'Imágenes subidas correctamente',
   imagesUploadFailed: 'Algunas imágenes no se ha podido subir',
 
-  // User
+  // user
-  accessLog: 'Registro de accesos',
-
-  // Config
   userName: 'Nombre de usuario',
   nickname: 'Nombre a mostrar',
   language: 'Idioma',
@@ -207,14 +249,14 @@ export default {
   passwordsDontMatch: 'Las contraseñas no coinciden',
   passwordChanged: '¡Contraseña modificada correctamente!',
 
-  // Addresses
+  // addresses
   setAsDefault: 'Establecer como predeterminada',
   addressSetAsDefault: 'Dirección establecida como predeterminada',
   addressRemoved: 'Dirección eliminada',
   areYouSureDeleteAddress: '¿Seguro que quieres eliminar la dirección?',
   addressCreated: '¡Dirección creada correctamente!',
 
-  // Address
+  // address
   consignatary: 'Consignatario',
   street: 'Dirección',
   city: 'City',
@@ -224,7 +266,7 @@ export default {
   phone: 'Teléfono',
   mobile: 'Móvil',
 
-  // Register
+  // register
   registerAsNew: 'Registrarse como nuevo usuario',
   notYetUser: '¿Todavía no eres usuari@?, registrate y empieza a disfrutar de todo lo que Verdnatura puede ofrecerte.',
   receiveOffers: 'Recibir ofertas y promociones por correo electrónico',

src/pages/About.vue

@@ -8,9 +8,6 @@
   </div>
 </template>
 
-<style lang="stylus" scoped>
-</style>
-
 <script>
 export default {
   name: 'About'

src/pages/Catalog.vue

@@ -199,6 +199,7 @@
             <q-btn
               icon="add_shopping_cart"
               :title="$t('buy')"
+              @click="showItem(item)"
               flat>
             </q-btn>
           </q-card-actions>
@@ -210,14 +211,51 @@
         </div>
       </template>
     </q-infinite-scroll>
+    <q-dialog v-model="showItemDialog">
+      <q-card style="width: 25em;">
+        <q-img
+          :src="`${$imageBase}/catalog/200x200/${item.image}`"
+          :ratio="5/3">
+          <div class="absolute-bottom text-center q-pa-xs">
+            <div class="text-subtitle1">
+              {{item.longName}}
+            </div>
+          </div>
+        </q-img>
+        <q-card-section>
+          <div class="text-uppercase text-subtitle1 text-grey-7 ellipsize">
+            {{item.subName}}
+          </div>
+          <div class="text-grey-7">
+             #{{item.id}}
+          </div>
+        </q-card-section>
+        <q-card-section>
+          <div v-for="tag in item.tags" :key="tag.tagFk">
+            <span class="text-grey-7">{{tag.tag.name}}</span> {{tag.value}}
+          </div>
+        </q-card-section>
+        <q-card-actions align="right">
+          <q-btn
+            @click="showItemDialog = false"
+            flat>
+            {{$t('cancel')}}
+          </q-btn>
+          <q-btn
+            @click="showItemDialog = false"
+            flat>
+            {{$t('accept')}}
+          </q-btn>
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
     <q-page-sticky position="bottom-right" :offset="[18, 18]">
       <q-btn
         fab
         icon="shopping_basket"
         color="accent"
         :to="{name: 'orders'}"
-        :title="$t('orders')"
+        :title="$t('orders')"/>
-      />
     </q-page-sticky>
   </div>
 </template>
@@ -279,6 +317,8 @@ export default {
       typeId: null,
       types: [],
       orgTypes: [],
+      item: {},
+      showItemDialog: false,
       tags: [],
       isLoading: false,
       items: null,
@@ -537,6 +577,19 @@ export default {
             type.name.toLowerCase().indexOf(needle) > -1)
         })
       }
+    },
+    showItem (item) {
+      this.item = item
+      this.showItemDialog = true
+
+      let conf = this.$state.catalogConfig
+      let params = {
+        dated: this.date,
+        addressFk: conf.addressFk,
+        agencyModeFk: conf.agencyModeFk
+      }
+      this.$axios.get(`Items/${item.id}/calcCatalog`, { params })
+        .then(res => (this.lots = res.data))
     }
   }
 }

src/pages/Order.vue

@@ -1,14 +1,95 @@
 <template>
-  <div class="text-subtitle1 text-center text-grey-7 q-pa-lg">
+  <div>
-    Sorry this section is under construction
+    <router-view></router-view>
+    <q-drawer
+      v-model="$state.rightDrawerOpen"
+      side="right"
+      elevated>
+      <div
+        v-if="order"
+        class="q-pa-md">
+        <q-input
+          :label="$t('id')"
+          :value="order.id"
+          readonly/>
+        <q-input
+          :label="$t('delivery')"
+          :value="order.landed | relDate"
+          readonly/>
+        <q-input
+          v-if="order.address"
+          :label="$t('address')"
+          :value="order.address.nickname"
+          readonly/>
+        <q-input
+          v-if="order.agencyMode"
+          :label="$t('agency')"
+          :value="order.agencyMode.name"
+          readonly/>
+        <q-input
+          v-model="notes"
+          :label="$t('notes')"
+          type="textarea"/>
+        <q-btn
+          :label="$t('configure')"
+          color="primary"
+          class="q-mt-md"
+          style="width: 100%;"
+          flat/>
+      </div>
+    </q-drawer>
   </div>
 </template>
 
-<style lang="stylus" scoped>
-</style>
-
 <script>
+import Page from 'components/Page'
+
 export default {
-  name: 'Order'
+  name: 'Order',
+  mixins: [Page],
+  data () {
+    return {
+      order: {},
+      notes: null
+    }
+  },
+  created () {
+    this.$state.useRightDrawer = true
+  },
+  beforeRouteUpdate (to, from, next) {
+    next()
+    this.reload()
+  },
+  mounted () {
+    this.reload()
+  },
+  methods: {
+    reload () {
+      let filter = {
+        fields: [
+          'id',
+          'landed',
+          'addressFk',
+          'agencyModeFk'
+        ],
+        include: [
+          {
+            relation: 'address',
+            scope: {
+              fields: ['nickname']
+            }
+          }, {
+            relation: 'agencyMode',
+            scope: {
+              fields: ['name']
+            }
+          }
+        ]
+      }
+
+      this.$axios.get(`Orders/${this.$route.params.id}`, { params: { filter } })
+        .then(res => (this.order = res.data))
+    }
+  }
 }
 </script>

src/pages/OrderCheckout.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="vn-pp row justify-center">
+    <q-card class="vn-w-md">
+      <q-card-section>
+        <div class="text-h6">{{$t('accountsSummary')}}</div>
+        <q-markup-table
+          class="q-ma-sm"
+          separator="vertical"
+          bordered
+          flat>
+          <tbody>
+            <tr>
+              <td>{{$t('previousBalance')}}</td>
+              <td class="text-right">{{data.debt | currency}}</td>
+            </tr>
+          </tbody>
+          <tbody
+            class="border">
+            <tr>
+              <td>{{$t('orderTotal')}}</td>
+              <td class="text-right">{{data.total | currency}}</td>
+            </tr>
+            <tr>
+              <td>{{$t('vat')}}</td>
+              <td class="text-right">{{data.vat | currency}}</td>
+            </tr>
+          </tbody>
+          <tbody
+            class="border">
+            <tr class="text-bold">
+              <td class="text-left">{{$t('totalDebt')}}</td>
+              <td class="text-right">{{totalDebt | currency}}</td>
+            </tr>
+            <tr v-if="hasCredit">
+              <td class="text-left">{{$t('credit')}}</td>
+              <td class="text-right">{{data.credit | currency}}</td>
+            </tr>
+          </tbody>
+          <tbody
+            class="border"
+            v-if="isCreditExceeded">
+            <tr class="text-red text-bold">
+              <td class="text-left">{{$t('exceededCredit')}}</td>
+              <td class="text-right">{{execeededCredit | currency}}</td>
+            </tr>
+          </tbody>
+        </q-markup-table>
+      </q-card-section>
+      <q-card-section>
+        <div class="text-h6">{{$t('payMethod')}}</div>
+        <div v-if="!hasDebt">
+          <q-radio
+            v-model="payMethod"
+            val="balance"
+            :label="$t('useMyBalance')"/>
+          <div
+            v-if="payMethod == 'balance'"
+            class="method-desc">
+            {{$t('youHaveFaborableBalance')}}
+          </div>
+        </div>
+        <div v-if="canUseCredit">
+          <q-radio
+            v-model="payMethod"
+            val="credit"
+            :label="$t('useMyCredit')"/>
+          <div
+            v-if="payMethod == 'credit'"
+            class="method-desc">
+            {{$t('youHaveFaborableCredit')}}
+          </div>
+        </div>
+        <div>
+          <q-radio
+            v-model="payMethod"
+            val="card"
+            :label="$t('creditCard')"/>
+          <div
+            v-if="payMethod == 'card'"
+            class="method-desc">
+            {{$t('youWillRedirectToPayment')}}
+          </div>
+        </div>
+        <div>
+          <q-radio
+            v-model="payMethod"
+            val="transfer"
+            :label="$t('bankTransfer')"/>
+          <div
+            v-if="payMethod == 'transfer'"
+            class="method-desc">
+            <div>
+              {{$t('makeTransfer')}}
+            </div>
+            <div class="q-mt-sm">
+              {{bankName}}
+            </div>
+            <div>
+              {{bankAccount}}
+            </div>
+          </div>
+        </div>
+        <div>
+          <q-radio
+            v-model="payMethod"
+            val="later"
+            :label="$t('payLater')"/>
+        </div>
+      </q-card-section>
+      <q-card-section v-if="payMethod == 'card' && isCreditExceeded">
+        <div class="text-h6">{{$t('payAmount')}}</div>
+        <div>
+          <q-radio
+            v-model="payAmount"
+            val="exceeded"
+            :label="$t('exceededCredit') + ', '">
+            {{execeededCredit | currency}}
+          </q-radio>
+        </div>
+        <div>
+          <q-radio
+            v-model="payAmount"
+            val="total"
+            :label="$t('totalDebt') + ', '">
+            {{totalDebt | currency}}
+          </q-radio>
+        </div>
+      </q-card-section>
+    </q-card>
+    <q-page-sticky position="bottom-right" :offset="[18, 18]">
+      <q-btn
+        fab
+        icon="send"
+        color="accent"
+        @click="onConfirm"
+        :title="$t('confirm')"/>
+    </q-page-sticky>
+  </div>
+</template>
+
+<style lang="stylus" scoped>
+  .border
+    border-top $layout-border
+  .method-desc
+    margin-left 3.2em
+    color: $grey-8
+</style>
+
+<script>
+import Page from 'components/Page'
+
+export default {
+  name: 'OrderCheckout',
+  mixins: [Page],
+  data () {
+    return {
+      data: {
+        debt: -27.52,
+        total: 163.13,
+        vat: 16.31,
+        credit: 50
+      },
+      payAmount: null,
+      payMethod: null,
+      bankName: 'BANKINTER SA',
+      bankAccount: 'ES81 0128 7635 0205 0000 2291'
+    }
+  },
+  computed: {
+    totalDebt () {
+      let data = this.data
+      return data.debt + data.total + data.vat
+    },
+    execeededCredit () {
+      return this.totalDebt - this.data.credit
+    },
+    hasCredit () {
+      return this.data.credit > 0
+    },
+    isCreditExceeded () {
+      return this.hasCredit && this.execeededCredit > 0
+    },
+    canUseCredit () {
+      return this.hasCredit && !this.isCreditExceeded
+    },
+    hasDebt () {
+      return this.totalDebt > 0
+    }
+  },
+  mounted () {
+    this.payAmount = this.isCreditExceeded ? 'exceeded' : 'total'
+
+    if (!this.hasDebt) {
+      this.payMethod = 'balance'
+    } else if (this.canUseCredit) {
+      this.payMethod = 'credit'
+    } else {
+      this.payMethod = 'card'
+    }
+  },
+  methods: {
+    onConfirm () {
+      this.$q.dialog({
+        message: this.$t('doYouWantToConfirm'),
+        cancel: true
+      }).onOk(() => {
+        this.$q.dialog({
+          message: this.$t('orderConfirmedSuccessfully')
+        })
+        // this.$axios.delete(`Orders/${this.$route.params.id}/confirm`)
+        //  .then(() => {})
+      })
+    }
+  }
+}
+</script>

src/pages/OrderView.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="vn-pp row justify-center">
+    <toolbar>
+      <div class="row">
+        <q-badge
+          v-if="total != null"
+          class="text-subtitle1 q-mr-sm"
+          color="secondary">
+          {{$t('total')}} {{total | currency}}
+        </q-badge>
+      </div>
+    </toolbar>
+    <lb-scroll
+      ref="scroll"
+      :request="request"
+      @data="data = arguments[0]">
+      <q-card class="vn-w-md">
+        <q-list bordered separator>
+          <q-item
+            v-for="row in data"
+            :key="row.id">
+            <q-item-section avatar>
+              <q-avatar
+                style="cursor: pointer;"
+                @click.native="onImgClick(row.item.image)">
+                <img :src="`${$imageBase}/catalog/200x200/${row.item.image}`">
+              </q-avatar>
+            </q-item-section>
+            <q-item-section>
+              <q-item-label class="ellipsis">
+                {{row.item.longName}}
+              </q-item-label>
+              <q-item-label class="ellipsis" caption>
+                <span
+                  v-for="tag in row.item.tags.slice(1, 3)"
+                  :key="tag.tagFk">
+                  {{tag.value}}
+                </span>
+              </q-item-label>
+              <q-item-label class="ellipsis">
+                {{row.quantity}} x {{row.price | currency}}
+                <span style="float: right;">
+                  {{row.quantity * row.price | currency}}
+                </span>
+              </q-item-label>
+            </q-item-section>
+            <q-item-section side top>
+              <q-btn
+                icon="delete"
+                @click="onRemove(row)"
+                :title="$t('delete')"
+                size="12px"
+                flat
+                dense
+                round/>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </lb-scroll>
+    <full-image
+      ref="fullImage"
+      v-model="image"
+      collection="catalog"/>
+    <q-page-sticky position="bottom-right" :offset="[18, 18]">
+      <q-btn
+        fab
+        icon="check"
+        color="accent"
+        to="checkout"
+        :title="$t('confirm')"/>
+    </q-page-sticky>
+  </div>
+</template>
+
+<script>
+import Page from 'components/Page'
+
+export default {
+  name: 'OrderView',
+  mixins: [Page],
+  data () {
+    return {
+      image: null
+    }
+  },
+  computed: {
+    total () {
+      let rows = this.data
+      if (!rows) return null
+      return rows.reduce((a, i) => a + i.quantity * i.price, 0)
+    }
+  },
+  beforeRouteUpdate (to, from, next) {
+    next()
+    this.$refs.scroll.reload()
+  },
+  methods: {
+    request () {
+      return {
+        url: `Orders/${this.$route.params.id}/rows`,
+        filter: {
+          fields: [
+            'id',
+            'quantity',
+            'price',
+            'itemFk'
+          ],
+          order: 'created DESC',
+          include: {
+            relation: 'item',
+            scope: {
+              fields: ['longName', 'image'],
+              include: {
+                relation: 'tags',
+                scope: {
+                  fields: ['tagFk', 'value'],
+                  order: 'priority'
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    onRemove (row) {
+      this.$q.dialog({
+        message: this.$t('areYouSureDelete'),
+        cancel: true
+      }).onOk(() => {
+        this.$axios.delete(`Orders/${this.$route.params.id}/rows/${row.id}`)
+          .then(res => {
+            let rows = this.data
+            let index = rows.indexOf(row)
+            if (index !== -1) rows.splice(index, 1)
+            this.$q.notify(this.$t('removedSuccess'))
+          })
+      })
+    },
+    onImgClick (image) {
+      this.image = image
+      this.$refs.fullImage.show()
+    }
+  }
+}
+</script>

src/pages/Pending.vue

@@ -12,7 +12,7 @@
         <q-item
           v-for="order in orders"
           :key="order.id"
-          :to="`/order/${order.id}`"
+          :to="`/order/${order.id}/view`"
           clickable
           v-ripple>
           <q-item-section>
@@ -22,7 +22,7 @@
             <q-item-label caption>{{order.address.city}}</q-item-label>
           </q-item-section>
           <q-item-section side top>
-            485.50€
+            {{order.taxableBase | currency}}
           </q-item-section>
         </q-item>
       </q-list>
@@ -33,8 +33,7 @@
         icon="add_shopping_cart"
         color="accent"
         :to="{name: 'catalog'}"
-        :title="$t('startOrder')"
+        :title="$t('startOrder')"/>
-      />
     </q-page-sticky>
   </div>
 </template>
@@ -48,7 +47,7 @@ export default {
     }
   },
   mounted () {
-    let params = { filter: {
+    let filter = {
       where: {
         clientFk: this.$state.userId,
         isConfirmed: false
@@ -56,8 +55,8 @@ export default {
       include: 'address',
       order: 'created DESC',
       limit: 20
-    } }
+    }
-    this.$axios.get('Orders', { params })
+    this.$axios.get('Orders', { params: { filter } })
       .then(res => (this.orders = res.data))
   }
 }

src/router/routes.js

@@ -33,11 +33,22 @@ const routes = [
         ]
       }, {
         name: 'order',
-        path: '/order/:order',
+        path: '/order/:id',
-        component: () => import('pages/Order.vue')
+        component: () => import('pages/Order.vue'),
+        children: [
+          {
+            name: 'view',
+            path: 'view',
+            component: () => import('pages/OrderView.vue')
+          }, {
+            name: 'checkout',
+            path: 'checkout',
+            component: () => import('pages/OrderCheckout.vue')
+          }
+        ]
       }, {
         name: 'ticket',
-        path: '/ticket/:ticket',
+        path: '/ticket/:id',
         component: () => import('pages/Ticket.vue')
       }, {
         name: 'conditions',