Dev amit

.eslintrc.js

@@ -0,0 +1,31 @@
+module.exports = {
+  env: {
+    browser: true,
+    commonjs: true,
+    es2021: true,
+  },
+  // extends: ['plugin:react/recommended'],
+  overrides: [],
+  parserOptions: {
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+      modules: true,
+      ecmaVersion: 12,
+    },
+  },
+  // plugins: ['react'],
+  rules: {
+    // quotes: [2, 'single', { allowTemplateLiterals: true }],
+    // 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
+    "no-restricted-syntax": "off",
+    "comma-dangle": "off",
+    "no-unused-vars": "warn",
+    "no-underscore-dangle": "off",
+    "react/jsx-filename-extension": "off",
+    "react/function-component-definition": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off",
+  },
+};

package.json

@@ -3,20 +3,33 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@date-io/date-fns": "^1.3.13",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-regular-svg-icons": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@material-ui/core": "^4.9.0",
+    "@material-ui/icons": "^4.11.3",
     "@material-ui/pickers": "^3.2.10",
+    "@mui/icons-material": "^5.11.11",
+    "@mui/joy": "^5.0.0-alpha.72",
+    "@mui/material": "^5.11.14",
+    "@mui/x-date-pickers": "^6.0.4",
     "@testing-library/jest-dom": "^5.0.2",
     "@testing-library/react": "^9.4.0",
     "@testing-library/user-event": "^8.1.0",
     "date-fns": "^2.9.0",
+    "dayjs": "^1.11.7",
     "formik": "^2.1.3",
     "lodash": "^4.17.15",
     "moment": "^2.24.0",
     "prop-types": "^15.7.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^18.2.0",
+    "react-calendar": "^4.1.0",
+    "react-dom": "^18.2.0",
     "react-scripts": "3.3.0",
+    "sassy-datepicker": "^0.10.2",
     "yup": "^0.28.1"
   },
   "scripts": {
@@ -46,4 +59,4 @@
     "eslint-plugin-react-hooks": "^2.3.0",
     "prettier": "1.19.1"
   }
-}
+}

src/App.js

@@ -1,14 +1,13 @@
-import React from 'react';
-import MaterialLayout from './components/Layout/MaterialLayout';
-import CheckoutPage from './components/CheckoutPage';
+import React, { useState } from "react";
+import MaterialLayout from "./components/Layout/MaterialLayout";
+import AppointmentForm from "./components/AppointmentForm";
 
 function App() {
+  const [activeStepColor, setActiveStepColor] = useState("#FFFFFF");
   return (
-    <div>
-      <MaterialLayout>
-        <CheckoutPage />
-      </MaterialLayout>
-    </div>
+    <MaterialLayout activeStepColor={activeStepColor}>
+      <AppointmentForm setActiveStepColor={setActiveStepColor} />
+    </MaterialLayout>
   );
 }
 

src/components/AppointmentForm/Appointment/Calendar.jsx

@@ -0,0 +1,35 @@
+// import * as React from 'react';
+// // import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+// // import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+// // import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
+// import DatePicker from 'sassy-datepicker';
+// import 'sassy-datepicker/dist/styles.css';
+
+// export default function Calendar() {
+//   return (
+//     // <LocalizationProvider dateAdapter={AdapterDayjs}>
+//     //   <DateCalendar showDaysOutsideCurrentMonth fixedWeekNumber={6} />
+//     // </LocalizationProvider>
+//     <DatePicker />
+//   );
+// }
+import React  from 'react';
+
+import { useState } from 'react';
+import DatePicker from 'sassy-datepicker';
+import 'sassy-datepicker/dist/styles.css';
+
+function Calendar() {
+  const [date, setDate] = useState(new Date());
+  const onChange = newDate => {
+    setDate(newDate);
+  };
+
+  return (
+      <DatePicker onChange={onChange} value={date} />
+  );
+}
+
+
+  export default Calendar;
+

src/components/AppointmentForm/Appointment/index.js

