Green River David - CEM-2600 - Reservation Calendar Upgrade

src/Inputs/Datepicker/Datebox.tsx

@@ -14,6 +14,12 @@ import { Button } from '../Button/Button';
 
 const SIZE = 40;
 
+export enum PriceStatus{
+    Good,
+    Okay,
+    Surge
+}
+
 const displayDate = (date: Date = new Date()): string =>
     `${MONTHS[date.getMonth()]}, ${date.getFullYear()}`;
 
@@ -26,6 +32,8 @@ const buildCalendar = (
     date: Date,
     value: Date,
     selectDate: React.MouseEventHandler,
+    priceStatus: PriceStatus,
+    price: Number,
 ): React.ReactElement[] => {
     const start = new Date(date);
     start.setDate(1);
@@ -36,15 +44,24 @@ const buildCalendar = (
     let exit = false;
     while (!exit) {
         row.push(
-            <CalendarDay
-                faded={start.getMonth() !== date.getMonth()}
+            <DayWrapper
                 onClick={selectDate}
+                faded={start.getMonth() !== date.getMonth()}
                 selected={sameDate(start, value)}
-                key={start.toDateString()}
-                data={start.toISOString()}
             >
-                {start.getDate()}
-            </CalendarDay>,
+                <CalendarDay
+                    key={start.toDateString()}
+                    data={start.toISOString()}
+                >
+                    {start.getDate()}
+                    <br/>
+                    <Price
+                        priceColor={priceStatus}
+
+                    >{'$'+price}</Price>
+                </CalendarDay>
+
+            </DayWrapper>,
         );
         start.setDate(start.getDate() + 1);
         if (start.getDay() === 0) {
@@ -70,16 +87,20 @@ export interface DateboxProps extends React.HTMLAttributes<HTMLDivElement> {
     animate: boolean;
     value: Date | undefined;
     clearDate?: Function;
+    price:Number;
+    priceStatus:PriceStatus;
 }
 
 export const Datebox: React.FC<DateboxProps> = ({
-    changePage,
-    clearDate = (): void => undefined,
-    selectedDate,
-    selectDate,
-    animate,
-    value,
-}): React.ReactElement => (
+                                                    changePage,
+                                                    clearDate = (): void => undefined,
+                                                    selectedDate,
+                                                    selectDate,
+                                                    animate,
+                                                    value,
+                                                    price=0,
+                                                    priceStatus= PriceStatus.Good,
+                                                }): React.ReactElement => (
     <DateBox animate={animate}>
         <DateControls>
             <Button onClick={changePage(-1)} icon={AngleLeft} />
@@ -99,6 +120,8 @@ export const Datebox: React.FC<DateboxProps> = ({
                 selectedDate || new Date(),
                 value || new Date(),
                 selectDate,
+                priceStatus,
+                price,
             )}
         </Calendar>
         <Button onClick={(): void => clearDate()}>Clear</Button>
@@ -108,89 +131,108 @@ export const Datebox: React.FC<DateboxProps> = ({
 const DateBox = styled.div<{
     animate: boolean;
 }>`
-    ${position('absolute', 'auto', '100%', 'auto', 'auto')}
-    margin: 0 auto auto 0;
-    padding: 15px 10px 10px;
-    box-sizing: border-box;
-    background-color: white;
-    text-align: center;
-    font-size: 0.9rem;
-    z-index: 90;
-
-    // Theme Stuff
-    ${({ theme }): string => `
+  ${position('absolute', 'auto', '100%', 'auto', 'auto')}
+  margin: 0 auto auto 0;
+  padding: 15px 10px 10px;
+  box-sizing: border-box;
+  background-color: white;
+  text-align: center;
+  font-size: 0.9rem;
+  z-index: 90;
+
+  // Theme Stuff
+  ${({ theme }): string => `
         ${transition(['transform', 'opacity'])}
         border-radius: ${theme.dimensions.radius};
         font-family: ${theme.font.family};
         box-shadow: ${theme.depth[1]};
     `}
 
-    ${({ animate }): string =>
-        !animate
-            ? `
+  ${({ animate }): string =>
+    !animate
+        ? `
         transform: translateY(-20px);
         opacity: 0;
     `
-            : ''}
+        : ''}
 `;
 
 const DateControls = styled.div`
-    ${flex('center')}
-    padding-bottom: 8px;
+  ${flex('center')}
+  padding-bottom: 8px;
 `;
 
+
 const DateDisplay = styled.span`
-    font-weight: bold;
-    font-size: 1.05rem;
-    margin: auto;
+  font-weight: bold;
+  font-size: 1.05rem;
+  margin: auto;
 `;
 
 const WeekDays = styled.ul`
-    ${flex()}
-    padding: 0;
-    margin: 0;
-    list-style-type: none;
+  ${flex()}
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
 `;
 
 const WeekDay = styled.li`
-    font-weight: bold;
-    padding: 5px 0;
-    width: ${SIZE}px;
+  font-weight: bold;
+  padding: 5px 0;
+  width: ${SIZE}px;
 `;
 
 const Calendar = styled.ul`
-    ${flex('column')}
-    list-style-type: none;
-    flex-wrap: wrap;
-    padding: 0;
-    margin: 0;
+  ${flex('column')}
+  list-style-type: none;
+  flex-wrap: wrap;
+  padding: 0;
+  margin: 0;
 `;
 
 const CalendarWeek = styled.li`
-    ${flex()}
+  ${flex()}
 `;
 
 const CalendarDay = styled.span<{
+    data: string;
+}>`
+
+`;
+
+const DayWrapper = styled.div<{
     faded: boolean;
     selected: boolean;
-    data: string;
 }>`
     ${transition(['background-color', 'color'])}
     ${flex('center')}
-    width: ${SIZE - 4}px;
-    height: ${SIZE - 4}px;
+    width: ${SIZE - 3}px;
+    height: ${SIZE - 3}px;
     margin: 2px;
-    border-radius: 50%;
+    border-radius: 35%;
 
     ${({ faded }): string => (faded ? 'opacity: 0.3;' : '')}
     ${({ selected, theme }): string =>
-        styledCondition(
-            selected,
-            `
-                background-color: ${theme.colors.primary};
+    styledCondition(
+        selected,
+        `
+                background-color: ${theme.colors.occupancyStatusColors.Occupied};
                 cursor: pointer;
                 color: white;
             `,
-            clickable('#ffffff', 0.05),
-        )}
+        clickable('#ffffff', 0.05),
+    )}
+`;
+
+const Price = styled.div<{
+    priceColor: PriceStatus;
+}>`
+  font-size: 12px;
+  ${({ priceColor }): string => (priceColor == PriceStatus.Good ? 'color: #026c45;' : '')}
+  ${({ priceColor }): string => (priceColor == PriceStatus.Okay ? 'color: #ffd800;' : '')}
+  ${({ priceColor }): string => (priceColor == PriceStatus.Surge ? 'color: #ff0000;' : '')}
+
 `;
+
+
+

src/Inputs/Datepicker/Datepicker.stories.tsx

@@ -12,6 +12,8 @@ export default {
         label: 'label',
         placeholder: 'Placeholder',
         description: 'Description',
+        price: 25,
+        priceStatus:0,
     },
 } as Meta;
 

src/Inputs/Datepicker/index.tsx

@@ -14,7 +14,7 @@ import {
     LabelLayout as LL,
     LabelLayoutProps,
 } from '../../Fragments';
-import { Datebox } from './Datebox';
+import {Datebox, PriceStatus} from './Datebox';
 
 const printDate = (date?: Date): string => {
     if (date) {
@@ -33,16 +33,20 @@ export interface DatepickerProps extends LabelLayoutProps {
     onClear?: Function;
     value?: Date;
     initialShow?: boolean;
+    price:Number;
+    priceStatus:PriceStatus;
 }
 
 export const Datepicker: React.FC<DatepickerProps> = ({
-    value,
-    onChange = (): void => undefined,
-    onClear = (): void => undefined,
-    placeholder = 'MM-DD-YYYY',
-    initialShow,
-    ...props
-}): React.ReactElement => {
+                                                          value,
+                                                          onChange = (): void => undefined,
+                                                          onClear = (): void => undefined,
+                                                          placeholder = 'MM-DD-YYYY',
+                                                          initialShow,
+                                                          price,
+                                                          priceStatus,
+                                                          ...props
+                                                      }): React.ReactElement => {
     const theme = useTheme();
     const [selectedDate, setDate] = useState(value);
     const ref = useRef<HTMLDivElement>(null);
@@ -77,10 +81,9 @@ export const Datepicker: React.FC<DatepickerProps> = ({
         setText(printDate(value));
     }, [value]);
 
-    const handleText = useCallback(
-        (el): void => setText(el.target.value),
-        [text],
-    );
+    const handleText = useCallback((el): void => setText(el.target.value), [
+        text,
+    ]);
 
     const selectDate = useCallback((el): void => {
         const val = new Date(el.target.getAttribute('data'));
@@ -96,14 +99,15 @@ export const Datepicker: React.FC<DatepickerProps> = ({
     }, []);
 
     const changePage = useCallback(
-        (change = 1): React.MouseEventHandler =>
-            (): void => {
-                setDate((d): Date => {
+        (change = 1): React.MouseEventHandler => (): void => {
+            setDate(
+                (d): Date => {
                     const curr: Date = new Date(d || new Date());
                     curr.setMonth(curr.getMonth() + change);
                     return curr;
-                });
-            },
+                },
+            );
+        },
         [],
     );
     const clearDate = (): void => {
@@ -116,25 +120,25 @@ export const Datepicker: React.FC<DatepickerProps> = ({
         (el): void => {
             const d = new Date(el.target.value);
             switch (el.key) {
-            case 'Tab':
-                setShow(false);
-                break;
-            case 'Enter':
-                el.target = {
-                    ...el.target,
-                    name: props.name,
-                    value: d,
-                };
-
-                if (d.toDateString() === value?.toDateString()) {
-                    setShow((v): boolean => !v);
-                } else if (!Number.isNaN(d.getTime())) {
-                    setText(printDate(d));
-                    onChange(el);
-                }
-                break;
-            default:
-                break;
+                case 'Tab':
+                    setShow(false);
+                    break;
+                case 'Enter':
+                    el.target = {
+                        ...el.target,
+                        name: props.name,
+                        value: d,
+                    };
+
+                    if (d.toDateString() === value?.toDateString()) {
+                        setShow((v): boolean => !v);
+                    } else if (!Number.isNaN(d.getTime())) {
+                        setText(printDate(d));
+                        onChange(el);
+                    }
+                    break;
+                default:
+                    break;
             }
         },
         [value],
@@ -161,24 +165,26 @@ export const Datepicker: React.FC<DatepickerProps> = ({
                     animate={animate}
                     value={value}
                     clearDate={clearDate}
+                    price={price}
+                    priceStatus= {priceStatus}
                 />
             )}
         </LabelLayout>
     );
 };
 
 const LabelLayout = styled(LL)<{ ref: React.RefObject<HTMLDivElement> }>`
-    position: relative;
+  position: relative;
 `;
 
 const Icon = styled(CalendarAlt)`
-    ${position('absolute', 'auto 20px auto auto')}
-    width: 10px;
+  ${position('absolute', 'auto 20px auto auto')}
+  width: 10px;
 `;
 
 const Wrapper = styled.div`
-    ${flex('column')}
-    position: relative;
+  ${flex('column')}
+  position: relative;
 `;
 
 export default Datepicker;