diff --git a/package.json b/package.json index 809c40d..031e9c4 100644 --- a/package.json +++ b/package.json @@ -18,14 +18,14 @@ "eslint": "^8.56.0", "sass": "^1.70.0", "typescript": "^5.3.3", - "vite": "^5.1.1", + "vite": "^5.1.2", "vite-plugin-html": "^3.2.2" }, "dependencies": { "@popperjs/core": "^2.11.8", "bootstrap": "^5.3.2", "js-cookie": "^3.0.5", - "sweetalert2": "^11.10.5", + "sweetalert": "^2.1.2", "vanilla-lazyload": "^17.8.8" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cbb4da9..8356b81 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,9 +14,9 @@ dependencies: js-cookie: specifier: ^3.0.5 version: 3.0.5 - sweetalert2: - specifier: ^11.10.5 - version: 11.10.5 + sweetalert: + specifier: ^2.1.2 + version: 2.1.2 vanilla-lazyload: specifier: ^17.8.8 version: 17.8.8 @@ -24,7 +24,7 @@ dependencies: devDependencies: '@antfu/eslint-config': specifier: ^2.6.4 - version: 2.6.4(@vue/compiler-sfc@3.4.18)(eslint@8.56.0)(typescript@5.3.3) + version: 2.6.4(@vue/compiler-sfc@3.4.19)(eslint@8.56.0)(typescript@5.3.3) '@types/bootstrap': specifier: ^5.2.10 version: 5.2.10 @@ -44,11 +44,11 @@ devDependencies: specifier: ^5.3.3 version: 5.3.3 vite: - specifier: ^5.1.1 - version: 5.1.1(@types/node@20.11.17)(sass@1.70.0) + specifier: ^5.1.2 + version: 5.1.2(@types/node@20.11.17)(sass@1.70.0) vite-plugin-html: specifier: ^3.2.2 - version: 3.2.2(vite@5.1.1) + version: 3.2.2(vite@5.1.2) packages: @@ -57,7 +57,7 @@ packages: engines: {node: '>=0.10.0'} dev: true - /@antfu/eslint-config@2.6.4(@vue/compiler-sfc@3.4.18)(eslint@8.56.0)(typescript@5.3.3): + /@antfu/eslint-config@2.6.4(@vue/compiler-sfc@3.4.19)(eslint@8.56.0)(typescript@5.3.3): resolution: {integrity: sha512-dMD/QC5KWS1OltdpKLhfZM7W7y7zils85opk8d4lyNr7yn0OFjZs7eMYtcC6DrrN2kQ1JrFvBM7uB0QdWn5PUQ==} hasBin: true peerDependencies: @@ -99,7 +99,7 @@ packages: eslint-plugin-antfu: 2.1.2(eslint@8.56.0) eslint-plugin-eslint-comments: 3.2.0(eslint@8.56.0) eslint-plugin-i: 2.29.1(@typescript-eslint/parser@6.21.0)(eslint@8.56.0) - eslint-plugin-jsdoc: 48.0.6(eslint@8.56.0) + eslint-plugin-jsdoc: 48.1.0(eslint@8.56.0) eslint-plugin-jsonc: 2.13.0(eslint@8.56.0) eslint-plugin-markdown: 3.0.1(eslint@8.56.0) eslint-plugin-n: 16.6.2(eslint@8.56.0) @@ -107,11 +107,11 @@ packages: eslint-plugin-perfectionist: 2.5.0(eslint@8.56.0)(typescript@5.3.3)(vue-eslint-parser@9.4.2) eslint-plugin-toml: 0.9.2(eslint@8.56.0) eslint-plugin-unicorn: 50.0.1(eslint@8.56.0) - eslint-plugin-unused-imports: 3.0.0(@typescript-eslint/eslint-plugin@6.21.0)(eslint@8.56.0) + eslint-plugin-unused-imports: 3.1.0(@typescript-eslint/eslint-plugin@6.21.0)(eslint@8.56.0) eslint-plugin-vitest: 0.3.22(@typescript-eslint/eslint-plugin@6.21.0)(eslint@8.56.0)(typescript@5.3.3) eslint-plugin-vue: 9.21.1(eslint@8.56.0) eslint-plugin-yml: 1.12.2(eslint@8.56.0) - eslint-processor-vue-blocks: 0.1.1(@vue/compiler-sfc@3.4.18)(eslint@8.56.0) + eslint-processor-vue-blocks: 0.1.1(@vue/compiler-sfc@3.4.19)(eslint@8.56.0) globals: 13.24.0 jsonc-eslint-parser: 2.4.0 local-pkg: 0.5.0 @@ -891,46 +891,46 @@ packages: resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} dev: true - /@vue/compiler-core@3.4.18: - resolution: {integrity: sha512-F7YK8lMK0iv6b9/Gdk15A67wM0KKZvxDxed0RR60C1z9tIJTKta+urs4j0RTN5XqHISzI3etN3mX0uHhjmoqjQ==} + /@vue/compiler-core@3.4.19: + resolution: {integrity: sha512-gj81785z0JNzRcU0Mq98E56e4ltO1yf8k5PQ+tV/7YHnbZkrM0fyFyuttnN8ngJZjbpofWE/m4qjKBiLl8Ju4w==} dependencies: '@babel/parser': 7.23.9 - '@vue/shared': 3.4.18 + '@vue/shared': 3.4.19 entities: 4.5.0 estree-walker: 2.0.2 source-map-js: 1.0.2 dev: true - /@vue/compiler-dom@3.4.18: - resolution: {integrity: sha512-24Eb8lcMfInefvQ6YlEVS18w5Q66f4+uXWVA+yb7praKbyjHRNuKVWGuinfSSjM0ZIiPi++QWukhkgznBaqpEA==} + /@vue/compiler-dom@3.4.19: + resolution: {integrity: sha512-vm6+cogWrshjqEHTzIDCp72DKtea8Ry/QVpQRYoyTIg9k7QZDX6D8+HGURjtmatfgM8xgCFtJJaOlCaRYRK3QA==} dependencies: - '@vue/compiler-core': 3.4.18 - '@vue/shared': 3.4.18 + '@vue/compiler-core': 3.4.19 + '@vue/shared': 3.4.19 dev: true - /@vue/compiler-sfc@3.4.18: - resolution: {integrity: sha512-rG5tqtnzwrVpMqAQ7FHtvHaV70G6LLfJIWLYZB/jZ9m/hrnZmIQh+H3ewnC5onwe/ibljm9+ZupxeElzqCkTAw==} + /@vue/compiler-sfc@3.4.19: + resolution: {integrity: sha512-LQ3U4SN0DlvV0xhr1lUsgLCYlwQfUfetyPxkKYu7dkfvx7g3ojrGAkw0AERLOKYXuAGnqFsEuytkdcComei3Yg==} dependencies: '@babel/parser': 7.23.9 - '@vue/compiler-core': 3.4.18 - '@vue/compiler-dom': 3.4.18 - '@vue/compiler-ssr': 3.4.18 - '@vue/shared': 3.4.18 + '@vue/compiler-core': 3.4.19 + '@vue/compiler-dom': 3.4.19 + '@vue/compiler-ssr': 3.4.19 + '@vue/shared': 3.4.19 estree-walker: 2.0.2 magic-string: 0.30.7 postcss: 8.4.35 source-map-js: 1.0.2 dev: true - /@vue/compiler-ssr@3.4.18: - resolution: {integrity: sha512-hSlv20oUhPxo2UYUacHgGaxtqP0tvFo6ixxxD6JlXIkwzwoZ9eKK6PFQN4hNK/R13JlNyldwWt/fqGBKgWJ6nQ==} + /@vue/compiler-ssr@3.4.19: + resolution: {integrity: sha512-P0PLKC4+u4OMJ8sinba/5Z/iDT84uMRRlrWzadgLA69opCpI1gG4N55qDSC+dedwq2fJtzmGald05LWR5TFfLw==} dependencies: - '@vue/compiler-dom': 3.4.18 - '@vue/shared': 3.4.18 + '@vue/compiler-dom': 3.4.19 + '@vue/shared': 3.4.19 dev: true - /@vue/shared@3.4.18: - resolution: {integrity: sha512-CxouGFxxaW5r1WbrSmWwck3No58rApXgRSBxrqgnY1K+jk20F6DrXJkHdH9n4HVT+/B6G2CAn213Uq3npWiy8Q==} + /@vue/shared@3.4.19: + resolution: {integrity: sha512-/KliRRHMF6LoiThEy+4c1Z4KB/gbPrGjWwJR+crg2otgrf/egKzRaCPvJ51S5oetgsgXLfc4Rm5ZgrKHZrtMSw==} dev: true /acorn-jsx@5.3.2(acorn@8.11.3): @@ -1042,15 +1042,15 @@ packages: fill-range: 7.0.1 dev: true - /browserslist@4.22.3: - resolution: {integrity: sha512-UAp55yfwNv0klWNapjs/ktHoguxuQNGnOzxYmfnXIS+8AsRDZkSDxg7R1AX3GKzn078SBI5dzwzj/Yx0Or0e3A==} + /browserslist@4.23.0: + resolution: {integrity: sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==} engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true dependencies: - caniuse-lite: 1.0.30001585 - electron-to-chromium: 1.4.665 + caniuse-lite: 1.0.30001587 + electron-to-chromium: 1.4.668 node-releases: 2.0.14 - update-browserslist-db: 1.0.13(browserslist@4.22.3) + update-browserslist-db: 1.0.13(browserslist@4.23.0) dev: true /buffer-from@1.1.2: @@ -1080,8 +1080,8 @@ packages: tslib: 2.6.2 dev: true - /caniuse-lite@1.0.30001585: - resolution: {integrity: sha512-yr2BWR1yLXQ8fMpdS/4ZZXpseBgE7o4g41x3a6AJOqZuOi+iE/WdJYAuZ6Y95i4Ohd2Y+9MzIWRR+uGABH4s3Q==} + /caniuse-lite@1.0.30001587: + resolution: {integrity: sha512-HMFNotUmLXn71BQxg8cijvqxnIAofforZOwGsxyXJ0qugTdspUF4sPSJ2vhgprHCB996tIDzEq1ubumPDV8ULA==} dev: true /chalk@2.4.2: @@ -1208,10 +1208,10 @@ packages: resolution: {integrity: sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==} dev: true - /core-js-compat@3.35.1: - resolution: {integrity: sha512-sftHa5qUJY3rs9Zht1WEnmkvXputCyDBczPnr7QDgL8n3qrF3CMXY4VPSYtOLLiOUJcah2WNXREd48iOl6mQIw==} + /core-js-compat@3.36.0: + resolution: {integrity: sha512-iV9Pd/PsgjNWBXeq8XRtWVSgz2tKAfhfvBs7qxYty+RlRd+OCksaWmOnc4JKrTc1cToXL1N0s3l/vwlxPtdElw==} dependencies: - browserslist: 4.22.3 + browserslist: 4.23.0 dev: true /cross-spawn@7.0.3: @@ -1324,8 +1324,8 @@ packages: engines: {node: '>=12'} dev: true - /dotenv@16.4.2: - resolution: {integrity: sha512-rZSSFxke7d9nYQ5NeMIwp5PP+f8wXgKNljpOb7KtH6SKW1cEqcXAz9VSJYVLKe7Jhup/gUYOkaeSVyK8GJ+nBg==} + /dotenv@16.4.4: + resolution: {integrity: sha512-XvPXc8XAQThSjAbY6cQ/9PcBXmFoWuw1sQ3b8HqUCR6ziGXjkTi//kB9SWa2UwqlgdAIuRqAa/9hVljzPehbYg==} engines: {node: '>=12'} dev: true @@ -1337,8 +1337,8 @@ packages: jake: 10.8.7 dev: true - /electron-to-chromium@1.4.665: - resolution: {integrity: sha512-UpyCWObBoD+nSZgOC2ToaIdZB0r9GhqT2WahPKiSki6ckkSuKhQNso8V2PrFcHBMleI/eqbKgVQgVC4Wni4ilw==} + /electron-to-chromium@1.4.668: + resolution: {integrity: sha512-ZOBocMYCehr9W31+GpMclR+KBaDZOoAEabLdhpZ8oU1JFDwIaFY0UDbpXVEUFc0BIP2O2Qn3rkfCjQmMR4T/bQ==} dev: true /emoji-regex@8.0.0: @@ -1360,6 +1360,10 @@ packages: is-arrayish: 0.2.1 dev: true + /es6-object-assign@1.1.0: + resolution: {integrity: sha512-MEl9uirslVwqQU369iHNWZXsI8yaZYGg/D65aOgZkeyFJwHYSxilf7rQzXKI7DdDuBPrBXbfk3sl9hJhmd5AUw==} + dev: false + /esbuild@0.19.12: resolution: {integrity: sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==} engines: {node: '>=12'} @@ -1532,8 +1536,8 @@ packages: - supports-color dev: true - /eslint-plugin-jsdoc@48.0.6(eslint@8.56.0): - resolution: {integrity: sha512-LgwXOX6TWxxFYcbdVe+BJ94Kl/pgjSPYHLzqEdAMXTA1BH9WDx7iJ+9/iDajPF64LtzWX8C1mCfpbMZjJGhAOw==} + /eslint-plugin-jsdoc@48.1.0(eslint@8.56.0): + resolution: {integrity: sha512-g9S8ukmTd1DVcV/xeBYPPXOZ6rc8WJ4yi0+MVxJ1jBOrz5kmxV9gJJQ64ltCqIWFnBChLIhLVx3tbTSarqVyFA==} engines: {node: '>=18'} peerDependencies: eslint: ^7.0.0 || ^8.0.0 || ^9.0.0 @@ -1659,7 +1663,7 @@ packages: '@eslint/eslintrc': 2.1.4 ci-info: 4.0.0 clean-regexp: 1.0.0 - core-js-compat: 3.35.1 + core-js-compat: 3.36.0 eslint: 8.56.0 esquery: 1.5.0 indent-string: 4.0.0 @@ -1675,12 +1679,12 @@ packages: - supports-color dev: true - /eslint-plugin-unused-imports@3.0.0(@typescript-eslint/eslint-plugin@6.21.0)(eslint@8.56.0): - resolution: {integrity: sha512-sduiswLJfZHeeBJ+MQaG+xYzSWdRXoSw61DpU13mzWumCkR0ufD0HmO4kdNokjrkluMHpj/7PJeN35pgbhW3kw==} + /eslint-plugin-unused-imports@3.1.0(@typescript-eslint/eslint-plugin@6.21.0)(eslint@8.56.0): + resolution: {integrity: sha512-9l1YFCzXKkw1qtAru1RWUtG2EVDZY0a0eChKXcL+EZ5jitG7qxdctu4RnvhOJHv4xfmUf7h+JJPINlVpGhZMrw==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: - '@typescript-eslint/eslint-plugin': ^6.0.0 - eslint: ^8.0.0 + '@typescript-eslint/eslint-plugin': 6 - 7 + eslint: '8' peerDependenciesMeta: '@typescript-eslint/eslint-plugin': optional: true @@ -1745,13 +1749,13 @@ packages: - supports-color dev: true - /eslint-processor-vue-blocks@0.1.1(@vue/compiler-sfc@3.4.18)(eslint@8.56.0): + /eslint-processor-vue-blocks@0.1.1(@vue/compiler-sfc@3.4.19)(eslint@8.56.0): resolution: {integrity: sha512-9+dU5lU881log570oBwpelaJmOfOzSniben7IWEDRYQPPWwlvaV7NhOtsTuUWDqpYT+dtKKWPsgz4OkOi+aZnA==} peerDependencies: '@vue/compiler-sfc': ^3.3.0 eslint: ^8.50.0 dependencies: - '@vue/compiler-sfc': 3.4.18 + '@vue/compiler-sfc': 3.4.19 eslint: 8.56.0 dev: true @@ -2733,6 +2737,10 @@ packages: engines: {node: '>= 0.8.0'} dev: true + /promise-polyfill@6.1.0: + resolution: {integrity: sha512-g0LWaH0gFsxovsU7R5LrrhHhWAWiHRnh1GPrhXnPgYsDkIqjRYUYSZEsej/wtleDrz5xVSIDbeKfidztp2XHFQ==} + dev: false + /prompts@2.4.2: resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==} engines: {node: '>= 6'} @@ -3004,8 +3012,11 @@ packages: engines: {node: '>= 0.4'} dev: true - /sweetalert2@11.10.5: - resolution: {integrity: sha512-q9eE3EKhMcpIDU/Xcz7z5lk8axCGkgxwK47gXGrrfncnBJWxHPPHnBVAjfsVXcTt8Yi8U6HNEcBRSu+qGeyFdA==} + /sweetalert@2.1.2: + resolution: {integrity: sha512-iWx7X4anRBNDa/a+AdTmvAzQtkN1+s4j/JJRWlHpYE8Qimkohs8/XnFcWeYHH2lMA8LRCa5tj2d244If3S/hzA==} + dependencies: + es6-object-assign: 1.1.0 + promise-polyfill: 6.1.0 dev: false /synckit@0.6.2: @@ -3114,13 +3125,13 @@ packages: engines: {node: '>= 10.0.0'} dev: true - /update-browserslist-db@1.0.13(browserslist@4.22.3): + /update-browserslist-db@1.0.13(browserslist@4.23.0): resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==} hasBin: true peerDependencies: browserslist: '>= 4.21.0' dependencies: - browserslist: 4.22.3 + browserslist: 4.23.0 escalade: 3.1.2 picocolors: 1.0.0 dev: true @@ -3146,7 +3157,7 @@ packages: resolution: {integrity: sha512-6iaLLjajGg1pBcLORks4Y8OgSTqLP/pIT3cVut/erAuoXUWYw6oqKPyjI1wF7saK6EW3TBtNLDKajKaEEzZuWw==} dev: false - /vite-plugin-html@3.2.2(vite@5.1.1): + /vite-plugin-html@3.2.2(vite@5.1.2): resolution: {integrity: sha512-vb9C9kcdzcIo/Oc3CLZVS03dL5pDlOFuhGlZYDCJ840BhWl/0nGeZWf3Qy7NlOayscY4Cm/QRgULCQkEZige5Q==} peerDependencies: vite: '>=2.0.0' @@ -3155,7 +3166,7 @@ packages: colorette: 2.0.20 connect-history-api-fallback: 1.6.0 consola: 2.15.3 - dotenv: 16.4.2 + dotenv: 16.4.4 dotenv-expand: 8.0.3 ejs: 3.1.9 fast-glob: 3.3.2 @@ -3163,11 +3174,11 @@ packages: html-minifier-terser: 6.1.0 node-html-parser: 5.4.2 pathe: 0.2.0 - vite: 5.1.1(@types/node@20.11.17)(sass@1.70.0) + vite: 5.1.2(@types/node@20.11.17)(sass@1.70.0) dev: true - /vite@5.1.1(@types/node@20.11.17)(sass@1.70.0): - resolution: {integrity: sha512-wclpAgY3F1tR7t9LL5CcHC41YPkQIpKUGeIuT8MdNwNZr6OqOTLs7JX5vIHAtzqLWXts0T+GDrh9pN2arneKqg==} + /vite@5.1.2(@types/node@20.11.17)(sass@1.70.0): + resolution: {integrity: sha512-uwiFebQbTWRIGbCaTEBVAfKqgqKNKMJ2uPXsXeLIZxM8MVMjoS3j0cG8NrPxdDIadaWnPSjrkLWffLSC+uiP3Q==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true peerDependencies: diff --git a/src/js/checkout.ts b/src/js/checkout.ts index d9a6265..238f2bb 100644 --- a/src/js/checkout.ts +++ b/src/js/checkout.ts @@ -1,7 +1,7 @@ -import Swal from 'sweetalert2' +import swal from 'sweetalert' import { products } from './products.ts' import type { Basket } from './typing' -import { readBasketCookie } from './shared' +import { DialogCloseResult, readBasketCookie } from './shared' const creditCardShown = false const basket: Basket = readBasketCookie() @@ -17,8 +17,12 @@ function init() { } function resetListeners() { - // document.querySelector('#paycreditcard')?.addEventListener('click', showCreditCardPage) - document.querySelector('#paycreditcard')?.addEventListener('click', showSweetAlert) + document.querySelector('#paycreditcard')?.addEventListener('click', (e) => { + showSweetAlert(e, (result) => { + if (result === DialogCloseResult.Yes) + showCreditCardPage(e) + }).then() + }) } function showCreditCardPage(e: Event) { @@ -33,19 +37,28 @@ function showCreditCardPage(e: Event) { } } -function showSweetAlert(e: Event) { +async function showSweetAlert(e: Event, onDialogClose?: (result: DialogCloseResult) => void) { e.preventDefault() - Swal.fire({ + const result = await swal({ title: 'Are you sure to checkout?', icon: 'warning', - confirmButtonText: 'Yes', - confirmButtonColor: '#d33', - showCancelButton: true, - }).then((result) => { - if (result.isConfirmed) - showCreditCardPage(e) + buttons: { + cancel: { + visible: true, + text: 'Cancel', + value: DialogCloseResult.Cancel, + }, + yes: { + visible: true, + text: 'Yes', + className: 'bg-danger', + value: DialogCloseResult.Yes, + }, + }, }) + + onDialogClose && onDialogClose(result) } function calculateTotalPrice() { diff --git a/src/js/productCard.ts b/src/js/productCard.ts index a55a58d..7220237 100644 --- a/src/js/productCard.ts +++ b/src/js/productCard.ts @@ -1,4 +1,4 @@ -import Swal from 'sweetalert2' +import swal from 'sweetalert' import type { Product } from './typing.ts' const cardTemplateStr: string = ` @@ -95,7 +95,9 @@ export function createProductCard( thisProductCard.querySelector('.addToBasket')?.addEventListener( 'click', - async (e) => { + (e) => { + e.preventDefault() + onAddToBasketRequested(product.id, 1) const addToBasketBtn = e.target as HTMLButtonElement const adjustDiv = addToBasketBtn.nextElementSibling as HTMLDivElement @@ -104,13 +106,11 @@ export function createProductCard( const newValue = Number.parseInt(inputBox.value) inputBox.value = newValue <= 0 ? '1' : newValue.toString() - await Swal.fire({ - timerProgressBar: true, + swal({ icon: 'success', title: `${product.name} was added to basket.`, - showConfirmButton: false, - timer: 2000, // Close after 1500ms (1.5 seconds) - }) + timer: 2000, + }).then() }, ) diff --git a/src/js/shared.ts b/src/js/shared.ts index 256c6ac..a547499 100644 --- a/src/js/shared.ts +++ b/src/js/shared.ts @@ -1,6 +1,12 @@ import Cookies from 'js-cookie' import type { Basket } from './typing.ts' +export enum DialogCloseResult { + Yes, + No, + Cancel, +} + export function readBasketCookie(): Basket { const cookies = Cookies.get('basket') const entries = Object.entries(JSON.parse(cookies ?? '{}'))