Merge pull request #2155 from decentdao/complete-payroll-ui

Complete payroll UI
decentdao · Jul 17, 2024 · 0bb5ffa · 0bb5ffa
2 parents cb5ddd9 + 4eaae9e
commit 0bb5ffa
Show file tree

Hide file tree

Showing 11 changed files with 484 additions and 54 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
     "lodash.isequal": "^4.5.0",
     "moralis": "^2.26.3",
     "react": "^18.2.0",
+    "react-calendar": "^5.0.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^13.5.0",
     "react-idle-timer": "^5.5.3",

diff --git a/src/assets/css/Calendar.css b/src/assets/css/Calendar.css
@@ -0,0 +1,137 @@
+.react-calendar {
+  /* width: 350px; */
+  max-width: 100%;
+  background: var(--Neutral-2, #221d25);
+  border-radius: 0.5rem;
+  border: 0;
+  font-family: 'TT Firs Neue Variable';
+}
+
+.react-calendar,
+.react-calendar *,
+.react-calendar *:before,
+.react-calendar *:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.react-calendar button {
+  margin: 0;
+  border: 0;
+  outline: none;
+  font-size: 0.875rem;
+  border-radius: 0.5rem;
+}
+
+.react-calendar button:enabled:hover {
+  cursor: pointer;
+}
+
+.react-calendar__navigation {
+  display: flex;
+  height: 44px;
+  margin-bottom: 1em;
+}
+
+.react-calendar__navigation button {
+  min-width: 44px;
+  background: var(--Neutral-2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.5rem;
+  color: #dcc8f0;
+}
+
+.react-calendar__navigation button:disabled {
+  background-color: var(--Neutral-2);
+  color: #524f55;
+}
+
+.react-calendar__navigation button:enabled:focus {
+  background-color: var(--Neutral-2);
+}
+
+.react-calendar__navigation button:enabled:hover {
+  background: var(--Neutral-3, #2e2833);
+  border-radius: 0.5rem;
+}
+
+.react-calendar__month-view__weekdays {
+  text-decoration: none;
+  text-underline-offset: 2rem;
+  text-align: center;
+  text-transform: capitalize;
+  font-size: 0.75rem;
+  color: #9ea8b3;
+}
+
+.react-calendar__month-view__weekdays__weekday {
+  padding: 0.5em;
+}
+
+.react-calendar__month-view__days__day--neighboringMonth,
+.react-calendar__decade-view__years__year--neighboringDecade,
+.react-calendar__century-view__decades__decade--neighboringCentury {
+  color: #8f8796;
+}
+
+.react-calendar__year-view .react-calendar__tile,
+.react-calendar__decade-view .react-calendar__tile,
+.react-calendar__century-view .react-calendar__tile {
+  padding: 2em 0.5em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.react-calendar__tile {
+  height: 2.5rem;
+  width: 2.5rem;
+  max-width: 100%;
+  padding: 10px 6.6667px;
+  font-size: 0.833em;
+}
+
+.react-calendar__tile:disabled {
+  background-color: #221d25;
+  color: #524f55;
+  cursor: not-allowed;
+}
+
+.react-calendar__month-view__days__day--neighboringMonth:disabled,
+.react-calendar__decade-view__years__year--neighboringDecade:disabled,
+.react-calendar__century-view__decades__decade--neighboringCentury:disabled {
+  color: #524f55;
+}
+
+.react-calendar__tile:enabled:hover {
+  background: var(--Neutral-3);
+}
+
+.react-calendar__tile:enabled:focus {
+  background-color: #221d25;
+}
+
+.react-calendar__tile--hasActive {
+  background: #dcc8f0;
+  color: #501464;
+}
+
+.react-calendar__tile--hasActive:enabled:hover,
+.react-calendar__tile--hasActive:enabled:focus {
+  background: #dcc8f0;
+  color: #501464;
+}
+
+.react-calendar__tile--active {
+  background: #dcc8f0;
+  color: #501464;
+}
+
+.react-calendar__tile--active:enabled:hover,
+.react-calendar__tile--active:enabled:focus {
+  background: #dcc8f0;
+  color: #501464;
+}
diff --git a/src/assets/theme/colors/color.styles.tokens.json b/src/assets/theme/colors/color.styles.tokens.json
@@ -243,6 +243,10 @@
     "0": {
       "$type": "color",
       "$value": "#f8f4fc"
+    },
+    "1": {
+      "$type": "color",
+      "$value": "#D9D9D9"
     }
   },
   "White Alpha": {

diff --git a/src/components/pages/Roles/forms/RoleFormPayroll.tsx b/src/components/pages/Roles/forms/RoleFormPayroll.tsx
@@ -15,28 +15,33 @@ import {
   MenuList,
   NumberInput,
   NumberInputField,
+  Show,
   Text,
 } from '@chakra-ui/react';
 import {
   ArrowUpRight,
+  CalendarBlank,
   CaretDown,
   CaretUp,
   CheckCircle,
   Info,
   Minus,
   Plus,
 } from '@phosphor-icons/react';
+import { format } from 'date-fns';
 import { Field, FieldProps, useFormikContext } from 'formik';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CARD_SHADOW, TOOLTIP_MAXW } from '../../../../constants/common';
 import { useFractal } from '../../../../providers/App/AppProvider';
 import { BigIntValuePair } from '../../../../types';
-import { formatUSD } from '../../../../utils';
+import { DEFAULT_DATE_FORMAT, formatUSD } from '../../../../utils';
+import DraggableDrawer from '../../../ui/containers/DraggableDrawer';
 import { BigIntInput } from '../../../ui/forms/BigIntInput';
 import LabelWrapper from '../../../ui/forms/LabelWrapper';
 import ExternalLink from '../../../ui/links/ExternalLink';
 import ModalTooltip from '../../../ui/modals/ModalTooltip';
+import { DecentDatePicker } from '../../../ui/utils/DecentDatePicker';
 import Divider from '../../../ui/utils/Divider';
 import { EaseOutComponent } from '../../../ui/utils/EaseOutComponent';
 import { RoleFormValues, frequencyAmountLabel, frequencyOptions } from '../types';
@@ -373,28 +378,85 @@ function FrequencySelector() {
 }
 
 function PaymentStartDatePicker() {
-  // @todo implement date picker
-  const { t } = useTranslation(['roles']);
+  const { t } = useTranslation(['common']);
+
+  const { setFieldValue, values } = useFormikContext<RoleFormValues>();
+
+  const selectedDate = values.roleEditing?.payroll?.paymentStartDate;
+  const selectedDateStr = selectedDate && format(selectedDate, DEFAULT_DATE_FORMAT);
+
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+
+  function DatePickerTrigger() {
+    return (
+      <Flex
+        borderRadius="0.25rem"
+        bg="neutral-1"
+        borderWidth="1px"
+        borderColor="neutral-3"
+        padding="0.5rem 1rem"
+        alignItems="center"
+        gap="0.5rem"
+      >
+        <Icon
+          as={CalendarBlank}
+          boxSize="24px"
+          color="neutral-5"
+        />
+        <Text>{selectedDateStr ?? t('select')}</Text>
+      </Flex>
+    );
+  }
+
   return (
     <FormControl my="1rem">
-      <Field>
+      <Field name="roleEditing.payroll.paymentStartDate">
         {({ field }: FieldProps<string, RoleFormValues>) => (
-          <LabelWrapper
-            label={t('paymentStart')}
-            tooltipContent={<Box></Box>}
-          >
-            <Input
-              value={field.value}
-              onChange={() => ''}
-            />
-          </LabelWrapper>
+          <>
+            <Show below="md">
+              <Button
+                onClick={() => setIsDrawerOpen(true)}
+                variant="unstyled"
+              >
+                <DatePickerTrigger />
+              </Button>
+
+              <DraggableDrawer
+                isOpen={isDrawerOpen}
+                headerContent={undefined}
+                onOpen={() => {}}
+                onClose={() => setIsDrawerOpen(false)}
+              >
+                <DecentDatePicker onChange={date => setFieldValue(field.name, date)} />
+              </DraggableDrawer>
+            </Show>
+
+            <Show above="md">
+              <Menu placement="top">
+                <>
+                  <MenuButton
+                    as={Button}
+                    variant="unstyled"
+                    p="0"
+                    w="full"
+                  >
+                    <DatePickerTrigger />
+                  </MenuButton>
+                  <MenuList>
+                    <DecentDatePicker onChange={date => setFieldValue(field.name, date)} />
+                  </MenuList>
+                </>
+              </Menu>
+            </Show>
+          </>
         )}
       </Field>
     </FormControl>
   );
 }
 
-function PaymentFrequencyAmount() {
+// @todo @dev is this frequency or period???
+function PaymentFrequency() {
   const { t } = useTranslation(['roles']);
   return (
     <FormControl my="1rem">
@@ -404,6 +466,7 @@ function PaymentFrequencyAmount() {
           const frequencyLabel = !!paymentFrequency
             ? t(frequencyAmountLabel[paymentFrequency])
             : '';
+
           return (
             <LabelWrapper
               label={frequencyLabel}
@@ -423,17 +486,16 @@ function PaymentFrequencyAmount() {
                     />
                   }
                   onClick={() => {
-                    if (field.value === undefined || Number(field.value) <= 0) return;
+                    if (field.value === undefined || Number(field.value) <= 1) return;
                     setFieldValue(field.name, Number(field.value) - 1);
                   }}
                 />
-                <NumberInput w="full">
-                  <NumberInputField
-                    value={field.value}
-                    onChange={() => {
-                      setFieldValue(field.name, field.value);
-                    }}
-                  />
+                <NumberInput
+                  w="full"
+                  value={values.roleEditing?.payroll?.paymentFrequencyNumber}
+                  onChange={(value: string) => setFieldValue(field.name, Number(value))}
+                >
+                  <NumberInputField />
                 </NumberInput>
                 <IconButton
                   aria-label="stepper-plus"
@@ -490,7 +552,7 @@ export default function RoleFormPayroll() {
       {values.roleEditing?.payroll?.paymentFrequency && (
         <>
           <PaymentStartDatePicker />
-          <PaymentFrequencyAmount />
+          <PaymentFrequency />
         </>
       )}
     </Box>

diff --git a/src/components/pages/Roles/forms/RoleFormTabs.tsx b/src/components/pages/Roles/forms/RoleFormTabs.tsx
@@ -93,22 +93,15 @@ export default function RoleFormTabs({ hatId, push }: { hatId: Hex; push: (obj:
     };
   }, [existingRoleHat, isRoleNameUpdated, isRoleDescriptionUpdated, isMemberUpdated]);
 
-  const payrollTabContainerRef = useRef<HTMLDivElement>(null);
   const vestingTabContainerRef = useRef<HTMLDivElement>(null);
 
   if (!daoAddress) return null;
 
-  function ComingSoonTooltip({
-    children,
-    type,
-  }: {
-    children: ReactNode;
-    type: 'payroll' | 'vesting';
-  }) {
-    if (payrollTabContainerRef || vestingTabContainerRef) {
+  function ComingSoonTooltip({ children }: { children: ReactNode }) {
+    if (vestingTabContainerRef) {
       return (
         <ModalTooltip
-          containerRef={type === 'payroll' ? payrollTabContainerRef : vestingTabContainerRef}
+          containerRef={vestingTabContainerRef}
           maxW={TOOLTIP_MAXW}
           label="Coming soon"
         >
@@ -137,20 +130,18 @@ export default function RoleFormTabs({ hatId, push }: { hatId: Hex; push: (obj:
         <TabList>
           <Tab>{t('roleInfo')}</Tab>
           <Tab>
-            <Flex ref={payrollTabContainerRef}>
-              <ComingSoonTooltip type="payroll">
-                <Flex
-                  px={{ base: '10vw', md: '5vw' }}
-                  py="0.5rem"
-                >
-                  {t('payroll')}
-                </Flex>
-              </ComingSoonTooltip>
+            <Flex>
+              <Flex
+                px={{ base: '10vw', md: '5vw' }}
+                py="0.5rem"
+              >
+                {t('payroll')}
+              </Flex>
             </Flex>
           </Tab>
           <Tab isDisabled={true}>
             <Flex ref={vestingTabContainerRef}>
-              <ComingSoonTooltip type="vesting">
+              <ComingSoonTooltip>
                 <Flex
                   px={{ base: '10vw', md: '5vw' }}
                   py="0.5rem"

diff --git a/src/components/pages/Roles/types.tsx b/src/components/pages/Roles/types.tsx
@@ -91,7 +91,7 @@ export interface RoleFormPayrollValue {
   };
   amount: BigIntValuePair;
   paymentFrequency: string;
-  paymentStartDate: string;
+  paymentStartDate: Date;
   paymentFrequencyNumber: number;
 }