Created the form to search for the courses

src/components/pages/ParentBooking/BookingCalendar.js

@@ -0,0 +1,42 @@
+import { Alert, Calendar } from 'antd';
+import React, { useState } from 'react';
+import moment from 'moment';
+
+const BookingCalendar = ({ handleCalendarClick }) => {
+  const [value, setValue] = useState(moment());
+  const [selectedValue, setSelectedValue] = useState(moment());
+
+  const onSelect = newValue => {
+    setValue(newValue);
+    setSelectedValue(newValue);
+  };
+  const onPanelChange = newValue => {
+    setValue(newValue);
+  };
+
+  return (
+    <div
+      className="site-calendar-demo-card"
+      style={{
+        border: '1px solid #f0f0f0',
+        borderRadius: '2px',
+      }}
+    >
+      <Alert
+        className="booking-calendar"
+        message={`You selected date: ${selectedValue &&
+          selectedValue.format('MM/DD/YYYY')}`}
+      />
+      <Calendar
+        className="booking-calendar calendar-text"
+        value={value}
+        onSelect={onSelect}
+        onPanelChange={onPanelChange}
+        fullscreen={false}
+        onChange={handleCalendarClick}
+      />
+    </div>
+  );
+};
+
+export default BookingCalendar;

src/components/pages/ParentBooking/BookingProgram.js

@@ -0,0 +1,86 @@
+import { Card, Radio } from 'antd';
+import { useState, useEffect } from 'react';
+import { parentDummyData } from '../../../parentDummyData';
+import { LeftOutlined, RightOutlined } from '@ant-design/icons';
+
+const BookingProgram = ({ handleRadioClick, disabled }) => {
+  const [index, setIndex] = useState(0);
+
+  // we used set to remove the duplicate courses in the dummy data but when it is connected to the backend it shouldn't have duplicates
+  // remove set when connected
+
+  const subjectsArray = [
+    ...new Set(
+      parentDummyData.availableCourses.map(course => {
+        return course.subject;
+      })
+    ),
+  ];
+
+  let selectProgramArray = subjectsArray.slice(index, index + 3);
+
+  useEffect(() => {
+    const lastIndex = subjectsArray.length - 1;
+    if (index < 0) {
+      setIndex(lastIndex);
+    }
+    if (index > lastIndex) {
+      setIndex(0);
+    }
+  }, [index, subjectsArray]);
+
+  return (
+    <>
+      <div className="select-program-container">
+        <button
+          className="arrow-btns"
+          onClick={() => {
+            if (index > 0) {
+              setIndex(index - 1);
+            } else if (index === 0) {
+              setIndex(subjectsArray.length - 3);
+            }
+          }}
+        >
+          <LeftOutlined className="arrows-icon" />
+        </button>
+
+        <Radio.Group className="radio-group">
+          <div style={{ display: 'flex', overflow: 'hidden' }}>
+            {selectProgramArray.map((subject, index) => {
+              return (
+                <Card key={index} className="select-program-cards">
+                  <Radio
+                    className="radio-btn"
+                    onChange={handleRadioClick}
+                    disabled={disabled}
+                    value={subject}
+                    key={index}
+                    name="program"
+                  >
+                    {subject}
+                  </Radio>
+                </Card>
+              );
+            })}
+          </div>
+        </Radio.Group>
+
+        <button
+          className="arrow-btns"
+          onClick={() => {
+            if (index !== subjectsArray.length - 3) {
+              setIndex(index + 1);
+            } else if (index === subjectsArray.length - 3) {
+              setIndex(0);
+            }
+          }}
+        >
+          <RightOutlined className="arrows-icon" />
+        </button>
+      </div>
+    </>
+  );
+};
+
+export default BookingProgram;

src/components/pages/ParentBooking/ParentBookingCard.js

@@ -1,89 +1,187 @@
 // WE ARE CURRENTLY TRYING OUT THE SingleBookingComponent.js PLEASE REFER TO THAT COMPONENT FOR BOOKING FOR NOW
+import React, { useState } from 'react';
+import { Typography, Layout, Form, Button } from 'antd';
+import { parentDummyData } from '../../../parentDummyData';
+import BookingCalendar from './BookingCalendar';
+import PreferredCourseOptions from './PreferredCourseOptions.js';
+import '../../../styles/ParentStyles/booking.less';
+import BookingProgram from './BookingProgram';
+import SelectedCourseDetails from './SelectedCourseDetails';
 
-import React from 'react';
-import { connect } from 'react-redux';
-import { Card, Button } from 'antd';
-import { dateConverter } from '../../common/dateHelpers';
-import { timeConverter } from '../../common/timeHelpers';
-import axiosWithAuth from '../../../utils/axiosWithAuth';
-import { useOktaAuth } from '@okta/okta-react';
-import { addToCart } from '../../../redux/actions/parentActions';
-
-const ParentBookingCard = props => {
-  const {
-    child_name,
-    subject,
-    description,
-    start_date,
-    end_date,
-    start_time,
-    end_time,
-    location,
-    instructor_name,
-    size,
-    course_id,
-  } = props.booking;
-
-  const { addToCart } = props;
-
-  const { authState } = useOktaAuth();
-  const { idToken } = authState;
-  const handleClick = e => {
-    axiosWithAuth(idToken)
-      .post(
-        '/children/1/enrollments', // TODO: Hook this request up to pass the ID of the parent/child involved once we have this data in state.
-        { child_id: 1, class_id: course_id, completed: true }
-      )
-      .then(res => console.log(res)) // TODO: Let's perform some action with this result.
-      .catch(err => console.log(`message: ${err.message}`));
+const courseDetails = {
+  instructor_name: '',
+  size: '',
+  subject: '',
+  description: '',
+  start_date: '',
+  end_date: '',
+  start_time: '',
+  end_time: '',
+  price: '',
+};
+
+const ParentBookingCard = () => {
+  const { Content } = Layout;
+  const { Item } = Form;
+  const { Title } = Typography;
+  const [searchResults, setSearchResults] = useState([]);
+
+  const [show, setShow] = useState(true);
+  const [disabled, setDisabled] = useState(false);
+  const [render, setRender] = useState(false);
+  const [selectedOption, setSelectedOption] = useState(courseDetails);
+
+  let valuesObject = {};
+
+  let newArray = [];
+  let resultArray = [];
+
+  const toggleDisabled = () => {
+    setDisabled(!disabled);
+  };
+
+  const handleRadioClick = e => {
+    let program = e.target.value;
+    valuesObject.program = program;
+  };
+
+  const handleCalendarClick = value => {
+    let date = value.format('MM/DD/YYYY');
+    valuesObject.date = date;
+  };
+
+  const handleAvailability = e => {
+    newArray = parentDummyData.availableCourses.filter(course => {
+      let programDate = course.start_date;
+      let selectedDate = valuesObject.date;
+      let programMonth = programDate.substring(0, 2);
+      let selectedMonth = selectedDate.substring(0, 2);
+      let programYear = programDate.substring(6);
+      let selectedYear = selectedDate.substring(6);
+
+      return parseInt(programMonth) >= parseInt(selectedMonth) &&
+        programYear === selectedYear
+        ? course
+        : null;
+    });
+
+    resultArray = newArray.filter(
+      course => course.subject === valuesObject.program
+    );
+    setSearchResults(resultArray);
+    setSelectedOption(resultArray[0]);
+    if (valuesObject.program && valuesObject.date) {
+      setShow(!show);
+    }
+
+    toggleDisabled();
+  };
+
+  const handleRefresh = () => {
+    window.location.reload();
+  };
+
+  const handleSelectedCourse = () => {
+    setRender(!render);
   };
 
-  const data = [
-    { title: 'student name', text: child_name },
-    { title: 'course', text: subject },
-    { title: 'description', text: description },
-    { title: 'first day of class', text: dateConverter(start_date) },
-    { title: 'last day of class', text: dateConverter(end_date) },
-    {
-      title: 'time',
-      text: `${timeConverter(start_time)} - ${timeConverter(end_time)}`,
-    },
-    { title: 'location', text: location },
-    { title: 'instructor', text: instructor_name },
-    { title: 'class size', text: size },
-  ];
-
-  const handleAddCourse = booking => {
-    addToCart(booking);
+  const updateSelection = (inputName, inputValue) => {
+    setSelectedOption({ ...selectedOption, [inputName]: inputValue });
   };
 
   return (
-    <Card title={subject} style={{ width: 280 }} hoverable="true">
-      {data.map((itm, idx) => {
-        return (
-          <div key={idx}>
-            {itm.title}: {itm.text}
+    <Layout>
+      <Content className="main-container">
+        <Title className="title">
+          <p>
+            BOOK WITH US.
+            <br />
+            LEARN MORE THAN JUST CODE!
+          </p>
+        </Title>
+        <Form className="form-container" size={'large'} layout="inline">
+          <div>
+            <div className="sub-heading">Select Program</div>
+            <Item name={'specialty'}>
+              <BookingProgram
+                handleRadioClick={handleRadioClick}
+                disabled={disabled}
+              />
+            </Item>
+
+            <div className="sub-heading">Select Date</div>
+          </div>
+          <div className="course-availability-container">
+            <Item className="booking-calendar-container">
+              <BookingCalendar handleCalendarClick={handleCalendarClick} />
+            </Item>
+
+            <Item name={'availability'} className="btn-drop-down-container">
+              <div className="time-zone-container">
+                {!show && !render && (
+                  <div className="time-zone-card">
+                    <p className="time-zone">
+                      All times are in Central Standard Time (US & Canada)
+                    </p>
+                  </div>
+                )}
+
+                {!show && !render && (
+                  <PreferredCourseOptions
+                    updateSelection={updateSelection}
+                    searchResults={searchResults}
+                  />
+                )}
+                <div className="booking-card-container">
+                  {show && (
+                    <Button
+                      className="show-availability-btn"
+                      type="submit"
+                      onClick={() => {
+                        if (valuesObject.program && valuesObject.date) {
+                          handleAvailability();
+                        }
+                      }}
+                    >
+                      <p>Show Availability</p>
+                    </Button>
+                  )}
+                  {render && (
+                    <SelectedCourseDetails selectedOption={selectedOption} />
+                  )}
+                  <div className="booking-card-btns">
+                    {!show && !render && (
+                      <Button
+                        className="booking-card-btn"
+                        type="submit"
+                        onClick={handleSelectedCourse}
+                      >
+                        <p>View Selection Details</p>
+                      </Button>
+                    )}
+                    {!show && render && (
+                      <Button className="booking-card-btn" type="submit">
+                        <p>Book Now</p>
+                      </Button>
+                    )}
+                    {!show && (
+                      <Button
+                        className="booking-card-btn"
+                        type="submit"
+                        onClick={handleRefresh}
+                      >
+                        <p>Edit</p>
+                      </Button>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </Item>
           </div>
-        );
-      })}
-      <Button
-        type="primary"
-        style={{ background: '#006C72', color: 'white' }}
-        block
-        onClick={() => handleAddCourse(data)}
-      >
-        {' '}
-        ADD{'  '}
-      </Button>
-    </Card>
+        </Form>
+      </Content>
+    </Layout>
   );
 };
 
-const mapStateToProps = state => ({
-  cart: state.parentReducer.cart,
-  bookings: state.parentReducer.bookings,
-});
-
-export default connect(mapStateToProps, {
-  addToCart,
-})(ParentBookingCard);
+export default ParentBookingCard;