Merge pull request #34 from web-Nearest-car-wash/feature/carWashContacts

feat(carwashcontact): added contact section for car wash card
web-Nearest-car-wash · Feb 4, 2024 · f0aa1ee · f0aa1ee
2 parents 98806d7 + 01d119c
commit f0aa1ee
Show file tree

Hide file tree

Showing 8 changed files with 227 additions and 1 deletion.
diff --git a/src/components/CarWashContacts/CarWashContacts.jsx b/src/components/CarWashContacts/CarWashContacts.jsx
@@ -0,0 +1,58 @@
+import PropTypes from 'prop-types';
+import styles from './CarWashContacts.module.css';
+import formatSchedule from '../../utils/formatSchedule';
+import formatLink from '../../utils/formatLink';
+import PhoneIcon from '../UI/icons/PhoneIcon';
+import WebsiteIcon from '../UI/icons/WebsiteIcon';
+
+function CarWashContacts({ contacts, schedule }) {
+	return (
+		<div className={styles.container}>
+			{contacts.phone && (
+				<div className={styles.info}>
+					<h2 className={styles.header}>Контакты</h2>
+					<PhoneIcon />
+					<p className={styles.text}>
+						<a className={styles.link} href={`tel:${contacts.phone}`}>
+							{contacts.phone}
+						</a>
+					</p>
+				</div>
+			)}
+			{schedule && schedule.day_of_week && (
+				<div className={styles.info}>
+					<h2 className={styles.header}>График работы</h2>
+					<p className={styles.text}>{formatSchedule(schedule.day_of_week)}</p>
+				</div>
+			)}
+			{contacts.website && (
+				<div className={styles.info}>
+					<h2 className={styles.header}>Сайт</h2>
+					<WebsiteIcon />
+					<p className={styles.text}>
+						<a className={styles.link} href={contacts.website}>
+							{formatLink(contacts.website)}
+						</a>
+					</p>
+				</div>
+			)}
+		</div>
+	);
+}
+
+CarWashContacts.propTypes = {
+	contacts: PropTypes.shape({
+		address: PropTypes.string.isRequired,
+		email: PropTypes.string,
+		phone: PropTypes.string,
+		website: PropTypes.string,
+	}).isRequired,
+	schedule: PropTypes.shape({
+		day_of_week: PropTypes.arrayOf(PropTypes.string),
+		opening_time: PropTypes.string,
+		closing_time: PropTypes.string,
+		open_until_list: PropTypes.string,
+	}),
+};
+
+export default CarWashContacts;
diff --git a/src/components/CarWashContacts/CarWashContacts.module.css b/src/components/CarWashContacts/CarWashContacts.module.css
@@ -0,0 +1,44 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	box-sizing: border-box;
+	height: fit-content;
+	padding: 32px 24px;
+	gap: 24px;
+	border-radius: 20px;
+	background: #fff;
+}
+
+.info {
+	display: flex;
+	align-items: center;
+}
+
+.header {
+	color: rgb(37, 37, 37);
+	font-family: Roboto;
+	font-size: 20px;
+	font-weight: 500;
+	line-height: 23px;
+	width: 174px;
+	margin: 0;
+}
+
+.text {
+	color: rgb(37, 37, 37);
+	font-family: Roboto;
+	font-size: 18px;
+	font-weight: 400;
+	line-height: 21px;
+	margin: 0;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	max-width: 250px;
+}
+
+.link {
+	margin-left: 4px;
+	color: rgb(85, 104, 208);
+}
diff --git a/src/components/UI/icons/PhoneIcon.js b/src/components/UI/icons/PhoneIcon.js
@@ -0,0 +1,48 @@
+import PropTypes from 'prop-types';
+
+function PhoneIcon({ width, height }) {
+	return (
+		<svg
+			width={width || '24'}
+			height={height || '24'}
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<defs>
+				<clipPath id="clip1673_9859">
+					<rect
+						id="mingcute:phone-line"
+						width="24.000000"
+						height="24.000000"
+						fill="white"
+						fillOpacity="0"
+					/>
+				</clipPath>
+			</defs>
+			<rect
+				id="mingcute:phone-line"
+				width="24.000000"
+				height="24.000000"
+				fill="#FFFFFF"
+				fillOpacity="0"
+			/>
+			<g clipPath="url(#clip1673_9859)">
+				<path
+					id="Vector"
+					d="M8.172 15.8291C12.017 19.6738 15.58 20.0952 16.626 20.1338C17.89 20.1802 19.1801 19.1479 19.738 18.0908C18.848 17.0469 17.689 16.2368 16.42 15.3589C15.671 16.1069 14.748 17.4971 13.519 16.999C12.8199 16.7178 11.094 15.9229 9.58606 14.4141C8.07703 12.9058 7.28296 11.1802 7 10.4819C6.50195 9.25098 7.896 8.32617 8.64502 7.57715C7.76697 6.28711 6.97095 5.09814 5.92896 4.25293C4.85706 4.81299 3.81897 6.09277 3.86597 7.37402C3.90503 8.41992 4.32605 11.9829 8.172 15.8291ZM16.552 22.1328C15.1121 22.0801 11.031 21.5161 6.75696 17.2432C2.48401 12.9688 1.92102 8.88916 1.86694 7.44775C1.78699 5.25195 3.46899 3.11914 5.41199 2.28613C5.646 2.18506 5.90222 2.14648 6.15552 2.17432C6.40881 2.20215 6.65063 2.29541 6.85706 2.44482C8.46497 3.61816 9.57397 5.39502 10.527 6.78711C10.7252 7.07666 10.816 7.42627 10.7837 7.77539C10.7515 8.125 10.598 8.45166 10.35 8.7002L8.99402 10.0571C9.30896 10.752 9.94995 11.9502 11 13C12.05 14.0498 13.248 14.6909 13.944 15.0059L15.299 13.6499C15.5481 13.4014 15.8766 13.248 16.2271 13.2168C16.5775 13.1855 16.9279 13.2783 17.217 13.479C18.637 14.4629 20.3051 15.5562 21.521 17.1128C21.6826 17.3208 21.7854 17.5684 21.8187 17.8296C21.8519 18.0908 21.8145 18.3564 21.71 18.5981C20.873 20.5508 18.755 22.2139 16.552 22.1328Z"
+					fill="#5568D0"
+					fillOpacity="1.000000"
+					fillRule="evenodd"
+				/>
+			</g>
+		</svg>
+	);
+}
+
+PhoneIcon.propTypes = {
+	width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+	height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+export default PhoneIcon;
diff --git a/src/components/UI/icons/WebsiteIcon.js b/src/components/UI/icons/WebsiteIcon.js
@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+
+function PhoneIcon({ width, height }) {
+	return (
+		<svg
+			width={width || '20'}
+			height={height || '20'}
+			viewBox="0 0 20 20"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<desc>Created with Pixso.</desc>
+			<defs />
+			<path
+				id="Vector"
+				d="M14.36 12C14.4399 11.3398 14.5 10.6802 14.5 10C14.5 9.31982 14.4399 8.66016 14.36 8L17.74 8C17.9 8.64014 18 9.31006 18 10C18 10.6899 17.9 11.3599 17.74 12L14.36 12ZM12.59 17.5601C13.1899 16.4502 13.65 15.25 13.97 14L16.92 14C15.9512 15.6685 14.4141 16.9321 12.59 17.5601ZM12.34 12L7.66003 12C7.56006 11.3398 7.5 10.6802 7.5 10C7.5 9.31982 7.56006 8.6499 7.66003 8L12.34 8C12.4301 8.6499 12.5 9.31982 12.5 10C12.5 10.6802 12.4301 11.3398 12.34 12ZM10 17.96C9.17004 16.7598 8.5 15.4302 8.08997 14L11.91 14C11.5 15.4302 10.83 16.7598 10 17.96ZM6 6L3.07996 6C4.03882 4.32715 5.57483 3.06152 7.40002 2.43994C6.80005 3.5498 6.34998 4.75 6 6ZM3.07996 14L6 14C6.34998 15.25 6.80005 16.4502 7.40002 17.5601C5.57861 16.9316 4.0448 15.6675 3.07996 14ZM2.26001 12C2.09998 11.3599 2 10.6899 2 10C2 9.31006 2.09998 8.64014 2.26001 8L5.64001 8C5.56006 8.66016 5.5 9.31982 5.5 10C5.5 10.6802 5.56006 11.3398 5.64001 12L2.26001 12ZM10 2.02979C10.83 3.22998 11.5 4.56982 11.91 6L8.08997 6C8.5 4.56982 9.17004 3.22998 10 2.02979ZM16.92 6L13.97 6C13.657 4.76123 13.1936 3.56592 12.59 2.43994C14.4301 3.06982 15.96 4.33984 16.92 6ZM10 0C4.46997 0 0 4.5 0 10C0 12.6523 1.05359 15.1958 2.92896 17.0713C3.85754 17.9995 4.95996 18.7363 6.17322 19.2388C7.38647 19.7412 8.68677 20 10 20C12.6522 20 15.1957 18.9463 17.071 17.0713C18.9464 15.1958 20 12.6523 20 10C20 8.68701 19.7413 7.38623 19.2388 6.17334C18.7362 4.95996 17.9996 3.85742 17.071 2.92871C16.1425 2.00049 15.04 1.26367 13.8268 0.76123C12.6135 0.258789 11.3132 0 10 0Z"
+				fill="#5568D0"
+				fillOpacity="1.000000"
+				fillRule="nonzero"
+			/>
+		</svg>
+	);
+}
+
+PhoneIcon.propTypes = {
+	width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+	height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+export default PhoneIcon;
diff --git a/src/pages/CarWashPage/CarWashPage.jsx b/src/pages/CarWashPage/CarWashPage.jsx
@@ -9,7 +9,7 @@ import HeaderCarWash from '../../components/HeaderCarWash/HeaderCarWash';
 import Price from '../../components/Price/Price';
 import TheAdvancedSection from '../../components/TheAdvancedSection/TheAdvancedSection';
 import AddressCarWash from '../../components/AddressCarWash/AddressCarWash';
-
+import CarWashContacts from '../../components/CarWashContacts/CarWashContacts';
 import styles from './CarWashPage.module.css';
 
 function CarWashPage() {
@@ -44,6 +44,14 @@ function CarWashPage() {
 					/>
 				</div>
 				<div className={styles.sidebar}>
+					{carWashesCard.contacts &&
+						(carWashesCard.contacts.phone ||
+							carWashesCard.contacts.website) && (
+							<CarWashContacts
+								contacts={carWashesCard.contacts}
+								schedule={carWashesCard.schedule}
+							/>
+						)}
 					{carWashesCard.contacts && (
 						<AddressCarWash
 							coords={coords}

diff --git a/src/pages/CarWashPage/CarWashPage.module.css b/src/pages/CarWashPage/CarWashPage.module.css
@@ -21,5 +21,8 @@
 }
 
 .sidebar {
+	display: flex;
+	flex-direction: column;
 	flex-shrink: 0;
+	gap: 24px;
 }
diff --git a/src/utils/formatLink.js b/src/utils/formatLink.js
@@ -0,0 +1,11 @@
+function formatLink(linkToFormat) {
+	try {
+		const url = new URL(linkToFormat);
+		return url.host;
+	} catch (error) {
+		console.error('Ошибка в формате ссылки:', error);
+		return '';
+	}
+}
+
+export default formatLink;
diff --git a/src/utils/formatSchedule.js b/src/utils/formatSchedule.js
@@ -0,0 +1,24 @@
+function formatSchedule(days) {
+	const weekDays = [
+		'Понедельник',
+		'Вторник',
+		'Среда',
+		'Четверг',
+		'Пятница',
+		'Суббота',
+		'Воскресенье',
+	];
+	const formatedWeekDays = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
+
+	if (days.length === 7) {
+		return 'Пн-Вс';
+	}
+	const sortedDays = days
+		.map((day) => weekDays.indexOf(day))
+		.sort((a, b) => a - b);
+	const firstDay = formatedWeekDays[sortedDays[0]];
+	const lastDay = formatedWeekDays[sortedDays[sortedDays.length - 1]];
+	return `${firstDay}-${lastDay}`;
+}
+
+export default formatSchedule;