Deepak

.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,9 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@date-io/date-fns": "^1.3.13",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
     "@material-ui/core": "^4.9.0",
     "@material-ui/pickers": "^3.2.10",
+    "@mui/icons-material": "^5.11.11",
+    "@mui/joy": "^5.0.0-alpha.72",
+    "@mui/material": "^5.11.14",
     "@testing-library/jest-dom": "^5.0.2",
     "@testing-library/react": "^9.4.0",
     "@testing-library/user-event": "^8.1.0",
@@ -14,8 +18,9 @@
     "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",
     "yup": "^0.28.1"
   },
@@ -46,4 +51,4 @@
     "eslint-plugin-react-hooks": "^2.3.0",
     "prettier": "1.19.1"
   }
-}
+}

src/App.js

@@ -1,14 +1,12 @@
-import React from 'react';
-import MaterialLayout from './components/Layout/MaterialLayout';
-import CheckoutPage from './components/CheckoutPage';
+import React from "react";
+import MaterialLayout from "./components/Layout/MaterialLayout";
+import AppointmentForm from "./components/AppointmentForm";
 
 function App() {
   return (
-    <div>
-      <MaterialLayout>
-        <CheckoutPage />
-      </MaterialLayout>
-    </div>
+    <MaterialLayout>
+      <AppointmentForm />
+    </MaterialLayout>
   );
 }
 

src/components/AppointmentForm/Appointment/index.js

@@ -0,0 +1,65 @@
+import React, { useState } from "react";
+import Calendar from "react-calendar";
+import { Typography } from "@material-ui/core";
+import "react-calendar/dist/Calendar.css";
+import Radio from "@mui/material/Radio";
+import RadioGroup from "@mui/material/RadioGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+
+function Appointment() {
+  const [value, onChange] = useState(new Date());
+
+  return (
+    <div>
+      <Calendar onChange={onChange} value={value} />
+
+      <div
+        style={{
+          background: "#F2F0FA",
+          height: "50vh",
+        }}
+      >
+        <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,76 @@
+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";
+
+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: theme.palette.primary.contrastText,
+    "& .MuiButton-root.Mui-disabled": {
+      backgroundColor: theme.palette.primary.dark,
+      color: theme.palette.primary.contrastText,
+    },
+    "&: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: "fixed",
+        bottom: 0,
+        width: "35%",
+      }}
+    >
+      <Box
+        sx={{
+          background: "#F2F5FB",
+          color: "#1F2327",
+          height: "48px",
+          alignItems: "center",
+          display: "flex",
+          justifyContent: "space-between",
+          padding: "8px",
+        }}
+      >
+        <Button className={classes.backButton} onClick={_handleBack}>
+          Back
+        </Button>
+        {!nextHide ? (
+          <Button
+            className={classes.nextButton}
+            disabled={isNextdisabled || isSubmitting}
+            type="submit"
+          >
+            {isLastStep ? "Confirm appointment" : "Next"}
+          </Button>
+        ) : (
+          ""
+        )}
+
+        {isSubmitting && <CircularProgress size={24} />}
+      </Box>
+    </Box>
+  );
+}

src/components/AppointmentForm/Client/ClientInfo/ExistingCustomerAddress.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { Typography } from "@material-ui/core";
+import RadioGroup from "@mui/material/RadioGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Radio from "@mui/material/Radio";
+
+const ExistingCustomerAddress = () => {
+  return (
+    <div>
+      <Typography variant="h6" gutterBottom>
+        Address where our team is needed
+      </Typography>
+
+      <RadioGroup
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          paddingLeft: "17px",
+        }}
+        name="use-radio-group"
+        defaultValue="first"
+      >
+        <FormControlLabel
+          value="first"
+          label="XXXX Monterey Blvd. "
+          control={<Radio />}
+        />
+        <FormControlLabel
+          value="second"
+          label="XXXX Harry Byrd Hwy."
+          control={<Radio />}
+        />
+      </RadioGroup>
+    </div>
+  );
+};
+
+export default ExistingCustomerAddress;

src/components/AppointmentForm/Client/ClientInfo/ExistingCustomerDetail.jsx

@@ -0,0 +1,71 @@
+import React, { useEffect, useState } from "react";
+import { Typography } from "@material-ui/core";
+import InputAdornment from "@mui/material/InputAdornment";
+import TextField from "@mui/material/TextField";
+import LocalPhoneOutlinedIcon from "@mui/icons-material/LocalPhoneOutlined";
+
+const ExistingCustomerDetail = (props) => {
+  const { _setClientFormData, setIsNextdisabled } = props;
+  const [accountPhoneNumber, setAccountPhoneNumber] = useState("");
+
+  useEffect(() => {
+    if (accountPhoneNumber === "") {
+      setIsNextdisabled(true);
+    } else {
+      setIsNextdisabled(false);
+    }
+  }, [accountPhoneNumber]);
+
+  return (
+    <div>
+      <Typography variant="h6" gutterBottom>
+        Existing customer
+      </Typography>
+
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "17px",
+          width: "512px",
+          margin: "auto",
+        }}
+      >
+        <Typography
+          style={{
+            fontFamily: "Poppins",
+            fontStyle: "normal",
+            fontWeight: "400",
+            fontSize: "16px",
+            lineHeight: "32px",
+            color: "#4D4F59",
+          }}
+          variant="Body"
+          gutterBottom
+        >
+          Please enter your account phone number
+        </Typography>
+
+        <TextField
+          name="accountPhoneNumber"
+          id="input-with-icon-textfield"
+          label="Account phone number"
+          placeholder="Account phone number"
+          onChange={(event) => {
+            setAccountPhoneNumber(event.target.value);
+            _setClientFormData(event.target.name, event.target.value);
+          }}
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <LocalPhoneOutlinedIcon />
+              </InputAdornment>
+            ),
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ExistingCustomerDetail;