@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import Calendar from "react-calendar";
+import { Typography } from "@material-ui/core";
+import "react-calendar/dist/Calendar.css";
+//import Calendar from '../Appointment/Calendar';
+import Radio from "@mui/material/Radio";
+import RadioGroup from "@mui/material/RadioGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import appointmentFormStyle from "../styles";
+function Appointment() {
+  const classes = appointmentFormStyle();
+  const [value, onChange] = useState(new Date());
+
+  return (
+    <div className={classes.calenderWrap}>
+      <Calendar onChange={onChange} value={value} className={classes.calenderField} />
+      <div
+        className="radio-text"
+        style={{
+          background: "#F2F0FA",
+          paddingBottom:'53px'
+          // height: "215px",
+        }}
+      >
+        <RadioGroup
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            paddingTop: "16px",
+            paddingLeft: "20px",
+          }}
+          aria-labelledby="demo-controlled-radio-buttons-group"
+          name="controlled-radio-buttons-group"
+        >
+          <FormControlLabel
+            value="morning"
+            control={<Radio />}
+            label="11:30 AM - 2:30 PM EST"
+          />
+          <FormControlLabel
+            value="evening"
+            control={<Radio />}
+            label="4:00 PM - 5:30 PM EST"
+          />
+        </RadioGroup>
+        <Typography
+          variant="p"
+          style={{
+            paddingLeft: "34px",
+            paddingTop: "25px",
+            width: "97%",
+            display: "flex",
+            fontFamily: "Poppins",
+            fontStyle: "italic",
+            fontWeight: "400",
+            fontSize: "15px",
+            lineHeight: "24px",
+            color: "#6C6F7C",
+          }}
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
+          interdum, diam vel fermentum posuere, enim massa.
+        </Typography>
+      </div>
+    </div>
+  );
+}
+export default Appointment;

src/components/AppointmentForm/ButtonAppBar.js

@@ -0,0 +1,125 @@
+import * as React from "react";
+import Box from "@mui/material/Box";
+import { makeStyles } from "@material-ui/core/styles";
+import { Button, CircularProgress } from "@material-ui/core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faArrowLeftLong,
+  faCheck,
+  faArrowRightLong,
+} from "@fortawesome/free-solid-svg-icons";
+
+const useStyles = makeStyles((theme) => ({
+  backButton: {
+    backgroundColor: theme.palette.primary.main,
+    color: theme.palette.primary.contrastText,
+    "&:hover": {
+      backgroundColor: theme.palette.primary.dark,
+    },
+  },
+  nextButton: {
+    backgroundColor: theme.palette.primary.main,
+    color: "#fff !Important",
+    "&.MuiButton-root.Mui-disabled": {
+      opacity: "0.4 !Important",
+      color: "#fff !Important",
+    },
+    "&:hover": {
+      backgroundColor: theme.palette.primary.dark,
+    },
+  },
+}));
+
+export default function ButtonAppBar(props) {
+  const classes = useStyles();
+  const {
+    nextHide,
+    _handleBack,
+    isSubmitting,
+    isNextdisabled,
+    isLastStep,
+  } = props;
+
+  return (
+    <Box
+      component="footer"
+      sx={{
+        position: "relative",
+        width: "100%",
+      }}
+    >
+      <Box
+        sx={{
+          background: "#F2F5FB",
+          color: "#1F2327",
+          height: "48px",
+          alignItems: "center",
+          display: "flex",
+          justifyContent: "space-between",
+          padding: "8px",
+        }}
+      >
+        <Button
+          style={{
+            borderRadius: "500px",
+            backgroundColor: "#fff",
+            boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.09)",
+            padding: "2px 12px",
+          }}
+          startIcon={<FontAwesomeIcon icon={faArrowLeftLong} />}
+          className={classes.backButton}
+          onClick={_handleBack}
+        >
+          <span
+            style={{ fontSize: "14px", fontWeight: "600", padding: "4px 2px" }}
+          >
+            Back
+          </span>
+        </Button>
+        {!nextHide ? (
+          <Button
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center",
+              padding: "8px 12px",
+              gap: "4px",
+              height: "32px",
+              background: "#007BFF",
+              borderRadius: "500px",
+              backgroundColor: "#007BFF",
+            }}
+            startIcon={
+              isLastStep ? (
+                <FontAwesomeIcon icon={faCheck} />
+              ) : (
+                <FontAwesomeIcon icon={faArrowRightLong} size="sm" />
+              )
+            }
+            className={classes.nextButton}
+            disabled={isNextdisabled || isSubmitting}
+            type="submit"
+          >
+            {isLastStep ? (
+              <span style={{ padding: "4px 2px" }}>Confirm appointment </span>
+            ) : (
+              <span
+                style={{
+                  fontWeight: "600",
+                  fontSize: "14px",
+                  padding: "4px 2px",
+                }}
+              >
+                Next
+              </span>
+            )}
+          </Button>
+        ) : (
+          ""
+        )}
+
+        {isSubmitting && <CircularProgress style={{position: 'absolute',bottom: '300px',left: '200px',zIndex: '1',color: '#007bff'}} size={100} />}
+      </Box>
+    </Box>
+  );
+}