Skip to content

Commit

Permalink
Merge pull request #9 from winningwizardtechnologies/feature/add-pati…
Browse files Browse the repository at this point in the history 
…ents-and-dentists-page-content

add patients/dentists page, add booking tour, fix router routes to ca…
  • Loading branch information
@BehshadBabai
BehshadBabai authored Oct 14, 2023
2 parents 59fdedf + 169d703 commit 2d5b053
Show file tree
Hide file tree
Showing 18 changed files with 1,119 additions and 248 deletions.
9 changes: 9 additions & 0 deletions assets/app.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
.ant-drawer-close {
color: white !important;
}

.customCard {
border-radius: 5px;
box-shadow: 1px 2px 3px 4px rgba(12, 12, 12, 0.2);
}

.customCard:hover {
transform: scale(1.05);
}
32 changes: 30 additions & 2 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,41 @@ import CustomHeader from './Components/CustomHeader';
import Contacts from './Pages/Contacts';
import Booking from './Pages/Booking';
import Feedback from './Pages/Feedback';
import { Constants } from './Utilities/Constants';
import { Constants, LocalStorageKeys } from './Utilities/Constants';

const { Content } = Layout;

const App = () => {
const screenSize = useScreenSize();
const [collapsed, setCollapsed] = React.useState(false);

const bookingTourDentist = {
shown: false
};
const bookingTourPatient = {
shown: false
};
if (localStorage) {
const dentistObj = JSON.parse(
localStorage.getItem(LocalStorageKeys.tours.dentist)
);
if (!dentistObj) {
localStorage.setItem(
LocalStorageKeys.tours.dentist,
JSON.stringify(bookingTourDentist)
);
}
const patientObj = JSON.parse(
localStorage.getItem(LocalStorageKeys.tours.dentist)
);
if (!patientObj) {
localStorage.setItem(
LocalStorageKeys.tours.patient,
JSON.stringify(bookingTourPatient)
);
}
}

const {
token: { colorBgContainer }
} = theme.useToken();
Expand Down Expand Up @@ -45,7 +73,7 @@ const App = () => {
<Route path='booking' element={<Booking />} />
<Route path='feedback' element={<Feedback />} />
<Route path='404' element={<NoPage />} />
<Route path='*' element={<Navigate to='/404' replace />} />
<Route path='*' element={<NoPage />} />
</Routes>
</Content>
</Layout>
Expand Down
63 changes: 37 additions & 26 deletions src/Components/AccountParts/DentistFrom.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,16 @@ import {
DentistInfo,
changeDentistInfo
} from '../../Redux/features/dentist/dentist-slice';
import { provinces, states } from '../../Utilities/Constants';

const DentistForm: React.FC = () => {
const [form] = Form.useForm();
const dispatch = useAppDispatch();
const account = useAppSelector((state) => state.account);
const dentistInfo = useAppSelector((state) => state.dentist.info);
const [country, setCountry] = React.useState('Canada');
const [provState, setProvState] = React.useState(dentistInfo?.province);
const options = country === 'Canada' ? provinces : states;

const onFinish = (values: DentistInfo) => {
// on save, change db first
Expand Down Expand Up @@ -63,50 +67,55 @@ const DentistForm: React.FC = () => {
</Form.Item>
</Col>
</Row>
<Row>
<Col xs={24}>
<Row gutter={10}>
<Col xs={24} lg={11}>
<Form.Item name='address1' label='Address Line 1'>
<Input />
</Form.Item>
</Col>
</Row>

<Row>
<Col xs={24}>
<Col xs={24} lg={13}>
<Form.Item name='address2' label='Address Line 2'>
<Input />
</Form.Item>
</Col>
</Row>

<Row gutter={10}>
<Col xs={24} md={9}>
<Col xs={24} lg={7}>
<Form.Item label='Country'>
<Select defaultValue={'canada'}>
<Select.Option value='canada'>Canada</Select.Option>
<Select
value={country}
onChange={(newValue) => {
if (newValue === 'Canada') {
setProvState('Alberta');
} else {
setProvState('Alabama');
}
setCountry(newValue);
}}
>
<Select.Option value='Canada'>Canada</Select.Option>
<Select.Option value='United States'>United States</Select.Option>
</Select>
</Form.Item>
</Col>
<Col xs={24} md={7}>
<Form.Item label='Province' name='province'>
<Select>
<Select.Option value='ab'>AB</Select.Option>
<Select.Option value='bc'>BC</Select.Option>
<Select.Option value='mb'>MB</Select.Option>
<Select.Option value='nb'>NB</Select.Option>
<Select.Option value='nl'>NL</Select.Option>
<Select.Option value='nt'>NT</Select.Option>
<Select.Option value='ns'>NS</Select.Option>
<Select.Option value='ny'>NY</Select.Option>
<Select.Option value='on'>ON</Select.Option>
<Select.Option value='pe'>PE</Select.Option>
<Select.Option value='qc'>QC</Select.Option>
<Select.Option value='sk'>SK</Select.Option>
<Select.Option value='yt'>YT</Select.Option>
<Col xs={24} lg={9}>
<Form.Item label='Province'>
<Select
value={provState}
onChange={(newValue) => {
setProvState(newValue);
}}
>
{options.map((option) => (
<Select.Option value={option} key={option}>
{option}
</Select.Option>
))}
</Select>
</Form.Item>
</Col>
<Col xs={24} md={8}>
<Col xs={24} lg={8}>
<Form.Item name='postalCode' label='Postal Code'>
<Input />
</Form.Item>
Expand All @@ -129,6 +138,8 @@ const DentistForm: React.FC = () => {
type='default'
onClick={() => {
form.resetFields();
setProvState(dentistInfo?.province);
setCountry(dentistInfo?.country);
}}
>
Reset
Expand Down
177 changes: 70 additions & 107 deletions src/Components/AccountParts/DentistSignup.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,21 @@
import { Button, Card, Col, Row, RowProps, Space, Typography } from 'antd';
import { Button, Col, List, Row, Space, Typography } from 'antd';
import React from 'react';
import { MdBadge, MdPlace, MdLabel, MdEmail } from 'react-icons/md';
import { PiCertificateFill } from 'react-icons/pi';
import { AiFillHome, AiFillPhone } from 'react-icons/ai';
import { FaGlobeAmericas } from 'react-icons/fa';
import useScreenSize from '../../Hooks/useScreenSize';
import { CiLocationOn } from 'react-icons/ci';
import { FaRegAddressCard } from 'react-icons/fa';
import { GrCertificate } from 'react-icons/gr';
import { IoHomeOutline } from 'react-icons/io5';
import { BsGlobe, BsPhone, BsSignpost } from 'react-icons/bs';
import { GoMail } from 'react-icons/go';
import { useAppDispatch } from '../../Redux/hooks';
import { toggleHasAccount } from '../../Redux/features/account/account-slice';
const AccountRadio: React.FC = () => {
const screenSize = useScreenSize();
const dispatch = useAppDispatch();

const gridStyleDesktop: React.CSSProperties = {
width: '25%',
textAlign: 'center'
};
const gridStyleMobile: React.CSSProperties = {
width: '50%',
textAlign: 'center'
};
const cardRowProps: RowProps = {
justify: 'center',
align: 'middle',
gutter: 10,
style: {
height: '100%'
}
};
return (
<Row justify={'center'} gutter={[0, 40]}>
<Col style={{ width: '95%' }}>
<Space direction='vertical' size={'large'}>
<Typography.Paragraph
style={{ fontSize: '1.2em', lineHeight: '2em' }}
style={{ fontSize: '1.1em', lineHeight: '2em' }}
>
Want to join SMARDEN as a dentist? We're exicted to have you on
board! We are commited to make the registration process as smooth
Expand All @@ -42,89 +25,69 @@ const AccountRadio: React.FC = () => {
<a href='mailto: mbabai110@yahoo.com'>mbabai110@yahoo.com</a> with
the email title of "SMARDEN Dentist Registration":
</Typography.Paragraph>
<Card title='Information to Include' style={{ textAlign: 'center' }}>
<Card.Grid
style={
screenSize.width < 800 ? gridStyleMobile : gridStyleDesktop
}
>
{' '}
<Row {...cardRowProps}>
<MdBadge size={25} />
<Col>Full Name</Col>
</Row>
</Card.Grid>
<Card.Grid
style={
screenSize.width < 800 ? gridStyleMobile : gridStyleDesktop
}
>
<Row justify={'center'} align={'middle'} gutter={10}>
<PiCertificateFill size={25} />
<Col>Certificate</Col>
</Row>
</Card.Grid>
<Card.Grid
style={
screenSize.width < 800 ? gridStyleMobile : gridStyleDesktop
}
>
<Row {...cardRowProps}>
<AiFillHome size={23} />
<Col>Address</Col>
</Row>
</Card.Grid>
<Card.Grid
style={
screenSize.width < 800 ? gridStyleMobile : gridStyleDesktop
}
>
<Row {...cardRowProps}>
<FaGlobeAmericas size={23} />
<Col>Country</Col>
</Row>
</Card.Grid>
<Card.Grid
style={
screenSize.width < 800 ? gridStyleMobile : gridStyleDesktop
}
>
<Row {...cardRowProps}>
<MdPlace size={27} />
<Col>Province/State</Col>
</Row>
</Card.Grid>
<Card.Grid
style={
screenSize.width < 800 ? gridStyleMobile : gridStyleDesktop
}
>
<Row {...cardRowProps}>
<MdLabel size={30} />
<Col>Postal Code</Col>
</Row>
</Card.Grid>
<Card.Grid
style={
screenSize.width < 800 ? gridStyleMobile : gridStyleDesktop
}
>
<Row {...cardRowProps}>
<AiFillPhone size={25} />
<Col>Phone Number</Col>
</Row>
</Card.Grid>
<Card.Grid
style={
screenSize.width < 800 ? gridStyleMobile : gridStyleDesktop
<List
bordered
header={'Requested Information'}
pagination={false}
dataSource={[
{
title: 'Full Name',
description: 'Your full legal name as desplayed on your ID',
icon: <FaRegAddressCard size={45} />
},
{
title: 'Certificate',
description:
'Your certificate of dentistry in the country of your residence',
icon: <GrCertificate size={45} />
},
{
title: 'Address',
description:
'Your address where you provide services to patients',
icon: <IoHomeOutline size={45} />
},
{
title: 'Country',
description:
'Your country where you provide services to patients',
icon: <BsGlobe size={45} />
},
{
title: 'Province/State',
description:
'Your province/state where you provide services to patients',
icon: <CiLocationOn size={45} />
},
{
title: 'Postal/Zip Code',
description:
'Your postal/zip code where you provide services to patients',
icon: <BsSignpost size={45} />
},
{
title: 'Postal/Zip Code',
description:
'Your phone number for signing up with SMARDEN (not shared with patients)',
icon: <BsPhone size={45} />
},
{
title: 'Business Email',
description:
'Your email for signing up with SMARDEN (not shared with patients)',
icon: <GoMail size={45} />
}
>
<Row {...cardRowProps}>
<MdEmail size={25} />
<Col>Business Email</Col>
</Row>
</Card.Grid>
</Card>
]}
renderItem={(item, _index) => (
<List.Item>
<List.Item.Meta
avatar={item.icon}
title={item.title}
description={item.description}
/>
</List.Item>
)}
/>
</Space>
</Col>
<Col>
Expand Down
Loading

0 comments on commit 2d5b053

Please sign in to comment.