From 0aaf9aa35ed5427448051f0ff71e69e8174ea7bd Mon Sep 17 00:00:00 2001
From: Ewan Breakey <ebreakey@gmail.com>
Date: Mon, 12 Jun 2023 02:16:30 +1000
Subject: [PATCH] Show warning when selected dates are in the past

---
 .../components/Month/Month.module.scss           |  9 +++++++++
 .../CalendarField/components/Month/Month.tsx     | 16 ++++++++++++++--
 frontend/src/i18n/locales/en-GB/home.json        |  4 ++++
 frontend/src/i18n/locales/en/home.json           |  3 +++
 4 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/CalendarField/components/Month/Month.module.scss b/frontend/src/components/CalendarField/components/Month/Month.module.scss
index 1443824..8528dee 100644
--- a/frontend/src/components/CalendarField/components/Month/Month.module.scss
+++ b/frontend/src/components/CalendarField/components/Month/Month.module.scss
@@ -91,3 +91,12 @@
     color: rgba(255,255,255,.5);
   }
 }
+
+.warningLabel {
+  display: flex;
+  padding-block: 0.9em;
+  gap: 0.5em;
+  align-items: center;
+  opacity: .75;
+  font-size: .9em;
+}
diff --git a/frontend/src/components/CalendarField/components/Month/Month.tsx b/frontend/src/components/CalendarField/components/Month/Month.tsx
index 6bd14c0..89791dd 100644
--- a/frontend/src/components/CalendarField/components/Month/Month.tsx
+++ b/frontend/src/components/CalendarField/components/Month/Month.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { rotateArray } from '@giraugh/tools'
 import { Temporal } from '@js-temporal/polyfill'
-import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { AlertTriangle, AlertTriangleIcon, ChevronLeft, ChevronRight, FileWarningIcon } from 'lucide-react'
 
 import Button from '/src/components/Button/Button'
 import { useTranslation } from '/src/i18n/client'
@@ -22,7 +22,8 @@ const Month = ({ value, onChange }: MonthProps) => {
 
   const weekStart = useStore(useSettingsStore, state => state.weekStart) ?? 0
 
-  const [page, setPage] = useState<Temporal.PlainYearMonth>(Temporal.Now.plainDateISO().toPlainYearMonth())
+  const now = useMemo(() => Temporal.Now.plainDateISO(), [])
+  const [page, setPage] = useState<Temporal.PlainYearMonth>(now.toPlainYearMonth())
   const dates = useMemo(() => calculateMonth(page, weekStart, i18n.language), [page, weekStart, i18n.language])
 
   // Ref and state required to rerender but also access static version in callbacks
@@ -36,6 +37,12 @@ const Month = ({ value, onChange }: MonthProps) => {
   const startPos = useRef({ x: 0, y: 0 })
   const mode = useRef<'add' | 'remove'>()
 
+  // Is 1 or more of the selected dates in the past?
+  const hasPastDates = useMemo(() => value
+    .some(plainDate => Temporal.PlainDate.compare(
+      now, Temporal.PlainDate.from(plainDate)
+    ) > 0), [value])
+
   const handleFinishSelection = useCallback(() => {
     if (mode.current === 'add') {
       onChange([...value, ...selectingRef.current])
@@ -112,6 +119,11 @@ const Month = ({ value, onChange }: MonthProps) => {
         >{date.label}</button>)
       )}
     </div>
+
+    {hasPastDates && <div className={styles.warningLabel}>
+      <AlertTriangle size='1.2em' />
+      <span>{t('form.dates.warnings.date_in_past')}</span>
+    </div>}
   </>
 }
 
diff --git a/frontend/src/i18n/locales/en-GB/home.json b/frontend/src/i18n/locales/en-GB/home.json
index 468d467..1cb5b90 100644
--- a/frontend/src/i18n/locales/en-GB/home.json
+++ b/frontend/src/i18n/locales/en-GB/home.json
@@ -17,7 +17,11 @@
         "previous": "Previous month",
         "next": "Next month",
         "today": "today"
+      },
+      "warnings": {
+        "date_in_past": "Some of the dates you've selected are in the past"
       }
+
     },
     "times": {
       "label": "What times might work?",
diff --git a/frontend/src/i18n/locales/en/home.json b/frontend/src/i18n/locales/en/home.json
index 468d467..edf0b5c 100644
--- a/frontend/src/i18n/locales/en/home.json
+++ b/frontend/src/i18n/locales/en/home.json
@@ -17,6 +17,9 @@
         "previous": "Previous month",
         "next": "Next month",
         "today": "today"
+      },
+      "warnings": {
+        "date_in_past": "Some of the dates you've selected are in the past"
       }
     },
     "times": {