diff --git a/frontend/.env.dist b/frontend/.env.dist index f2303bfcd0..730cb2e0f9 100644 --- a/frontend/.env.dist +++ b/frontend/.env.dist @@ -15,3 +15,7 @@ PUBLIC_ENV__ENDPOINTS__WEBSOCKET_URI=ws://localhost:4000/subscriptions # META PUBLIC_ENV__META__BASE_URL="http://localhost:3000" PUBLIC_ENV__META__DEFAULT_AUTHOR="DreamMall Verlag GbR" + +PUBLIC_ENV__ACCOUNT_HOLDER= +PUBLIC_ENV__IBAN= +PUBLIC_ENV__BIC= diff --git a/frontend/.env.production b/frontend/.env.production index f4e59907bc..67204bf1b2 100644 --- a/frontend/.env.production +++ b/frontend/.env.production @@ -15,3 +15,7 @@ PUBLIC_ENV__ENDPOINTS__WEBSOCKET_URI=wss://master.git.dreammall.earth/api/subscr # META PUBLIC_ENV__META__BASE_URL="https://app.master.git.dreammall.earth" PUBLIC_ENV__META__DEFAULT_AUTHOR="DreamMall Verlag GbR" + +PUBLIC_ENV__ACCOUNT_HOLDER= +PUBLIC_ENV__IBAN= +PUBLIC_ENV__BIC= diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 33500de0d7..fae0317fa3 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,6 +10,7 @@ "license": "Apache-2.0", "dependencies": { "@apollo/client": "^3.11.8", + "@chenfengyuan/vue-qrcode": "^2.0.0", "@intlify/unplugin-vue-i18n": "^4.0.0", "@mdi/font": "^7.4.47", "@tweenjs/tween.js": "^25.0.0", @@ -25,10 +26,13 @@ "express": "^4.19.2", "graphql-tag": "^2.12.6", "graphql-ws": "^5.16.0", + "iban": "^0.0.14", "js-cookie": "^3.0.5", "oidc-client-ts": "^3.0.1", "pinia": "^2.2.2", "pinia-plugin-persistedstate": "^3.2.3", + "qrcode": "^1.5.4", + "sepa-payment-qr-code": "^2.0.2", "sirv": "^2.0.4", "three": "^0.168.0", "vike": "^0.4.194", @@ -56,6 +60,7 @@ "@types/cookie": "^0.6.0", "@types/express": "^4.17.21", "@types/fs-extra": "^11.0.4", + "@types/iban": "^0.0.35", "@types/js-cookie": "^3.0.6", "@types/node": "^20.14.8", "@types/three": "^0.168.0", @@ -2182,6 +2187,15 @@ "@brillout/import": "^0.2.3" } }, + "node_modules/@chenfengyuan/vue-qrcode": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@chenfengyuan/vue-qrcode/-/vue-qrcode-2.0.0.tgz", + "integrity": "sha512-33Cfr0zjbc3Dd8d5b1IgzXRAgXH0c2Gv19VI4snS25V/x9Z41eg769tC+Us1x+vqgQQhgD5YUjLnkpkrQfeMSw==", + "peerDependencies": { + "qrcode": "^1.5.0", + "vue": "^3.0.0" + } + }, "node_modules/@cspotcode/source-map-support": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", @@ -5913,6 +5927,12 @@ "integrity": "sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==", "dev": true }, + "node_modules/@types/iban": { + "version": "0.0.35", + "resolved": "https://registry.npmjs.org/@types/iban/-/iban-0.0.35.tgz", + "integrity": "sha512-BOsp/b0ypIBnZdp1R8aP3n4w7I0n6vcObXtD0OT91lVSdo+Bx4VL26tW3yx1Dr9I4D5H3A27IOZoMVAdVfG4FQ==", + "dev": true + }, "node_modules/@types/istanbul-lib-coverage": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz", @@ -7071,7 +7091,6 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", - "dev": true, "engines": { "node": ">=8" } @@ -7932,7 +7951,6 @@ "version": "5.3.1", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", - "dev": true, "engines": { "node": ">=6" } @@ -8210,7 +8228,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, "dependencies": { "color-name": "~1.1.4" }, @@ -8221,8 +8238,7 @@ "node_modules/color-name": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, "node_modules/colord": { "version": "2.9.3", @@ -8817,7 +8833,6 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -9038,6 +9053,11 @@ "htmlparser2": "^3.9.2" } }, + "node_modules/dijkstrajs": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz", + "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==" + }, "node_modules/dir-glob": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", @@ -9213,8 +9233,7 @@ "node_modules/emoji-regex": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", - "dev": true + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" }, "node_modules/encodeurl": { "version": "1.0.2", @@ -11085,7 +11104,6 @@ "version": "2.0.5", "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", - "dev": true, "engines": { "node": "6.* || 8.* || >= 10.*" } @@ -11713,6 +11731,11 @@ "node": ">=10.17.0" } }, + "node_modules/iban": { + "version": "0.0.14", + "resolved": "https://registry.npmjs.org/iban/-/iban-0.0.14.tgz", + "integrity": "sha512-+rocNKk+Ga9m8Lr9fTMWd+87JnsBrucm0ZsIx5ROOarZlaDLmd+FKdbtvb0XyoBw9GAFOYG2GuLqoNB16d+p3w==" + }, "node_modules/iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", @@ -12052,7 +12075,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", - "dev": true, "engines": { "node": ">=8" } @@ -16182,7 +16204,6 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", - "dev": true, "engines": { "node": ">=6" } @@ -16277,7 +16298,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", - "dev": true, "engines": { "node": ">=8" } @@ -16565,6 +16585,14 @@ "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } }, + "node_modules/pngjs": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz", + "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==", + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/polished": { "version": "4.3.1", "resolved": "https://registry.npmjs.org/polished/-/polished-4.3.1.tgz", @@ -17092,6 +17120,145 @@ } ] }, + "node_modules/qrcode": { + "version": "1.5.4", + "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz", + "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==", + "dependencies": { + "dijkstrajs": "^1.0.1", + "pngjs": "^5.0.0", + "yargs": "^15.3.1" + }, + "bin": { + "qrcode": "bin/qrcode" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/qrcode/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/qrcode/node_modules/cliui": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz", + "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==", + "dependencies": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.0", + "wrap-ansi": "^6.2.0" + } + }, + "node_modules/qrcode/node_modules/find-up": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", + "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", + "dependencies": { + "locate-path": "^5.0.0", + "path-exists": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/qrcode/node_modules/locate-path": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", + "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", + "dependencies": { + "p-locate": "^4.1.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/qrcode/node_modules/p-limit": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", + "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", + "dependencies": { + "p-try": "^2.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/qrcode/node_modules/p-locate": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", + "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", + "dependencies": { + "p-limit": "^2.2.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/qrcode/node_modules/wrap-ansi": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz", + "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==", + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/qrcode/node_modules/y18n": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz", + "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==" + }, + "node_modules/qrcode/node_modules/yargs": { + "version": "15.4.1", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz", + "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==", + "dependencies": { + "cliui": "^6.0.0", + "decamelize": "^1.2.0", + "find-up": "^4.1.0", + "get-caller-file": "^2.0.1", + "require-directory": "^2.1.1", + "require-main-filename": "^2.0.0", + "set-blocking": "^2.0.0", + "string-width": "^4.2.0", + "which-module": "^2.0.0", + "y18n": "^4.0.0", + "yargs-parser": "^18.1.2" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/qrcode/node_modules/yargs-parser": { + "version": "18.1.3", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz", + "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==", + "dependencies": { + "camelcase": "^5.0.0", + "decamelize": "^1.2.0" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/qs": { "version": "6.11.0", "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz", @@ -17585,7 +17752,6 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -17602,8 +17768,7 @@ "node_modules/require-main-filename": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz", - "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==", - "dev": true + "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==" }, "node_modules/requireindex": { "version": "1.2.0", @@ -17996,6 +18161,17 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" }, + "node_modules/sepa-payment-qr-code": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/sepa-payment-qr-code/-/sepa-payment-qr-code-2.0.2.tgz", + "integrity": "sha512-TyyONY2Lzo4cjCTgSwAyb2oXYyWXvSaeSY0dIlsiXMpdTEAsR/ONB5jyE7/04+nPBGrLTpKKT3q1dw2LRPcz/g==", + "dependencies": { + "iban": "0.0.14" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/serialize-javascript": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz", @@ -18021,8 +18197,7 @@ "node_modules/set-blocking": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", - "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==", - "dev": true + "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==" }, "node_modules/set-function-length": { "version": "1.2.2", @@ -18536,7 +18711,6 @@ "version": "4.2.3", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", - "dev": true, "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", @@ -18614,7 +18788,6 @@ "version": "6.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "dev": true, "dependencies": { "ansi-regex": "^5.0.1" }, @@ -21850,8 +22023,7 @@ "node_modules/which-module": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz", - "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==", - "dev": true + "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==" }, "node_modules/which-typed-array": { "version": "1.1.15", diff --git a/frontend/package.json b/frontend/package.json index 7bf4924329..9f7a481be8 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -52,6 +52,7 @@ }, "dependencies": { "@apollo/client": "^3.11.8", + "@chenfengyuan/vue-qrcode": "^2.0.0", "@intlify/unplugin-vue-i18n": "^4.0.0", "@mdi/font": "^7.4.47", "@tweenjs/tween.js": "^25.0.0", @@ -67,10 +68,13 @@ "express": "^4.19.2", "graphql-tag": "^2.12.6", "graphql-ws": "^5.16.0", + "iban": "^0.0.14", "js-cookie": "^3.0.5", "oidc-client-ts": "^3.0.1", "pinia": "^2.2.2", "pinia-plugin-persistedstate": "^3.2.3", + "qrcode": "^1.5.4", + "sepa-payment-qr-code": "^2.0.2", "sirv": "^2.0.4", "three": "^0.168.0", "vike": "^0.4.194", @@ -98,6 +102,7 @@ "@types/cookie": "^0.6.0", "@types/express": "^4.17.21", "@types/fs-extra": "^11.0.4", + "@types/iban": "^0.0.35", "@types/js-cookie": "^3.0.6", "@types/node": "^20.14.8", "@types/three": "^0.168.0", diff --git a/frontend/src/components/cockpit/about-me/AboutMe.test.ts b/frontend/src/components/cockpit/about-me/AboutMe.test.ts index db6163c010..56fc4df3a5 100644 --- a/frontend/src/components/cockpit/about-me/AboutMe.test.ts +++ b/frontend/src/components/cockpit/about-me/AboutMe.test.ts @@ -74,6 +74,7 @@ provideApolloClient(mockClient) const setCurrentUser = (store: ReturnType) => { store.currentUser = { id: 666, + referenceId: 'UQV6KSVD', name: 'Current User', username: 'currentUser', availability: 'available', diff --git a/frontend/src/components/cockpit/cockpit-layout/CockpitLayout.vue b/frontend/src/components/cockpit/cockpit-layout/CockpitLayout.vue index 2b2aa05598..62ec4bc5b9 100644 --- a/frontend/src/components/cockpit/cockpit-layout/CockpitLayout.vue +++ b/frontend/src/components/cockpit/cockpit-layout/CockpitLayout.vue @@ -19,7 +19,7 @@ @media #{map.get($display-breakpoints, 'md-and-up')} { .cockpit { - grid-template-columns: 335px 335px; + grid-template-columns: 380px 380px; max-width: 1200px; } } diff --git a/frontend/src/components/cockpit/payment-link/PaymentLink.vue b/frontend/src/components/cockpit/payment-link/PaymentLink.vue new file mode 100644 index 0000000000..02fb1a2394 --- /dev/null +++ b/frontend/src/components/cockpit/payment-link/PaymentLink.vue @@ -0,0 +1,16 @@ + + + diff --git a/frontend/src/components/menu/UserInfo.test.ts b/frontend/src/components/menu/UserInfo.test.ts index 6b013e05b8..cdfd54e108 100644 --- a/frontend/src/components/menu/UserInfo.test.ts +++ b/frontend/src/components/menu/UserInfo.test.ts @@ -61,6 +61,7 @@ describe('UserInfo', () => { name: '', username: '', id: 22, + referenceId: 'UQV6KSVD', availability: null, details: [], social: [], @@ -81,6 +82,7 @@ describe('UserInfo', () => { name: 'Peter Lustig', username: 'peter', id: 22, + referenceId: 'UQV6KSVD', availability: null, details: [], social: [], @@ -101,6 +103,7 @@ describe('UserInfo', () => { name: 'Peter Lustig', username: 'peter', id: 22, + referenceId: 'UQV6KSVD', avatar: 'http://url-to.me', availability: null, details: [], diff --git a/frontend/src/components/sepa-iban/SepaIban.spec.ts b/frontend/src/components/sepa-iban/SepaIban.spec.ts new file mode 100644 index 0000000000..ab895c2101 --- /dev/null +++ b/frontend/src/components/sepa-iban/SepaIban.spec.ts @@ -0,0 +1,48 @@ +import { mount } from '@vue/test-utils' +import { describe, it, expect } from 'vitest' + +import SepaIban from './SepaIban.vue' + +describe('SepaIban', () => { + const props = { + reference: 'REFEREN', + accountData: { + ACCOUNT_HOLDER: 'Max Mustermann', + IBAN: 'DE75512108001245126199', + BIC: 'SOGEDEFFXXX', + }, + } + const global = { + stubs: { + VueQrcode: true, + }, + } + const opts = { props, global } + + describe('renders account data so that the user can make a bank transfer', () => { + it('as text', () => { + const wrapper = mount(SepaIban, opts) + expect(wrapper.text()).toContain('Max Mustermann') + expect(wrapper.text()).toContain('SOGEDEFFXXX') + expect(wrapper.text()).toContain('REFEREN') + expect(wrapper.text()).toContain('DE75512108001245126199') + }) + + it('as a QR code', () => { + const wrapper = mount(SepaIban, opts) + const value = + 'BCD\n002\n1\nSCT\n\nMax Mustermann\nDE75512108001245126199\nEUR30.00\n\n\nREFEREN\n' + expect(wrapper.getComponent({ name: 'vue-qrcode' }).props('value')).toEqual(value) + }) + + describe('when the user updates the amount', () => { + it('updates the QR code', async () => { + const wrapper = mount(SepaIban, opts) + await wrapper.find('input[type="number"]').setValue(42) + const value = + 'BCD\n002\n1\nSCT\n\nMax Mustermann\nDE75512108001245126199\nEUR42.00\n\n\nREFEREN\n' + expect(wrapper.getComponent({ name: 'vue-qrcode' }).props('value')).toEqual(value) + }) + }) + }) +}) diff --git a/frontend/src/components/sepa-iban/SepaIban.vue b/frontend/src/components/sepa-iban/SepaIban.vue new file mode 100644 index 0000000000..29551fe26a --- /dev/null +++ b/frontend/src/components/sepa-iban/SepaIban.vue @@ -0,0 +1,125 @@ + + + + + diff --git a/frontend/src/components/sepa-iban/qrCode.ts b/frontend/src/components/sepa-iban/qrCode.ts new file mode 100644 index 0000000000..75d086223b --- /dev/null +++ b/frontend/src/components/sepa-iban/qrCode.ts @@ -0,0 +1,101 @@ +// source: https://github.com/derhuerst/sepa-payment-qr-code +import IBAN from 'iban' + +const SERVICE_TAG = 'BCD' +const VERSION = '002' +const CHARACTER_SET = 1 +const IDENTIFICATION_CODE = 'SCT' + +const assertNonEmptyString = (val: unknown, name: string) => { + if (typeof val !== 'string' || !val) { + throw new Error(name + ' must be a non-empty string.') + } +} + +type QrCodeData = { + name: string + iban: string + bic?: string + amount?: number + purposeCode?: string + structuredReference?: string + unstructuredReference?: string + information?: string +} + +export const generateQrCode = (data: QrCodeData) => { + if (!data) throw new Error('data must be an object.') + + // > AT-21 Name of the Beneficiary + assertNonEmptyString(data.name, 'data.name') + if (data.name.length > 70) throw new Error('data.name must have <=70 characters') + + // > AT-23 BIC of the Beneficiary Bank + if (data.bic) { + assertNonEmptyString(data.bic, 'data.bic') + if (data.bic.length > 11) throw new Error('data.bic must have <=11 characters') + // todo: validate more? + } + + // > AT-20 Account number of the Beneficiary + // > Only IBAN is allowed. + assertNonEmptyString(data.iban, 'data.iban') + if (!IBAN.isValid(data.iban)) { + throw new Error('data.iban must be a valid iban code.') + } + + // > AT-04 Amount of the Credit Transfer in Euro + // > Amount must be 0.01 or more and 999999999.99 or less + if (data.amount !== null) { + if (typeof data.amount !== 'number') throw new Error('data.amount must be a number or null.') + if (data.amount < 0.01 || data.amount > 999999999.99) { + throw new Error('data.amount must be >=0.01 and <=999999999.99.') + } + } + + // > AT-44 Purpose of the Credit Transfer + if (data.purposeCode) { + assertNonEmptyString(data.purposeCode, 'data.purposeCode') + if (data.purposeCode.length > 4) throw new Error('data.purposeCode must have <=4 characters') + // todo: validate against AT-44 + } + + // > AT-05 Remittance Information (Structured) + // > Creditor Reference (ISO 11649 RF Creditor Reference may be used) + if (data.structuredReference) { + assertNonEmptyString(data.structuredReference, 'data.structuredReference') + if (data.structuredReference.length > 35) + throw new Error('data.structuredReference must have <=35 characters') + // todo: validate against AT-05 + } + // > AT-05 Remittance Information (Unstructured) + if (data.unstructuredReference) { + assertNonEmptyString(data.unstructuredReference, 'data.unstructuredReference') + if (data.unstructuredReference.length > 140) + throw new Error('data.unstructuredReference must have <=140 characters') + } + if ('structuredReference' in data && 'unstructuredReference' in data) { + throw new Error('Use either data.structuredReference or data.unstructuredReference.') + } + + // > Beneficiary to originator information + if (data.information) { + assertNonEmptyString(data.information, 'data.information') + if (data.information.length > 70) throw new Error('data.information must have <=70 characters') + } + + return [ + SERVICE_TAG, + VERSION, + CHARACTER_SET, + IDENTIFICATION_CODE, + data.bic, + data.name, + IBAN.electronicFormat(data.iban), + data.amount === null ? '' : 'EUR' + data.amount.toFixed(2), + data.purposeCode || '', + data.structuredReference || '', + data.unstructuredReference || '', + data.information || '', + ].join('\n') +} diff --git a/frontend/src/env.ts b/frontend/src/env.ts index e95ad5fd97..4274e46c4f 100644 --- a/frontend/src/env.ts +++ b/frontend/src/env.ts @@ -28,4 +28,15 @@ const META = { 'DreamMall Verlag GbR') as string, } -export { AUTH, ENDPOINTS, META } +const ACCOUNT_HOLDER = (import.meta.env.PUBLIC_ENV__ACCOUNT_HOLDER ?? 'DreamMall GBR') as string +// source: https://www.iban.com/structure +const IBAN = (import.meta.env.PUBLIC_ENV__IBAN ?? 'DE75512108001245126199') as string +const BIC = (import.meta.env.PUBLIC_ENV__BIC ?? 'SOGEDEFFXXX') as string + +const ACCOUNTING = { + ACCOUNT_HOLDER, + IBAN, + BIC, +} + +export { AUTH, ENDPOINTS, META, ACCOUNTING } diff --git a/frontend/src/graphql/queries/currentUserQuery.ts b/frontend/src/graphql/queries/currentUserQuery.ts index 339043b6a8..9acaab1e16 100644 --- a/frontend/src/graphql/queries/currentUserQuery.ts +++ b/frontend/src/graphql/queries/currentUserQuery.ts @@ -4,6 +4,7 @@ export const currentUserQuery = gql` query { currentUser { id + referenceId name username introduction diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json index 4020543df2..11cd42d544 100644 --- a/frontend/src/locales/de.json +++ b/frontend/src/locales/de.json @@ -93,6 +93,30 @@ "defaultTitle": "DreamMall", "joinTableTitle": "Raum beitreten" }, + "paymentLink": { + "callToAction": "Upgrade auf PRO", + "subtitle": "Upgrade auf Premium, um weitere Funktionen freizuschalten", + "title": "Upgrade auf Premium" + }, + "sepaIban": { + "accountData": { + "accountHolder": "Konto Inhaber", + "amount": "Betrag in Euro", + "BIC": "BIC", + "IBAN": "IBAN", + "reference": "Referenz", + "title": "Kontodaten" + }, + "explanation": { + "callToAction": "Um ein Dreammall-Abonnement abzuschließen, kannst du einfach in deinem Online-Banking einen Dauerauftrag einrichten. Die Kontodetails findest du auf dieser Seite.", + "introduction": "Danke, dass du dich für ein DreamMall-Abonnement entschieden hast!", + "title": "Dauerauftrag einrichten" + }, + "qr": { + "explanation": "Alternativ kannst du auch diesen QR Code mit deiner Banking-App QR scannen.", + "title": "QR Code scannen" + } + }, "table": { "notFound": "Tisch nicht gefunden." }, diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json index b2cfe4c164..c85b780b59 100644 --- a/frontend/src/locales/en.json +++ b/frontend/src/locales/en.json @@ -93,6 +93,30 @@ "defaultTitle": "DreamMall", "joinTableTitle": "Enter Table" }, + "paymentLink": { + "callToAction": "Upgrade to PRO", + "subtitle": "Upgrade to premium to unlock more features", + "title": "Upgrade to premium" + }, + "sepaIban": { + "accountData": { + "accountHolder": "Account holder", + "amount": "Amount in Euro", + "BIC": "BIC", + "IBAN": "IBAN", + "reference": "Reference", + "title": "Account details" + }, + "explanation": { + "callToAction": "To order a Dreammall subscription, you can simply set up a standing order in your online banking. You can view the account details on this page.", + "introduction": "Thank you for choosing a DreamMall subscription!", + "title": "Set up standing order" + }, + "qr": { + "explanation": "If your banking app supports QR codes, you can easily scan the QR code below on the page.", + "title": "Scan QR Code" + } + }, "table": { "notFound": "Table not found." }, diff --git a/frontend/src/pages/cockpit/+Page.vue b/frontend/src/pages/cockpit/+Page.vue index c1888f7cfb..407b1003b1 100644 --- a/frontend/src/pages/cockpit/+Page.vue +++ b/frontend/src/pages/cockpit/+Page.vue @@ -3,6 +3,7 @@ + @@ -11,5 +12,6 @@ import AboutMe from '#components/cockpit/about-me/AboutMe.vue' import CockpitLayout from '#components/cockpit/cockpit-layout/CockpitLayout.vue' import MyTables from '#components/cockpit/my-tables/MyTables.vue' +import PaymentLink from '#components/cockpit/payment-link/PaymentLink.vue' import DefaultLayout from '#layouts/DefaultLayout.vue' diff --git a/frontend/src/pages/cockpit/__snapshots__/Page.test.ts.snap b/frontend/src/pages/cockpit/__snapshots__/Page.test.ts.snap index 4a5cff5279..b6591f54b2 100644 --- a/frontend/src/pages/cockpit/__snapshots__/Page.test.ts.snap +++ b/frontend/src/pages/cockpit/__snapshots__/Page.test.ts.snap @@ -1015,7 +1015,7 @@ exports[`Cockpit Page > without apollo error > renders 1`] = `