feat(regulations): Updated date flow

libs/portals/admin/regulations-admin/src/components/EditMeta.tsx

@@ -1,6 +1,7 @@
 import {
   Box,
   Button,
+  Checkbox,
   Column,
   Columns,
   DatePicker,
@@ -11,11 +12,12 @@ import { useLocale } from '@island.is/localization'
 import { LawChaptersSelect } from './LawChaptersSelect'
 import { useDraftingState } from '../state/useDraftingState'
 import { RegulationDraftTypes } from '../types'
-import { getNextWorkday } from '../utils'
+import { getNextWorkday, getMinPublishDate } from '../utils'
 
 export const EditMeta = () => {
   const { formatMessage: t } = useLocale()
   const { draft, actions } = useDraftingState()
+  const { updateState } = actions
 
   const type = draft.type
   const typeName =
@@ -29,7 +31,7 @@ export const EditMeta = () => {
   return (
     <>
       <Columns space={3} collapseBelow="lg">
-        <Column>
+        <Column width="6/12">
           <Box marginBottom={3}>
             <Input
               label={t(msg.type)}
@@ -43,8 +45,50 @@ export const EditMeta = () => {
             />
           </Box>
         </Column>
-
-        <Column>
+      </Columns>
+      <Box marginBottom={3}>
+        <Columns space={3} collapseBelow="lg">
+          <Column width="4/12">
+            {/* idealPublishDate Input */}
+            <DatePicker
+              size="sm"
+              label={t(msg.idealPublishDate)}
+              placeholderText={t(msg.idealPublishDate_default)}
+              minDate={getMinPublishDate(
+                draft.fastTrack.value,
+                draft.signatureDate.value,
+              )}
+              selected={draft.idealPublishDate.value}
+              handleChange={(date: Date) =>
+                updateState('idealPublishDate', date)
+              }
+              hasError={
+                draft.idealPublishDate.showError &&
+                !!draft.idealPublishDate.error
+              }
+              errorMessage={
+                draft.idealPublishDate.error && t(draft.idealPublishDate.error)
+              }
+              backgroundColor="blue"
+            />
+          </Column>
+          <Column width="4/12">
+            {/* Request fastTrack */}
+            <Box display="flex" height="full" alignItems="center">
+              <Checkbox
+                label={t(msg.applyForFastTrack)}
+                labelVariant="default"
+                checked={draft.fastTrack.value}
+                onChange={() => {
+                  updateState('fastTrack', !draft.fastTrack.value)
+                }}
+              />
+            </Box>
+          </Column>
+        </Columns>
+      </Box>
+      <Columns space={3} collapseBelow="lg">
+        <Column width="4/12">
           <Box marginBottom={3}>
             <DatePicker
               size="sm"

libs/portals/admin/regulations-admin/src/components/EditReviewOverview.tsx

@@ -153,7 +153,7 @@ export const EditReviewOverview = (props: EditReviewOverviewProps) => {
         </Text>
       </OverviewItem>
 
-      <OverviewItem label={t(editorMsgs.idealPublishDate)} step="signature">
+      <OverviewItem label={t(editorMsgs.idealPublishDate)} step="meta">
         <Text>
           {formatDate(draft.idealPublishDate.value) ||
             t(editorMsgs.idealPublishDate_default)}

libs/portals/admin/regulations-admin/src/components/EditSignature.tsx

@@ -3,10 +3,8 @@ import {
   AlertMessage,
   Box,
   Button,
-  Checkbox,
   Column,
   Columns,
-  DatePicker,
   Inline,
   Input,
   InputFileUpload,
@@ -15,7 +13,6 @@ import {
 } from '@island.is/island-ui/core'
 import { useDraftingState } from '../state/useDraftingState'
 import { editorMsgs as msg } from '../lib/messages'
-import { getMinPublishDate } from '../utils'
 
 import { EditorInput } from './EditorInput'
 import { HTMLText, PlainText, URLString } from '@island.is/regulations'
@@ -216,42 +213,6 @@ export const EditSignature = () => {
             </Column>
           </Columns>
 
-          <Box>
-            <Inline space="gutter" alignY="center">
-              {/* idealPublishDate Input */}
-              <DatePicker
-                size="sm"
-                label={t(msg.idealPublishDate)}
-                placeholderText={t(msg.idealPublishDate_default)}
-                minDate={getMinPublishDate(
-                  draft.fastTrack.value,
-                  draft.signatureDate.value,
-                )}
-                selected={draft.idealPublishDate.value}
-                handleChange={(date: Date) =>
-                  updateState('idealPublishDate', date)
-                }
-                hasError={
-                  draft.idealPublishDate.showError &&
-                  !!draft.idealPublishDate.error
-                }
-                errorMessage={
-                  draft.idealPublishDate.error &&
-                  t(draft.idealPublishDate.error)
-                }
-                backgroundColor="blue"
-              />
-              {/* Request fastTrack */}
-              <Checkbox
-                label={t(msg.applyForFastTrack)}
-                labelVariant="default"
-                checked={draft.fastTrack.value}
-                onChange={() => {
-                  updateState('fastTrack', !draft.fastTrack.value)
-                }}
-              />
-            </Inline>
-          </Box>
           <Box marginBottom={3}>
             {/* Clear idealPublishDate */}
             {!!draft.idealPublishDate.value && (

libs/portals/admin/regulations-admin/src/components/impacts/ImpactDate.tsx

@@ -1,7 +1,9 @@
-import { Box, Button, DatePicker } from '@island.is/island-ui/core'
+import { Box, Button, DatePicker, Checkbox } from '@island.is/island-ui/core'
 import { impactMsgs } from '../../lib/messages'
 import { DraftImpactForm } from '../../state/types'
 import { useLocale } from '@island.is/localization'
+import { useEffect, useState } from 'react'
+import { MessageDescriptor } from 'react-intl'
 
 // ---------------------------------------------------------------------------
 
@@ -15,37 +17,61 @@ export type ImpactDateProps = {
 
 export const ImpactDate = (props: ImpactDateProps) => {
   const { impact, onChange, size = 'half', minDate, readOnly } = props
-
+  const [hasCustomDate, setHasCustomDate] = useState(false)
+  const [selectedDate, setSelectedDate] = useState<Date>()
+  const [errorMessage, setErrorMessage] = useState<MessageDescriptor>()
   const date = impact.date
 
+  useEffect(() => {
+    if (hasCustomDate) {
+      setSelectedDate(date.value || minDate)
+    }
+  }, [hasCustomDate, date.value, minDate])
+
+  useEffect(() => {
+    setErrorMessage(date.error)
+  }, [impact.date])
+
   const t = useLocale().formatMessage
 
   return (
     <Box marginBottom={4} width={size}>
-      <DatePicker
-        size="sm"
-        locale="is"
-        label={t(impactMsgs.effectiveDate)}
-        placeholderText={t(impactMsgs.effectiveDate_default)}
-        minDate={minDate ?? date.min}
-        maxDate={date.max}
-        selected={date.value || minDate}
-        handleChange={onChange}
-        hasError={!!date.error}
-        errorMessage={date.error && t(date.error)}
-        backgroundColor="blue"
-        disabled={readOnly}
-      />
-      {!readOnly && !!date.value && (
-        <Button
-          size="small"
-          variant="text"
-          preTextIcon="close"
-          onClick={() => onChange(undefined)}
-        >
-          {t(impactMsgs.effectiveDate_default)}
-        </Button>
-      )}
+      <Box marginBottom={3}>
+        <Checkbox
+          label="Breyting tekur gildi á ákveðinni dagsetningu"
+          labelVariant="default"
+          checked={hasCustomDate}
+          onChange={() => setHasCustomDate(!hasCustomDate)}
+        />
+      </Box>
+      {hasCustomDate ? (
+        <>
+          <DatePicker
+            size="sm"
+            locale="is"
+            label={t(impactMsgs.effectiveDate)}
+            placeholderText={t(impactMsgs.effectiveDate_default)}
+            minDate={minDate ?? date.min}
+            maxDate={date.max}
+            selected={selectedDate}
+            handleChange={onChange}
+            hasError={!!errorMessage}
+            errorMessage={errorMessage && t(errorMessage)}
+            backgroundColor="blue"
+            disabled={readOnly}
+          />
+          {!readOnly && !!date.value && (
+            <Button
+              size="small"
+              variant="text"
+              preTextIcon="close"
+              onClick={() => onChange(undefined)}
+            >
+              {t(impactMsgs.effectiveDate_default)}
+            </Button>
+          )}
+        </>
+      ) : undefined}
     </Box>
   )
 }

package.json

@@ -95,7 +95,7 @@
     "@formatjs/intl-locale": "2.4.33",
     "@formatjs/intl-numberformat": "7.1.5",
     "@hookform/error-message": "2.0.1",
-    "@island.is/regulations-tools": "0.9.0",
+    "@island.is/regulations-tools": "0.9.1",
     "@keyv/redis": "2.6.1",
     "@livechat/widget-core": "1.3.2",
     "@nestjs/apollo": "10.1.0",

yarn.lock

@@ -12131,9 +12131,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@island.is/regulations-tools@npm:0.9.0":
-  version: 0.9.0
-  resolution: "@island.is/regulations-tools@npm:0.9.0"
+"@island.is/regulations-tools@npm:0.9.1":
+  version: 0.9.1
+  resolution: "@island.is/regulations-tools@npm:0.9.1"
   dependencies:
     "@hugsmidjan/htmldiff-js": ^1.3.0
     "@hugsmidjan/qj": ^4.10.2
@@ -12147,7 +12147,7 @@ __metadata:
   peerDependencies:
     react: ">=16.8 <20"
     react-dom: ">=16.8 <20"
-  checksum: 9d4950e590721f78c60644ee7f2c16dfb132960c9383e71cce3dbe9037b8e734c6e8609eb44a623e843ec13187759efd45245078ba4e9c60d456068378a28e62
+  checksum: e141dc6511c7e6e454389f44219a3784d8aa5072c2731020236b1c7964be524471644a0b3917296bb2a3505d451239639ab59f9e68960a25abef939360645c6f
   languageName: node
   linkType: hard
 
@@ -35964,7 +35964,7 @@ __metadata:
     "@graphql-codegen/typescript-react-apollo": 3.3.3
     "@graphql-codegen/typescript-resolvers": 2.7.3
     "@hookform/error-message": 2.0.1
-    "@island.is/regulations-tools": 0.9.0
+    "@island.is/regulations-tools": 0.9.1
     "@keyv/redis": 2.6.1
     "@livechat/widget-core": 1.3.2
     "@nestjs/apollo": 10.1.0