Green River David - CEM-2600 - Reservation Calendar Upgrade

src/Containers/CollapsibleHeading/DateFilterSelect.tsx

@@ -1,18 +1,15 @@
-import React, { useState, useEffect } from 'react';
-import { MainInterface, ResponsiveInterface } from '@Utils/BaseStyles';
-import { useMounted } from '@Utils/Hooks';
-import { Datepicker } from '@Inputs/Datepicker';
-import { Modal as M } from '@Containers/Modal/Modal';
-import {
-    FilterSelect,
-    IFilterSelectProps,
-} from '@Containers/CollapsibleHeading/FilterSelect';
-import { Input } from '@Inputs/Input/Input';
-import { Close } from '@styled-icons/evaicons-solid/Close';
-import { clickable, flex } from '@Utils/Mixins';
+import React, {useEffect, useState} from 'react';
+import {MainInterface, ResponsiveInterface} from '@Utils/BaseStyles';
+import {useMounted} from '@Utils/Hooks';
+import {Datepicker} from '@Inputs/Datepicker';
+import {Modal as M} from '@Containers/Modal/Modal';
+import {FilterSelect, IFilterSelectProps,} from '@Containers/CollapsibleHeading/FilterSelect';
+import {Input} from '@Inputs/Input/Input';
+import {Close} from '@styled-icons/evaicons-solid/Close';
+import {clickable, flex} from '@Utils/Mixins';
 import moment from 'moment';
 import styled from 'styled-components';
-import { Heading } from '@Text/Heading';
+import {Heading} from '@Text/Heading';
 
 const FIRST_SELECT_OPTION = 0;
 

src/Containers/DiningReservation/DiningReservation.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Modal } from '../Modal/Modal';
-import { Input, Datepicker, Timepicker, Button } from '../../index';
+import {Modal} from '../Modal/Modal';
+import {Button, Datepicker, Input, Timepicker} from '../../index';
 
 export interface DiningReservationProps {
     modalState: [boolean, React.Dispatch<React.SetStateAction<boolean>>];
@@ -20,7 +20,7 @@ export const DiningReservation: React.FC<DiningReservationProps> = ({
                 label="How many people are u booking for?"
                 placeholder="Enter number of people you are booking for"
             />
-            <Datepicker name="date" label="Pick a date" />
+            <Datepicker name="date" label="Pick a date"/>
 
             <Timepicker name="time" label="Pick a time" />
             <Input

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;