diff --git a/frontend/package.json b/frontend/package.json index 2354ae04..55cadb71 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -42,7 +42,6 @@ "canvas-confetti": "^1.9.2", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", - "date-fns": "^3.6.0", "dayjs": "^1.11.10", "embla-carousel-react": "^8.0.2", "gradient-avatar": "^1.0.2", diff --git a/frontend/src/components/ExpirySelect.tsx b/frontend/src/components/ExpirySelect.tsx index f8a69322..8ff1e911 100644 --- a/frontend/src/components/ExpirySelect.tsx +++ b/frontend/src/components/ExpirySelect.tsx @@ -1,4 +1,4 @@ -import { format } from "date-fns"; +import dayjs from "dayjs"; import { CalendarIcon } from "lucide-react"; import React from "react"; import { Calendar } from "src/components/ui/calendar"; @@ -14,9 +14,9 @@ const daysFromNow = (date?: Date) => { if (!date) { return 0; } - return Math.ceil( - (new Date(date).getTime() - Date.now()) / (1000 * 60 * 60 * 24) - ); + const now = dayjs(); + const targetDate = dayjs(date); + return targetDate.diff(now, "day"); }; interface ExpiryProps { @@ -66,7 +66,9 @@ const ExpirySelect: React.FC = ({ value, onChange }) => { > - {customExpiry && value ? format(value, "PPP") : "Custom..."} + {customExpiry && value + ? dayjs(value).format("DD MMMM YYYY") + : "Custom..."} diff --git a/frontend/src/components/Permissions.tsx b/frontend/src/components/Permissions.tsx index 58e2907b..d85e8157 100644 --- a/frontend/src/components/Permissions.tsx +++ b/frontend/src/components/Permissions.tsx @@ -35,17 +35,26 @@ const Permissions: React.FC = ({ }) => { const [permissions, setPermissions] = React.useState(initialPermissions); + const [canEditBudgetAmount, setCanEditBudgetAmount] = React.useState( + isNewConnection ? Number.isNaN(permissions.maxAmount) : canEditPermissions + ); + const [canEditExpiry, setCanEditExpiry] = React.useState( + isNewConnection ? !permissions.expiresAt : canEditPermissions + ); + // this is triggered when edit mode is cancelled in show app React.useEffect(() => { setPermissions(initialPermissions); - }, [initialPermissions]); + setCanEditBudgetAmount( + isNewConnection + ? Number.isNaN(initialPermissions.maxAmount) + : canEditPermissions + ); + setCanEditExpiry( + isNewConnection ? !initialPermissions.expiresAt : canEditPermissions + ); + }, [canEditPermissions, initialPermissions, isNewConnection]); - const canEditBudgetAmount = isNewConnection - ? Number.isNaN(permissions.maxAmount) - : canEditPermissions; - const canEditExpiry = isNewConnection - ? !permissions.expiresAt - : canEditPermissions; const [showBudgetOptions, setShowBudgetOptions] = React.useState( isNewConnection ? !!permissions.maxAmount : true ); diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 14264eb0..7bcceb53 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -1845,11 +1845,6 @@ dargs@^8.0.0: resolved "https://registry.yarnpkg.com/dargs/-/dargs-8.1.0.tgz#a34859ea509cbce45485e5aa356fef70bfcc7272" integrity sha512-wAV9QHOsNbwnWdNW2FYvE1P56wtgSbM+3SZcdGiWQILwVjACCXDCI3Ai8QlCjMDB8YK5zySiXZYBiwGmNY3lnw== -date-fns@^3.6.0: - version "3.6.0" - resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.6.0.tgz#f20ca4fe94f8b754951b24240676e8618c0206bf" - integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww== - dayjs@^1.11.10: version "1.11.10" resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"