Commit e24cd69d by Syed Abdul Rahman

success modal implemented

parent 3d107cda
...@@ -40,19 +40,19 @@ ...@@ -40,19 +40,19 @@
"userid": "5ebc", "userid": "5ebc",
"selected": [ "selected": [
{ {
"row": 6, "row": 2,
"seat": 5 "seat": 5
}, },
{ {
"row": 6, "row": 2,
"seat": 6 "seat": 6
}, },
{ {
"row": 6, "row": 2,
"seat": 7 "seat": 7
}, },
{ {
"row": 5, "row": 2,
"seat": 8 "seat": 8
} }
] ]
......
import Button from './Index'; import Button from './Index';
import Space from '../../Layout/Space/Index' import Space from '../../Layout/Space/Index';
export default { export default {
title: 'Component/Base/Button', title: 'Component/Base/Button',
tags: ['autodocs'], tags: ['autodocs'],
component: Button component: Button
} };
export const Default = { export const Primary = {
args: { args: {
primary: true, primary: true,
label: 'Button', label: 'Button'
}, },
render: () => { render: () => {
return ( return (
<> <>
<h2 style={{ fontFamily: "Poppins-Medium", color: 'white' }}>Size</h2> <h2 style={{ fontFamily: 'Poppins-Medium', color: 'white' }}>Size</h2>
<Space>
<Button size={'sm'}>Small</Button>
<Button size={'md'}>Medium</Button>
<Button size={'lg'}>Large</Button>
</Space>
<h2 style={{ fontFamily: 'Poppins-Medium', color: 'white' }}>Loader</h2>
<Space>
<Button size={'sm'} loading={true}>
Button
</Button>
<Button size={'md'} loading={true}>
Button
</Button>
<Button size={'lg'} loading={true}>
Button
</Button>
</Space>
<h2 style={{ fontFamily: 'Poppins-Medium', color: 'white' }}>
Disabled
</h2>
<Space>
<Button size={'sm'} disabled={true}>
Button
</Button>
<Button size={'md'} disabled={true}>
Button
</Button>
<Button size={'lg'} disabled={true}>
Button
</Button>
</Space>
<h2 style={{ fontFamily: 'Poppins-Medium', color: 'white' }}>
Loading & Disabled
</h2>
<Space>
<Button size={'sm'} disabled={true} loading={true}>
Button
</Button>
<Button size={'md'} disabled={true} loading={true}>
Button
</Button>
<Button size={'lg'} disabled={true} loading={true}>
Button
</Button>
</Space>
</>
);
}
};
export const Secondary = {
render: () => {
return (
<>
<h2 style={{ fontFamily: 'Poppins-Medium', color: 'white' }}>Size</h2>
<Space> <Space>
<Button size={"sm"}>Button - SM</Button> <Button size={'sm'} variant="secondary">
<Button size={"md"}>Button - MD</Button> Small
<Button size={"lg"}>Button - LG</Button> </Button>
<Button size={'md'} variant="secondary">
Medium
</Button>
<Button size={'lg'} variant="secondary">
Large
</Button>
</Space> </Space>
<h2 style={{ fontFamily: "Poppins-Medium", color: 'white' }}>Loader</h2> <h2 style={{ fontFamily: 'Poppins-Medium', color: 'white' }}>Loader</h2>
<Space> <Space>
<Button size={"sm"} loading={true}>Button</Button> <Button size={'sm'} variant="secondary" loading={true}>
<Button size={"md"} loading={true}>Button</Button> Button
<Button size={"lg"} loading={true}>Button</Button> </Button>
<Button size={'md'} variant="secondary" loading={true}>
Button
</Button>
<Button size={'lg'} variant="secondary" loading={true}>
Button
</Button>
</Space> </Space>
<h2 style={{ fontFamily: "Poppins-Medium", color: 'white' }}>Disabled</h2> <h2 style={{ fontFamily: 'Poppins-Medium', color: 'white' }}>
Disabled
</h2>
<Space> <Space>
<Button size={"sm"} disabled={true}>Button</Button> <Button size={'sm'} variant="secondary" disabled={true}>
<Button size={"md"} disabled={true}>Button</Button> Button
<Button size={"lg"} disabled={true}>Button</Button> </Button>
<Button size={'md'} variant="secondary" disabled={true}>
Button
</Button>
<Button size={'lg'} variant="secondary" disabled={true}>
Button
</Button>
</Space> </Space>
<h2 style={{ fontFamily: "Poppins-Medium", color: 'white' }}>Loading & Disabled</h2> <h2 style={{ fontFamily: 'Poppins-Medium', color: 'white' }}>
Loading & Disabled
</h2>
<Space> <Space>
<Button size={"sm"} disabled={true} loading={true}>Button</Button> <Button
<Button size={"md"} disabled={true} loading={true}>Button</Button> size={'sm'}
<Button size={"lg"} disabled={true} loading={true}>Button</Button> variant="secondary"
disabled={true}
loading={true}>
Button
</Button>
<Button
size={'md'}
variant="secondary"
disabled={true}
loading={true}>
Button
</Button>
<Button
size={'lg'}
variant="secondary"
disabled={true}
loading={true}>
Button
</Button>
</Space> </Space>
</> </>
) );
} }
}; };
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styles from './styles.module.css'; import styles from './styles.module.css';
const Button = ({ loading, size, disabled, children, ...props }) => { const Button = ({ loading, size, disabled, children, variant, ...props }) => {
return ( return (
<button className={`${styles.button} ${styles[size]} ${disabled ? styles['disabled'] : ''}`} {...props}>{loading && <div className={`${styles.loader} ${styles[`loader-${size}`]}`}></div>}{children}</button> <button
) className={`${styles.button} ${styles[variant]} ${styles[size]} ${
} disabled ? styles['disabled'] : ''
}`}
{...props}>
{loading && (
<div className={`${styles.loader} ${styles[`loader-${size}`]}`}></div>
)}
{children}
</button>
);
};
export default Button; export default Button;
Button.propTypes = { Button.propTypes = {
children: PropTypes.node.isRequired, children: PropTypes.node.isRequired,
disabled: PropTypes.bool, disabled: PropTypes.bool,
onClick: PropTypes.func,
size: PropTypes.string, size: PropTypes.string,
loading: PropTypes.bool loading: PropTypes.bool
} };
\ No newline at end of file
.button { .button {
border: none; border: none;
outline: none; outline: none;
background-color: white;
color: black;
border-radius: 10px; border-radius: 10px;
font-family: 'Poppins-Medium'; font-family: 'Poppins-Medium';
font-weight: 500; font-weight: 500;
...@@ -15,6 +13,21 @@ ...@@ -15,6 +13,21 @@
box-sizing: border-box; box-sizing: border-box;
} }
.primary {
background-color: white;
color: black;
}
.secondary {
background-color: rgb(155, 17, 17);
color: white;
}
.secondary:hover {
background-color: rgba(244, 10, 10, 0.852) !important;
color: black !important;
}
.button:hover { .button:hover {
background-color: rgba(161, 161, 245, 0.358); background-color: rgba(161, 161, 245, 0.358);
color: white; color: white;
......
...@@ -16,44 +16,56 @@ const BookingWrapper = ({ ...@@ -16,44 +16,56 @@ const BookingWrapper = ({
} }
}; };
const processedSeatData = seatData?.map((row, rowIndex) =>
row.map((seat) => {
if (seat === '*') {
return { type: 'gap' };
}
const foundInCurrentSeats = currentSeats?.find(
(e) => e.row === rowIndex + 1 && e.seat === seat
);
const foundInSelectedSeats = selectedSeats?.some(
(e) => e.row === rowIndex + 1 && e.seat === seat
);
let status = '';
if (foundInCurrentSeats) status = 'current-selected';
else if (foundInSelectedSeats) status = 'selected-by-other';
return {
seat,
row: rowIndex + 1,
status
};
})
);
return ( return (
<div className={styles['booking-wrapper']}> <div className={styles['booking-wrapper']}>
<div className={styles['theatre']}> <div className={styles['theatre']}>
{seatData?.map((row, row_index) => ( {processedSeatData?.map((row, rowIndex) => (
<div key={`row-${row_index}`} className={styles['seat-row']}> <div key={`row-${rowIndex}`} className={styles['seat-row']}>
{row?.map((seat, column_index) => { {row.map((seatObj, colIndex) => {
if (seat === '*') { if (seatObj.type === 'gap') {
return ( return (
<div <div
key={`gap-${row_index}-${column_index}`} key={`gap-${rowIndex}-${colIndex}`}
className={styles['seat-gap']} className={styles['seat-gap']}
/> />
); );
} }
const seatKey = `${row_index + 1}-${seat}`; const seatKey = `${seatObj.row}-${seatObj.seat}`;
let seatClass = '';
const foundInCurrentSeats = currentSeats?.find(
(e) => e.row === row_index + 1 && e.seat === seat
);
const foundInSelectedSeats = selectedSeats?.some(
(e) => e.row === row_index + 1 && e.seat === seat
);
if (foundInCurrentSeats) {
seatClass = 'current-selected';
} else if (foundInSelectedSeats) {
seatClass = 'selected-by-other';
}
return ( return (
<Seat <Seat
key={seatKey} key={seatKey}
status={seatClass} status={seatObj.status}
id={seat} id={seatObj.seat}
onClick={() => onClick={() =>
handleSeatClick(row_index + 1, seat, seatClass) handleSeatClick(seatObj.row, seatObj.seat, seatObj.status)
} }
/> />
); );
......
import PropTypes from "prop-types"; import PropTypes from 'prop-types';
import styles from "./styles.module.css"; import styles from './styles.module.css';
const Header = ({ children }) => { const Header = ({ children }) => {
return ( return (
<section className={styles["header-wrapper"]}> <section className={styles['header-wrapper']}>
<div className={styles.title}>{children}</div> <div className={styles.title}>{children}</div>
<div className={styles.screenWrapper}> <div className={styles.screenWrapper}>
{/* <svg viewBox="0 20 480 100" xmlns="http://www.w3.org/2000/svg"> {/* <svg viewBox="0 20 480 100" xmlns="http://www.w3.org/2000/svg">
...@@ -69,8 +69,7 @@ const Header = ({ children }) => { ...@@ -69,8 +69,7 @@ const Header = ({ children }) => {
y1="70" y1="70"
x2="0" x2="0"
y2="150" y2="150"
gradientUnits="userSpaceOnUse" gradientUnits="userSpaceOnUse">
>
<stop offset="0%" stop-color="#9c6ad5" stop-opacity="1" /> <stop offset="0%" stop-color="#9c6ad5" stop-opacity="1" />
<stop offset="60%" stop-color="#9c6ad5" stop-opacity="1" /> <stop offset="60%" stop-color="#9c6ad5" stop-opacity="1" />
<stop offset="100%" stop-color="#9c6ad5" stop-opacity="1" /> <stop offset="100%" stop-color="#9c6ad5" stop-opacity="1" />
...@@ -95,8 +94,7 @@ const Header = ({ children }) => { ...@@ -95,8 +94,7 @@ const Header = ({ children }) => {
y1="100" y1="100"
x2="0" x2="0"
y2="150" y2="150"
gradientUnits="userSpaceOnUse" gradientUnits="userSpaceOnUse">
>
<stop offset="0%" stop-color="#9c6ad5" stop-opacity="0.4" /> <stop offset="0%" stop-color="#9c6ad5" stop-opacity="0.4" />
<stop offset="50%" stop-color="#9c6ad5" stop-opacity="0.2" /> <stop offset="50%" stop-color="#9c6ad5" stop-opacity="0.2" />
<stop offset="100%" stop-color="#9c6ad5" stop-opacity="0" /> <stop offset="100%" stop-color="#9c6ad5" stop-opacity="0" />
...@@ -116,7 +114,7 @@ const Header = ({ children }) => { ...@@ -116,7 +114,7 @@ const Header = ({ children }) => {
}; };
Header.propTypes = { Header.propTypes = {
children: PropTypes.node.isRequired, children: PropTypes.node.isRequired
}; };
export default Header; export default Header;
...@@ -10,10 +10,10 @@ const Index = ({ onConfirm, onCancel }) => { ...@@ -10,10 +10,10 @@ const Index = ({ onConfirm, onCancel }) => {
Please confirm to proceed with your booking. Please confirm to proceed with your booking.
</p> </p>
<div className={styles['btn-wrapper']}> <div className={styles['btn-wrapper']}>
<Button size={'md'} onClick={onCancel}> <Button size="md" variant="secondary" onClick={onCancel}>
Cancel Cancel
</Button> </Button>
<Button size={'md'} onClick={onConfirm}> <Button size="md" variant="primary" onClick={onConfirm}>
Confirm Confirm
</Button> </Button>
</div> </div>
......
...@@ -6,12 +6,12 @@ import styles from './styles.module.css'; ...@@ -6,12 +6,12 @@ import styles from './styles.module.css';
const SuccessModal = ({ onConfirm }) => { const SuccessModal = ({ onConfirm }) => {
return ( return (
<Modal> <Modal>
<div style={{ height: '300px' }}> <div className={styles['content-wrapper']}>
<div className={styles['btn-wrapper']}> <div className={styles['btn-wrapper']}>
<p>Booked Successfully</p> <p>Booked Successfully</p>
</div> </div>
<Lottie <Lottie
style={{ height: '60%', width: '100%' }} className={styles.lottieSvg}
animationData={animationData} animationData={animationData}
loop={false} loop={false}
autoplay={true} autoplay={true}
......
import SuccessModal from './Index';
export default {
title: 'Component/TopLevel/SuccessModal',
tags: ['autodocs'],
component: SuccessModal,
argTypes: {
onConfirm: { action: 'On Confirm' }
}
};
export const SuccessModalContent = {};
.content-wrapper {
height: 300px;
}
.btn-wrapper { .btn-wrapper {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.lottieSvg {
width: 100%;
height: 60%;
}
...@@ -18,7 +18,16 @@ import Button from '../../components/Base/Button/Index'; ...@@ -18,7 +18,16 @@ import Button from '../../components/Base/Button/Index';
import LegendWrapper from '../../components/TopLevel/LegendWrapper/Index'; import LegendWrapper from '../../components/TopLevel/LegendWrapper/Index';
import img from '../../assets/images/power-button_12080802.png'; import img from '../../assets/images/power-button_12080802.png';
import styles from './styles.module.css'; import styles from './styles.module.css';
const data = [
['*', 1, 2, 3, '*', 4, 5, 6, '*'],
[1, 2, 3, 4, '*', 5, 6, 7, 8],
[1, 2, 3, 4, '*', 5, 6, 7, 8],
[1, 2, 3, 4, '*', 5, 6, 7, 8],
[1, 2, 3, 4, '*', 5, 6, 7, 8],
[1, 2, 3, 4, '*', 5, 6, 7, 8],
[1, 2, 3, 4, '*', 5, 6, 7, 8],
['*', 1, 2, 3, '*', 4, 5, 6, '*']
];
const BookingPage = () => { const BookingPage = () => {
let userId = getItem(appConstants.USER); let userId = getItem(appConstants.USER);
const navigate = useNavigate(); const navigate = useNavigate();
...@@ -58,17 +67,6 @@ const BookingPage = () => { ...@@ -58,17 +67,6 @@ const BookingPage = () => {
setCurrentSeats(currentData?.selected); setCurrentSeats(currentData?.selected);
}; };
const data = [
['*', 1, 2, 3, '*', 4, 5, 6, '*'],
[1, 2, 3, 4, '*', 5, 6, 7, 8],
[1, 2, 3, 4, '*', 5, 6, 7, 8],
[1, 2, 3, 4, '*', 5, 6, 7, 8],
[1, 2, 3, 4, '*', 5, 6, 7, 8],
[1, 2, 3, 4, '*', 5, 6, 7, 8],
[1, 2, 3, 4, '*', 5, 6, 7, 8],
['*', 1, 2, 3, '*', 4, 5, 6, '*']
];
const logout = () => { const logout = () => {
reset(); reset();
navigate('/login'); navigate('/login');
...@@ -97,7 +95,7 @@ const BookingPage = () => { ...@@ -97,7 +95,7 @@ const BookingPage = () => {
setShowSeatsConfirmationModal(false); setShowSeatsConfirmationModal(false);
}; };
const onSeatRemove = (rowId, columnId) => { const handleSeatRemove = (rowId, columnId) => {
setCurrentSeats((prev) => { setCurrentSeats((prev) => {
let updatedSeats; let updatedSeats;
updatedSeats = prev?.filter( updatedSeats = prev?.filter(
...@@ -112,7 +110,7 @@ const BookingPage = () => { ...@@ -112,7 +110,7 @@ const BookingPage = () => {
}); });
}; };
const onSeatAdd = (rowId, columnId) => { const handleSeatAdd = (rowId, columnId) => {
setCurrentSeats((prev) => { setCurrentSeats((prev) => {
let updatedSeats; let updatedSeats;
if (prev?.length < noOfSeats || !prev?.length) { if (prev?.length < noOfSeats || !prev?.length) {
...@@ -133,7 +131,7 @@ const BookingPage = () => { ...@@ -133,7 +131,7 @@ const BookingPage = () => {
}); });
}; };
const onSeatsConfirm = () => { const handleSeatsConfirm = () => {
setShowSeatsConfirmationModal(true); setShowSeatsConfirmationModal(true);
}; };
...@@ -155,6 +153,11 @@ const BookingPage = () => { ...@@ -155,6 +153,11 @@ const BookingPage = () => {
setShowSuccessModal(true); setShowSuccessModal(true);
}; };
const handleSuccessModalConfirm = () => {
setShowSuccessModal(false);
setButtonState(true);
};
return ( return (
<div className={styles['seat-booking-wrapper']}> <div className={styles['seat-booking-wrapper']}>
<img <img
...@@ -169,12 +172,12 @@ const BookingPage = () => { ...@@ -169,12 +172,12 @@ const BookingPage = () => {
seatData={data} seatData={data}
selectedSeats={selectedSeats} selectedSeats={selectedSeats}
currentSeats={currentSeats} currentSeats={currentSeats}
onSeatRemove={onSeatRemove} onSeatRemove={handleSeatRemove}
onSeatAdd={onSeatAdd} onSeatAdd={handleSeatAdd}
/> />
</div> </div>
<div className={styles['btn-wrapper']}> <div className={styles['btn-wrapper']}>
<Button size={'lg'} onClick={onSeatsConfirm} disabled={buttonState}> <Button size={'lg'} onClick={handleSeatsConfirm} disabled={buttonState}>
Confirm Confirm
</Button> </Button>
</div> </div>
...@@ -190,7 +193,7 @@ const BookingPage = () => { ...@@ -190,7 +193,7 @@ const BookingPage = () => {
<ConfirmSeatContent onConfirm={seatsFinal} onCancel={finalCancel} /> <ConfirmSeatContent onConfirm={seatsFinal} onCancel={finalCancel} />
)} )}
{showSuccessModal && ( {showSuccessModal && (
<SuccessModal onConfirm={() => setShowSuccessModal(false)} /> <SuccessModal onConfirm={handleSuccessModalConfirm} />
)} )}
</div> </div>
); );
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment