From 1b24ffacae68ba76588469d1dc94d943db54efd9 Mon Sep 17 00:00:00 2001 From: "Lucian I. Last" Date: Mon, 29 Apr 2024 15:09:33 +0200 Subject: [PATCH 01/15] add qrcode --- frontend/package-lock.json | 244 ++++++++++++++++++ frontend/package.json | 2 + .../react/pages/ChainMemberList.tsx | 55 +++- 3 files changed, 298 insertions(+), 3 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 40e72ec78..25c6f9341 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -15,6 +15,7 @@ "@nanostores/react": "^0.7.2", "@stripe/react-stripe-js": "^2.5.1", "@stripe/stripe-js": "^3.0.6", + "@types/qrcode": "^1.5.5", "astro": "^4.4.8", "astro-i18next": "^1.0.0-beta.21", "dayjs": "^1.11.10", @@ -31,6 +32,7 @@ "minisearch": "^6.3.0", "nanostores": "^0.10.0", "pell": "^1.0.6", + "qrcode": "^1.5.3", "react": "^18.2.0", "react-csv": "^2.2.2", "react-dom": "^18.2.0", @@ -2565,6 +2567,14 @@ "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz", "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==" }, + "node_modules/@types/qrcode": { + "version": "1.5.5", + "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.5.tgz", + "integrity": "sha512-CdfBi/e3Qk+3Z/fXYShipBT13OJ2fDO2Q2w5CIP5anLTLIndQG9z6P1cnm+8zCWSpm5dnxMFd/uREtb0EXuQzg==", + "dependencies": { + "@types/node": "*" + } + }, "node_modules/@types/react": { "version": "18.2.61", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.61.tgz", @@ -4299,6 +4309,11 @@ "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } }, + "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/dlv": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", @@ -4402,6 +4417,11 @@ "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz", "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==" }, + "node_modules/encode-utf8": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/encode-utf8/-/encode-utf8-1.0.3.tgz", + "integrity": "sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw==" + }, "node_modules/end-of-stream": { "version": "1.4.4", "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz", @@ -8227,6 +8247,14 @@ "integrity": "sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA==", "dev": true }, + "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/postcss": { "version": "8.4.38", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", @@ -8609,6 +8637,207 @@ "once": "^1.3.1" } }, + "node_modules/qrcode": { + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.3.tgz", + "integrity": "sha512-puyri6ApkEHYiVl4CFzo1tDkAZ+ATcnbJrJ6RiBM1Fhctdn/ix9MTE3hRph33omisEbC/2fcfemsseiKgBPKZg==", + "dependencies": { + "dijkstrajs": "^1.0.1", + "encode-utf8": "^1.0.3", + "pngjs": "^5.0.0", + "yargs": "^15.3.1" + }, + "bin": { + "qrcode": "bin/qrcode" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/qrcode/node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "engines": { + "node": ">=8" + } + }, + "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/camelcase": { + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", + "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", + "engines": { + "node": ">=6" + } + }, + "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/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/qrcode/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==" + }, + "node_modules/qrcode/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==" + }, + "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/string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/qrcode/node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "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/quadbin": { "version": "0.1.9", "resolved": "https://registry.npmjs.org/quadbin/-/quadbin-0.1.9.tgz", @@ -9094,6 +9323,11 @@ "node": ">=0.10.0" } }, + "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==" + }, "node_modules/resolve": { "version": "1.22.8", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", @@ -9703,6 +9937,11 @@ "resolved": "https://registry.npmjs.org/serialize-query-params/-/serialize-query-params-2.0.2.tgz", "integrity": "sha512-1chMo1dST4pFA9RDXAtF0Rbjaut4is7bzFbI1Z26IuMub68pNCILku85aYmeFhvnY//BXUPUhoRMjYcsT93J/Q==" }, + "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==" + }, "node_modules/sharp": { "version": "0.32.6", "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.6.tgz", @@ -11631,6 +11870,11 @@ "node": ">= 8" } }, + "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==" + }, "node_modules/which-pm": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/which-pm/-/which-pm-2.1.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index 74590dc43..19f7deda5 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -22,6 +22,7 @@ "@nanostores/react": "^0.7.2", "@stripe/react-stripe-js": "^2.5.1", "@stripe/stripe-js": "^3.0.6", + "@types/qrcode": "^1.5.5", "astro": "^4.4.8", "astro-i18next": "^1.0.0-beta.21", "dayjs": "^1.11.10", @@ -38,6 +39,7 @@ "minisearch": "^6.3.0", "nanostores": "^0.10.0", "pell": "^1.0.6", + "qrcode": "^1.5.3", "react": "^18.2.0", "react-csv": "^2.2.2", "react-dom": "^18.2.0", diff --git a/frontend/src/components/react/pages/ChainMemberList.tsx b/frontend/src/components/react/pages/ChainMemberList.tsx index ecbca2e64..8b724bf5d 100644 --- a/frontend/src/components/react/pages/ChainMemberList.tsx +++ b/frontend/src/components/react/pages/ChainMemberList.tsx @@ -9,10 +9,12 @@ import { type ReactElement, lazy, Suspense, + useRef, } from "react"; import dayjs from "../util/dayjs"; import simplifyDays from "../util/simplify-days"; +import QrCode from "qrcode"; import { UserDataExport } from "../components/DataExport"; import { @@ -51,6 +53,7 @@ import useLocalizePath from "../util/localize_path.hooks"; import { loginSuperAsGenerateLink } from "../../../api/login"; import ChainDescription from "../components/FindChain/ChainDescription"; import { useLegal } from "../util/user.hooks"; +import isSSR from "../util/is_ssr"; const RouteMapPopup = lazy( () => import("../components/RouteMap/RouteMapPopup"), ); @@ -91,6 +94,9 @@ export default function ChainMemberList() { const [error, setError] = useState(""); const [selectedTable, setSelectedTable] = useState("route"); const addCopyAttributes = useToClipboard(); + const refQrCode = useRef(null); + const refQrCodeDialog = useRef(null); + const [openQrCode, setOpenQrCode] = useState(false); const participantsSortUsers = useMemo(() => { if (!users || !chainUID) return []; @@ -154,6 +160,10 @@ export default function ChainMemberList() { } } + function toggleDialog() { + setOpenQrCode((s) => !s); + } + async function handleChangeOpenToNewMembers( e: ChangeEvent, ) { @@ -339,6 +349,18 @@ export default function ChainMemberList() { refresh(true); }, [authUser]); + useEffect(() => { + if (isSSR()) return; + const shareLink = + PUBLIC_BASE_URL + localizePath("/loops/users/signup/?chain=" + chainUID); + console.log("sharelink", shareLink); + QrCode.toCanvas(refQrCode.current, shareLink, { + width: 300, + }).catch((err) => { + console.error(err); + }); + }); + const [filteredUsersHost /*filteredUsersNotHost*/] = useMemo(() => { let host: User[] = []; let notHost: User[] = []; @@ -455,7 +477,7 @@ export default function ChainMemberList() {
- + + + +

+ {shareLink} +

+ +

{chain.name} From de9edf8e7ea261ae76011b43c57c83ec70cde22a Mon Sep 17 00:00:00 2001 From: "Lucian I. Last" Date: Wed, 1 May 2024 10:15:50 +0200 Subject: [PATCH 02/15] Complete isMe addressListItem --- .../AddressList/AddressListItem.tsx | 111 ++++++++++-------- app/src/pages/AddressList.tsx | 23 ++-- app/src/tailwind.css | 11 ++ 3 files changed, 90 insertions(+), 55 deletions(-) diff --git a/app/src/components/AddressList/AddressListItem.tsx b/app/src/components/AddressList/AddressListItem.tsx index 6e483b2c2..46f961ee7 100644 --- a/app/src/components/AddressList/AddressListItem.tsx +++ b/app/src/components/AddressList/AddressListItem.tsx @@ -1,6 +1,6 @@ import { IonItem, IonText, IonIcon } from "@ionic/react"; import { t } from "i18next"; -import { shield, pauseCircleSharp } from "ionicons/icons"; +import { shield, pauseCircleSharp, bag } from "ionicons/icons"; import { Bag, User } from "../../api/types"; import BagSVG from "../Bags/Svg"; @@ -30,64 +30,81 @@ export default function AddressListItem({ - -
- {user.name} - - {isHost ? ( - - ) : null} -
- - {isUserPaused ? ( - isChainAdmin ? ( - {user.address} - ) : null - ) : isAddressPrivate ? ( -   - ) : ( - {user.address} - )} - - + {isHost ? ( + + ) : null} {isUserPaused ? ( ) : ( - {"#" + number} + + # + {number} + )} -
- {bags.map((b) => ( -
- +
+
+
+ {user.name} +
+ + {isUserPaused ? ( + isChainAdmin ? ( + {user.address} + ) : null + ) : isAddressPrivate ? ( +   + ) : ( + {user.address} + )} + +
+
+
+ {bags.map((b) => ( +
+ +
+ ))}
- ))} +
); diff --git a/app/src/pages/AddressList.tsx b/app/src/pages/AddressList.tsx index 27dbbbdff..ec99293e0 100644 --- a/app/src/pages/AddressList.tsx +++ b/app/src/pages/AddressList.tsx @@ -15,7 +15,7 @@ import { IonTitle, IonToolbar, } from "@ionic/react"; -import { useContext, useMemo, useRef, useState } from "react"; +import { useContext, useEffect, useMemo, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import { StoreContext } from "../stores/Store"; import { openOutline, searchOutline } from "ionicons/icons"; @@ -59,6 +59,16 @@ export default function AddressList() { const [search, setSearch] = useState(""); const slowSearch = useDebounce(search, 500); + + useEffect(() => { + if (authUser) { + const el = document.querySelector("ali-" + authUser.uid); + el?.scrollIntoView({ + block: "center", + }); + } + }, []); + const routeListItems = useMemo(() => { const routeLength = route.length; if (!chain || routeLength === 0) return []; @@ -68,13 +78,10 @@ export default function AddressList() { } let topRouteIndex = 0; if (routeListView === "dynamic") { - const routePrivacy = chain.route_privacy || 2; - if (routePrivacy * 2 < routeLength) { - topRouteIndex = wrapIndex( - meRouteIndex - (routePrivacy <= 3 ? routePrivacy : 3), - routeLength, - ); - } + topRouteIndex = + routeLength < 6 + ? routeLength - 1 + : wrapIndex(meRouteIndex - 6, routeLength); console.log("topRouteIndex", topRouteIndex); } diff --git a/app/src/tailwind.css b/app/src/tailwind.css index 3d58461d0..5954373cf 100644 --- a/app/src/tailwind.css +++ b/app/src/tailwind.css @@ -81,6 +81,11 @@ rgba(255, 213, 52, 1) 40px ); } + .tw-shadow-bags { + box-shadow: 0px 0px 3px 2px #fff; + border-radius: 5px; + background-color: #fff; + } } ion-radio::part(container) { @@ -106,3 +111,9 @@ ion-radio.radio-checked::part(mark) { transform: rotate(45deg); } + +ion-item.ion-color-primary::part(detail-icon) { + --detail-icon-color: var(--ion-color-light) !important; + --detail-icon-opacity: 0.8; + /* display: none !important; */ +} From 819bf62c1f3b9dd2c0cef03a71c169c447618f56 Mon Sep 17 00:00:00 2001 From: "Lucian I. Last" Date: Wed, 1 May 2024 11:36:16 +0200 Subject: [PATCH 03/15] Add popup form --- .../components/react/components/Navbar.tsx | 2 + .../components/react/components/PopupForm.tsx | 71 +++++++++++++++++++ 2 files changed, 73 insertions(+) create mode 100644 frontend/src/components/react/components/PopupForm.tsx diff --git a/frontend/src/components/react/components/Navbar.tsx b/frontend/src/components/react/components/Navbar.tsx index 213bc9df4..e130c2b93 100644 --- a/frontend/src/components/react/components/Navbar.tsx +++ b/frontend/src/components/react/components/Navbar.tsx @@ -5,6 +5,7 @@ import { useStore } from "@nanostores/react"; import useLocalizePath from "../util/localize_path.hooks"; import useHydrated from "../util/hydrated.hooks"; import ToastManager from "../layout/ToastManager"; +import PopupForm from "./PopupForm"; function Navbar(props: { pathname: string }) { const { t, i18n } = useTranslation(); @@ -21,6 +22,7 @@ function Navbar(props: { pathname: string }) { return ( <> +
{ + if (isSSR()) return; + + const now = new Date(); + if (!window.localStorage.getItem(KEY) && maxDate > now) { + setOpen(true); + } + }); + + function close() { + setOpen(false); + window.localStorage.setItem(KEY, "closed"); + } + function submit() { + close(); + + window.open(url, "_blank")!.focus(); + } + + return ( + +
+
+

+ Lorem, ipsum dolor sit amet consectetur +

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus, + aperiam eligendi neque aliquam error voluptatibus commodi, + distinctio hic facere in vitae facilis vero magnam similique! + Mollitia saepe blanditiis veritatis magnam. +

+
+ + +
+
+
+ + ); +} From efc02a11dcda8ac5d6a9eac867c762e5e248218c Mon Sep 17 00:00:00 2001 From: "Lucian I. Last" Date: Wed, 1 May 2024 11:36:40 +0200 Subject: [PATCH 04/15] move to static counter & fix size addresses --- .../components/react/components/Counters/Counters.tsx | 10 +++------- frontend/src/components/react/components/Navbar.tsx | 2 +- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/react/components/Counters/Counters.tsx b/frontend/src/components/react/components/Counters/Counters.tsx index 7afc0ca23..206026319 100644 --- a/frontend/src/components/react/components/Counters/Counters.tsx +++ b/frontend/src/components/react/components/Counters/Counters.tsx @@ -48,7 +48,7 @@ export default function Counters() {
-
+
{isVisible ? ( ) : ( @@ -72,7 +72,7 @@ export default function Counters() {
- {isVisible ? : "0"} + {new Intl.NumberFormat().format(1197375)}  {t("nCo2")} @@ -85,11 +85,7 @@ export default function Counters() {
- {isVisible ? ( - - ) : ( - "0" - )} + {new Intl.NumberFormat().format(580544000)}  {t("nLiters")} diff --git a/frontend/src/components/react/components/Navbar.tsx b/frontend/src/components/react/components/Navbar.tsx index e130c2b93..63ae6e21e 100644 --- a/frontend/src/components/react/components/Navbar.tsx +++ b/frontend/src/components/react/components/Navbar.tsx @@ -22,7 +22,7 @@ function Navbar(props: { pathname: string }) { return ( <> - +
Date: Wed, 1 May 2024 11:47:35 +0200 Subject: [PATCH 05/15] Fix vps2 deployment --- .github/workflows/deploy-acceptance-app.yml | 2 +- .github/workflows/deploy-acceptance-fe.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/deploy-acceptance-app.yml b/.github/workflows/deploy-acceptance-app.yml index cc8897dfd..18c15f75b 100644 --- a/.github/workflows/deploy-acceptance-app.yml +++ b/.github/workflows/deploy-acceptance-app.yml @@ -35,6 +35,6 @@ jobs: run: | rsync -az --delete ./app/build/ admin@vps2.vps.webdock.cloud:/home/admin/acc.app.clothingloop.org/ ssh admin@vps2.vps.webdock.cloud "\ - sudo chmod -R 0775 /home/admin/acc.app.clothingloop.org/; \ + sudo rsync -z -rlt --chown=www-data:www-data --chmod=0775 --delete /home/admin/acc.app.clothingloop.org/ /var/www/acc.app.clothingloop.org/; \ sudo systemctl reload caddy" echo "done" diff --git a/.github/workflows/deploy-acceptance-fe.yml b/.github/workflows/deploy-acceptance-fe.yml index 8661eee69..0ed2fe612 100644 --- a/.github/workflows/deploy-acceptance-fe.yml +++ b/.github/workflows/deploy-acceptance-fe.yml @@ -35,6 +35,6 @@ jobs: run: | rsync -az --delete ./frontend/build/ admin@vps2.vps.webdock.cloud:/home/admin/acc.clothingloop.org/ ssh admin@vps2.vps.webdock.cloud "\ - sudo chmod -R 0775 /home/admin/acc.clothingloop.org/; \ + sudo rsync -z -rlt --chown=www-data:www-data --chmod=0775 --delete /home/admin/acc.clothingloop.org/ /var/www/acc.clothingloop.org/; \ sudo systemctl reload caddy" echo "done" From cb4e5a1ae06eec234d5bd5c58d6cfffd1a8fd00f Mon Sep 17 00:00:00 2001 From: "Lucian I. Last" Date: Wed, 1 May 2024 12:43:11 +0200 Subject: [PATCH 06/15] Better bags --- app/src/components/AddressList/AddressListItem.tsx | 6 ++++-- app/src/tailwind.css | 10 ++++++++-- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/app/src/components/AddressList/AddressListItem.tsx b/app/src/components/AddressList/AddressListItem.tsx index 46f961ee7..9805dd289 100644 --- a/app/src/components/AddressList/AddressListItem.tsx +++ b/app/src/components/AddressList/AddressListItem.tsx @@ -95,12 +95,14 @@ export default function AddressListItem({ > {bags.map((b) => (
- +
+ +
))}
diff --git a/app/src/tailwind.css b/app/src/tailwind.css index 5954373cf..675512c0f 100644 --- a/app/src/tailwind.css +++ b/app/src/tailwind.css @@ -82,8 +82,14 @@ ); } .tw-shadow-bags { - box-shadow: 0px 0px 3px 2px #fff; - border-radius: 5px; + @apply tw-relative; + } + .tw-shadow-bags::before { + @apply tw-block tw-w-full tw-h-full tw-absolute -tw-z-10; + content: ""; + outline: 2px solid #fff; + border-radius: 100%; + outline-offset: -0.3px; background-color: #fff; } } From 67588b74a7cf6a4734adc3d9059243f6438f8d71 Mon Sep 17 00:00:00 2001 From: "Lucian I. Last" Date: Wed, 1 May 2024 14:19:51 +0200 Subject: [PATCH 07/15] Add more anbi text to donation page --- .../components/react/pages/DonationForm.tsx | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/react/pages/DonationForm.tsx b/frontend/src/components/react/pages/DonationForm.tsx index 6a4681d84..0403c1b00 100644 --- a/frontend/src/components/react/pages/DonationForm.tsx +++ b/frontend/src/components/react/pages/DonationForm.tsx @@ -338,6 +338,8 @@ function DonationFormContent() { ); } +const anbiUrl = + "https://www.belastingdienst.nl/wps/wcm/connect/bldcontentnl/belastingdienst/zakelijk/bijzondere_regelingen/goede_doelen/algemeen_nut_beogende_instellingen/wat_is_een_anbi"; export default function DonationForm() { const { t } = useTranslation(); @@ -366,7 +368,7 @@ export default function DonationForm() {
+
+ Stichting Slow Fashion Movement is recognised by the Dutch tax + authorities as an ANBI. This stands for “Algemeen Nut Beogende + Instelling”, which translates to{" "} + + Public Benefit Organisation + + . +
+
  • An ANBI does not pay donation tax over donations that are used From ba3f79af79b1736b031183568bf437073162e52d Mon Sep 17 00:00:00 2001 From: "Lucian I. Last" Date: Wed, 1 May 2024 14:51:26 +0200 Subject: [PATCH 08/15] survey --- frontend/astro-i18next.config.mjs | 9 ++++++++- frontend/public/locales/en/survey.json | 5 +++++ frontend/public/locales/nl/survey.json | 5 +++++ .../src/components/react/components/PopupForm.tsx | 15 +++++---------- 4 files changed, 23 insertions(+), 11 deletions(-) create mode 100644 frontend/public/locales/en/survey.json create mode 100644 frontend/public/locales/nl/survey.json diff --git a/frontend/astro-i18next.config.mjs b/frontend/astro-i18next.config.mjs index de2ac8a7f..74d81006d 100644 --- a/frontend/astro-i18next.config.mjs +++ b/frontend/astro-i18next.config.mjs @@ -5,7 +5,14 @@ const languages = getLanguages(false); /** @type {import('astro-i18next').AstroI18nextConfig} */ export default { locales: languages, - namespaces: ["about", "faq", "testimonials", "translation", "contribute"], + namespaces: [ + "about", + "faq", + "testimonials", + "translation", + "contribute", + "survey", + ], defaultNamespace: "translation", load: ["server", "client"], // load i18next server and client side i18nextServerPlugins: { diff --git a/frontend/public/locales/en/survey.json b/frontend/public/locales/en/survey.json new file mode 100644 index 000000000..72ff16e3a --- /dev/null +++ b/frontend/public/locales/en/survey.json @@ -0,0 +1,5 @@ +{ + "title": "Can we please ask you some questions?", + "body": "We are very curious how you experience the Clothing Loop! It only takes about five minutes to fill in our short survey. Your answers will be of great help to us.", + "btnSubmit": "Form" +} diff --git a/frontend/public/locales/nl/survey.json b/frontend/public/locales/nl/survey.json new file mode 100644 index 000000000..8cd580f0d --- /dev/null +++ b/frontend/public/locales/nl/survey.json @@ -0,0 +1,5 @@ +{ + "title": "Mogen we je een paar vragen stellen?", + "body": "We zijn erg benieuwd hoe jij de Clothing Loop ervaart! Het duurt slechts vijf minuten om onze korte enquête in te vullen. Jouw mening is belangrijk voor ons!", + "btnSubmit": "Enquête" +} diff --git a/frontend/src/components/react/components/PopupForm.tsx b/frontend/src/components/react/components/PopupForm.tsx index 27cae1092..45ed719d5 100644 --- a/frontend/src/components/react/components/PopupForm.tsx +++ b/frontend/src/components/react/components/PopupForm.tsx @@ -7,7 +7,7 @@ const maxDate = new Date(2024, 6, 1); const url = "http://google.com"; export default function PopupForm() { - const { t } = useTranslation(); + const { t } = useTranslation("survey"); const [open, setOpen] = useState(false); useEffect(() => { if (isSSR()) return; @@ -40,28 +40,23 @@ export default function PopupForm() {

    - Lorem, ipsum dolor sit amet consectetur + {t("title")}

    -

    - Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus, - aperiam eligendi neque aliquam error voluptatibus commodi, - distinctio hic facere in vitae facilis vero magnam similique! - Mollitia saepe blanditiis veritatis magnam. -

    +

    {t("body")}

    From b1330de0242961933adceaadf79c59bc2fb0bf40 Mon Sep 17 00:00:00 2001 From: "Lucian I. Last" Date: Wed, 1 May 2024 15:12:25 +0200 Subject: [PATCH 09/15] outline still gives border line --- app/src/tailwind.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/src/tailwind.css b/app/src/tailwind.css index 675512c0f..397cacd6a 100644 --- a/app/src/tailwind.css +++ b/app/src/tailwind.css @@ -87,9 +87,8 @@ .tw-shadow-bags::before { @apply tw-block tw-w-full tw-h-full tw-absolute -tw-z-10; content: ""; - outline: 2px solid #fff; + transform: scale(1.15); border-radius: 100%; - outline-offset: -0.3px; background-color: #fff; } } From 13aa9cf6957d6cb19b085d0d5b1c246b8cc86324 Mon Sep 17 00:00:00 2001 From: "Lucian I. Last" Date: Wed, 1 May 2024 16:21:11 +0200 Subject: [PATCH 10/15] Fix height when address missing --- app/src/components/AddressList/AddressListItem.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/src/components/AddressList/AddressListItem.tsx b/app/src/components/AddressList/AddressListItem.tsx index 9805dd289..c62c67ca8 100644 --- a/app/src/components/AddressList/AddressListItem.tsx +++ b/app/src/components/AddressList/AddressListItem.tsx @@ -68,7 +68,7 @@ export default function AddressListItem({ {user.name}

@@ -77,7 +77,7 @@ export default function AddressListItem({ {user.address} ) : null ) : isAddressPrivate ? ( -   + null ) : ( {user.address} )} From 01d8533cfc16ffdedc78a12e6d2b1df6087f6669 Mon Sep 17 00:00:00 2001 From: "Lucian I. Last" Date: Wed, 1 May 2024 16:21:28 +0200 Subject: [PATCH 11/15] Fix hide phonenumber when missing --- app/src/components/UserCard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/src/components/UserCard.tsx b/app/src/components/UserCard.tsx index c2b14be3e..d942e20b4 100644 --- a/app/src/components/UserCard.tsx +++ b/app/src/components/UserCard.tsx @@ -82,7 +82,7 @@ export default function UserCard({ }) { const { t } = useTranslation(); const isAddressPrivate = IsPrivate(user.address); - const isEmailPrivate = IsPrivate(user.email); + const isPhonePrivate = !user.phone_number || IsPrivate(user.phone_number); const isUserAdmin = useMemo( () => IsChainAdmin(user, chain?.uid), [user, chain], @@ -158,7 +158,7 @@ export default function UserCard({
- {isEmailPrivate && !user.phone_number ? null : ( + {isPhonePrivate ? null : ( <> Date: Wed, 1 May 2024 16:21:43 +0200 Subject: [PATCH 12/15] Set to survey in en --- frontend/public/locales/en/survey.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/public/locales/en/survey.json b/frontend/public/locales/en/survey.json index 72ff16e3a..d09b22545 100644 --- a/frontend/public/locales/en/survey.json +++ b/frontend/public/locales/en/survey.json @@ -1,5 +1,5 @@ { "title": "Can we please ask you some questions?", "body": "We are very curious how you experience the Clothing Loop! It only takes about five minutes to fill in our short survey. Your answers will be of great help to us.", - "btnSubmit": "Form" + "btnSubmit": "Survey" } From 4534214fbed1cd74181e31406e395e4fb16cd10e Mon Sep 17 00:00:00 2001 From: "Lucian I. Last" Date: Wed, 1 May 2024 16:22:15 +0200 Subject: [PATCH 13/15] Set url form & change text size --- frontend/src/components/react/components/PopupForm.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/react/components/PopupForm.tsx b/frontend/src/components/react/components/PopupForm.tsx index 45ed719d5..5dabbaf2e 100644 --- a/frontend/src/components/react/components/PopupForm.tsx +++ b/frontend/src/components/react/components/PopupForm.tsx @@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next"; const KEY = "2024-05-form"; const maxDate = new Date(2024, 6, 1); -const url = "http://google.com"; +const url = "https://yew6s2omgul.typeform.com/to/xoeaKKeu"; export default function PopupForm() { const { t } = useTranslation("survey"); @@ -38,11 +38,11 @@ export default function PopupForm() { open={open} >
-
+

{t("title")}

-

{t("body")}

+

{t("body")}