changes

.vscode/settings.json

@@ -3,5 +3,8 @@
   "[vue]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
   "editor.formatOnSave": true
 }

app/components/pos/POS.vue

@@ -80,7 +80,7 @@ provide("pos", {
     </div> -->
     <template v-if="activeCartId && carts?.length > 0">
       <CartTabs />
-      <div class="fixed-grid has-1-cols-mobile has-12-cols has-background-white is-clipped">
+      <div class="fixed-grid has-1-cols-mobile has-12-cols has-background-white">
         <div class="grid is-gap-0">
           <div :class="['cell', store.viewport < 3 ? 'is-col-span-12' : 'is-col-span-8']">
             <div class="card">
@@ -276,10 +276,7 @@ provide("pos", {
                 </template>
               </div>
             </div>
-            <div
-              class="card"
-              style="border-bottom: 1px solid var(--bulma-border)"
-            >
+            <div class="card">
               <div class="card-content">
                 <p class="icon-text fs-16 font-semibold mb-4">
                   <span class="icon">
@@ -306,37 +303,39 @@ provide("pos", {
                 </div>
               </div>
             </div>
-            <div class="card">
-              <div class="card-content">
-                <p class="icon-text fs-16 font-semibold mb-4">Tổng cộng</p>
-                <div>
-                  <table class="table is-fullwidth fs-13">
-                    <tbody>
-                      <tr>
-                        <td>
-                          <span>Tạm tính</span>
-                          <span> ({{ activeCartItems?.length || 0 }} sản phẩm)</span>
-                        </td>
-                        <td class="has-text-right">{{ $formatNum(subtotal, { hasUnit: true }) }}</td>
-                      </tr>
-                      <tr>
-                        <td class="font-bold fs-14">Tổng cộng</td>
-                        <td class="has-text-right has-text-success-35 font-bold fs-17">
-                          {{ $formatNum(subtotal, { hasUnit: true }) }}
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                  <button
-                    @click="openConfirmModal"
-                    :disabled="!isOrderValid"
-                    class="button is-fullwidth is-success"
-                  >
-                    Thanh toán
-                  </button>
-                </div>
-              </div>
-            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="card is-radiusless sticky bottom-0"
+        style="z-index: 5; /* to be higher than .control > .icon (4) */"
+      >
+        <div class="card-content py-4">
+          <div class="is-flex is-gap-2 is-justify-content-space-between is-align-items-flex-end">
+            <table class="table is-fullwidth max-w-4xl fs-13 mb-0">
+              <tbody>
+                <tr>
+                  <td>
+                    <span>Tạm tính</span>
+                    <span> ({{ activeCartItems?.length || 0 }} sản phẩm)</span>
+                  </td>
+                  <td class="has-text-right">{{ $formatNum(subtotal, { hasUnit: true }) }}</td>
+                </tr>
+                <tr>
+                  <td class="font-bold fs-14">Tổng cộng</td>
+                  <td class="has-text-right has-text-primary font-bold fs-18">
+                    {{ $formatNum(subtotal, { hasUnit: true }) }}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <button
+              @click="openConfirmModal"
+              :disabled="!isOrderValid"
+              class="button is-success"
+            >
+              Thanh toán
+            </button>
           </div>
         </div>
       </div>
@@ -404,8 +403,6 @@ provide("pos", {
 
 .fixed-grid {
   border: 1px solid var(--bulma-border);
-  border-bottom-left-radius: var(--bulma-radius);
-  border-bottom-right-radius: var(--bulma-radius);
 }
 .sidebar {
   border-left: 1px solid var(--bulma-border);

nuxt.config.ts

@@ -37,6 +37,7 @@ export default defineNuxtConfig({
         'dayjs/plugin/weekOfYear', // CJS
         'dayjs/plugin/weekday', // CJS
         'es-toolkit',
+        'es-toolkit/compat',
         'highcharts', // CJS
         'highcharts-vue', // CJS
         'highcharts/modules/export-data', // CJS

package-lock.json

@@ -26,6 +26,7 @@
         "pinia-plugin-persistedstate": "^4.5.0",
         "sass": "^1.81.0",
         "socket.io-client": "^4.8.3",
+        "vnpay": "^2.5.0",
         "vue": "^3.5.34",
         "vue-advanced-cropper": "^2.8.9",
         "vue-router": "latest",
@@ -13608,6 +13609,15 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/vnpay": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/vnpay/-/vnpay-2.5.0.tgz",
+      "integrity": "sha512-kyUYxG0pyEnRu/ha0gSVqkPCajmql523W2PQzgCkH4ct4XdEuzdiQnssi/k9XMcv+TvoPzuweEJG+4hWNU2DAQ==",
+      "license": "MIT",
+      "dependencies": {
+        "dayjs": "^1.11.13"
+      }
+    },
     "node_modules/vue": {
       "version": "3.5.35",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.35.tgz",

package.json

@@ -31,6 +31,7 @@
     "pinia-plugin-persistedstate": "^4.5.0",
     "sass": "^1.81.0",
     "socket.io-client": "^4.8.3",
+    "vnpay": "^2.5.0",
     "vue": "^3.5.34",
     "vue-advanced-cropper": "^2.8.9",
     "vue-router": "latest",