@protacon/muster-booking-frontend 1.32.0 → 1.33.0

package/dist/styles.bundle.css

@@ -174,13 +174,98 @@ nav.disabled {
 	cursor: pointer;
 }
 
+.vehicle-info-container.selected-vehicle {
+	border: 1px solid #000;
+	background: #c9c9c920;
+}
+
+.vehicle-info-container.selected-vehicle:has(+ .vehicle-buttons-container) {
+	border-bottom: none;
+}
+
+.row {
+	margin-left: -4px;
+	margin-right: -4px;
+}
+
+.multiple-products-info-container-row {
+	display: flex;
+	width: 100%;
+	align-items: flex-start;
+}
+
+.product-card {
+	height: 100%;
+	margin-bottom: 0;
+}
+
 .vehicle-info-container {
 	display: flex;
 	flex-direction: row;
 	height: 70px;
 	padding: 9px;
-	border: 0;
+	margin: 0 !important;
 	cursor: context-menu;
+	align-items: center;
+	width: 100%;
+
+	border-radius: 8px;
+}
+
+.multiple-products-info-container-row > .vehicle-info-container,
+.multiple-products-info-container-row > .add-vehicle-info-container {
+	flex: 1;
+	align-self: flex-start;
+	min-height: 90px;
+}
+
+.multiple-products-info-container-row .vehicle-info-container:first-child,
+.multiple-products-info-container-row .add-vehicle-info-container:first-child {
+	border-radius: 8px 0 0 8px;
+	margin-top: 16px;
+}
+
+.multiple-products-info-container-row .vehicle-info-container:last-child,
+.multiple-products-info-container-row .add-vehicle-info-container:last-child {
+	border-left: none;
+	border-radius: 0 8px 8px 0;
+	margin-top: 16px;
+}
+
+.multiple-products-info-container-row:has(+ .d-md-block .vehicle-buttons-container) .vehicle-info-container:first-child,
+.multiple-products-info-container-row:has(+ div .vehicle-buttons-container) .vehicle-info-container:first-child {
+	border-radius: 8px 0 0 0;
+}
+
+.multiple-products-info-container-row:has(+ .d-md-block .vehicle-buttons-container) .vehicle-info-container:last-child,
+.multiple-products-info-container-row:has(+ div .vehicle-buttons-container) .vehicle-info-container:last-child {
+	border-radius: 0 8px 0 0;
+}
+
+.add-vehicle-info-container {
+	padding: 9px;
+	cursor: pointer;
+	align-items: center;
+	width: 100%;
+	margin: 0;
+	border: 1px solid #000000;
+	border-radius: 8px;
+	align-self: flex-start;
+}
+
+.vehicle-buttons-container {
+	width: 100%;
+	padding: 16px;
+	margin-top: 0;
+}
+
+.vehicle-info-container:has(+ .vehicle-buttons-container),
+.vehicle-form-section:has(.vehicle-buttons-container) .vehicle-info-container {
+	border-radius: 8px 8px 0 0;
+}
+
+.vehicle-form-section .vehicle-buttons-container {
+	margin-top: 0;
 }
 
 .vehicle-icon {
@@ -221,14 +306,6 @@ nav.disabled {
 	line-height: 17px;
 }
 
-.description {
-	margin: 0px;
-	color: #7e7a7a;
-	font-size: 14px;
-	font-weight: 400;
-	line-height: 17px;
-}
-
 .header-text {
 	color: #000000;
 	font-weight: 700;
@@ -302,6 +379,8 @@ input[type='radio']:checked::before {
 	width: 76px;
 	height: 76px;
 	padding: 0px;
+	background-color: #007bff;
+	color: #ffffff;
 }
 
 .rounded-circle-vehicle {
@@ -310,14 +389,50 @@ input[type='radio']:checked::before {
 	background-color: transparent;
 	position: relative;
 }
-.icon-booking-vehicle {
-	color: #000000;
-}
 
 .vehicle-info {
 	width: 100%;
 }
 
+.product-row {
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
+}
+
+.product-container {
+	padding: 0;
+}
+
+.primary-product {
+	margin-bottom: 1rem;
+	padding: 0px 4px 0px 4px;
+}
+
+.secondary-product-container {
+	margin: 0;
+	padding: 0px 4px 0px 4px;
+}
+
+.secondary-product {
+	padding: 0 0 1rem 3rem;
+	margin: 0;
+}
+
+.product-header {
+	margin: 0;
+	padding: 0;
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
+}
+
+.empty-secondary-product {
+	padding: 0;
+	margin: 0;
+	height: 0;
+}
+
 .vehicle-card-row {
 	display: flex;
 	justify-content: space-between;
@@ -329,18 +444,17 @@ input[type='radio']:checked::before {
 	height: 64px;
 }
 
-.vehicle-step-component .plate-clear-icon {
-	width: 54px;
-	height: 54px;
-}
-
 .vehicle-step-component .plate-spinner {
 	width: 32px;
 	height: 32px;
 }
 
-.vehicle-step-component .campaign-code {
-	margin-left: 8px;
+.vehicle-step-component .campaign-code-activated {
+	margin-left: 4px;
+}
+
+.btn-save-vehicle {
+	width: 33%;
 }
 
 .vehicle-buttons {
@@ -392,21 +506,52 @@ input[type='radio']:checked::before {
 	fill: #3a7203;
 }
 
-.info-container,
 .campaign-container {
 	clear: both;
+	margin: 0 15px 0 15px;
 }
 
 .cls-2 {
 	fill: red;
 }
+
 .transparent {
 	background-color: transparent;
 	border: none;
 }
 
+.vehicle-step-component .btn-add-vehicle {
+	width: fit-content;
+	border: none;
+	color: #3a7203;
+	background-color: transparent;
+	padding: 0;
+	margin-bottom: 10px;
+}
+
+.vehicle-step-component .icon-another-platenumber-toggle {
+	margin-right: 8px;
+	padding-bottom: 5px;
+}
+
+.vehicle-step-component .btn-remove-vehicle {
+	width: fit-content;
+	border: none;
+	color: #000;
+	background-color: transparent;
+	padding: 0;
+	margin-bottom: 10px;
+}
+
+.vehicle-step-component .icon-remove-vehicle {
+	width: 25px;
+	height: 25px;
+	margin-right: 8px;
+	padding-bottom: 5px;
+}
+
 @media screen and (max-width: 991px) {
-	.form-check-container {
+	.form-check-container .product-card {
 		margin-bottom: 0.5rem;
 	}
 
@@ -418,7 +563,7 @@ input[type='radio']:checked::before {
 	.vehicle-step-component .plate-input-booking {
 		left: 46px;
 		width: calc(100% - 46px);
-		font-size: 45px !important;
+		font-size: 45px;
 	}
 
 	.vehicle-step-component .plate-load-button,
@@ -433,11 +578,6 @@ input[type='radio']:checked::before {
 		height: 56px;
 	}
 
-	.vehicle-step-component .plate-clear-icon {
-		width: 48px;
-		height: 48px;
-	}
-
 	.header-text {
 		margin: 0;
 		margin-top: 8px;
@@ -445,6 +585,84 @@ input[type='radio']:checked::before {
 	}
 }
 
+@media (max-width: 768px) {
+	.multiple-products-info-container-row {
+		flex-direction: column;
+	}
+
+	.vehicle-info-container {
+		width: 100%;
+		margin-bottom: 10px;
+	}
+
+	.vehicle-button {
+		width: 46%;
+		padding: 8px;
+		margin: 5px;
+		border: 2px solid #d1d1d1;
+		border-radius: 8px;
+		cursor: pointer;
+		background-color: #fdfdfd;
+		font-size: 12px;
+		line-height: 1;
+		text-align: center;
+		display: block;
+		float: left;
+	}
+
+	.btn-save-vehicle {
+		width: 100%;
+	}
+
+	.multiple-products-info-container-row > .vehicle-info-container:first-child,
+	.multiple-products-info-container-row > .add-vehicle-info-container:first-child {
+		border-radius: 8px 8px 0 0;
+		margin-bottom: 0;
+		padding-bottom: 0;
+	}
+
+	.multiple-products-info-container-row > .vehicle-info-container:last-child,
+	.multiple-products-info-container-row > .add-vehicle-info-container:last-child {
+		border-top: none;
+		border-radius: 0 0 8px 8px;
+		margin-top: 0;
+		padding-top: 0;
+	}
+
+	.d-md-none > .vehicle-info-container:first-of-type {
+		border-radius: 8px 8px 0 0;
+	}
+
+	.d-md-none > .vehicle-info-container:nth-of-type(2),
+	.d-md-none > .vehicle-info-container:last-of-type {
+		border-radius: 0;
+		border-top: none;
+	}
+
+	.d-md-none > .vehicle-info-container:last-of-type:not(:has(+ .vehicle-buttons-container)) {
+		border-radius: 0 0 8px 8px;
+		border-top: none;
+	}
+
+	.d-md-none > .vehicle-info-container:first-of-type:has(+ .vehicle-buttons-container) {
+		border-radius: 8px 8px 0 0;
+	}
+
+	.d-md-none > .vehicle-buttons-container + .vehicle-info-container {
+		border-radius: 0;
+		border-top: none;
+	}
+
+	.d-md-none > .vehicle-buttons-container + .vehicle-info-container:has(+ .vehicle-buttons-container) {
+		border-radius: 0;
+		border-top: none;
+	}
+
+	.d-md-none > .vehicle-buttons-container:last-child {
+		border-radius: 0 0 8px 8px;
+	}
+}
+
 @media screen and (max-width: 424px) {
 	.vehicle-step-component .plate-container {
 		background-size: 20px;
@@ -454,7 +672,7 @@ input[type='radio']:checked::before {
 	.vehicle-step-component .plate-input-booking {
 		left: 38px;
 		width: calc(100% - 38px);
-		font-size: 40px !important;
+		font-size: 40px;
 		letter-spacing: 1px;
 	}
 
@@ -470,9 +688,22 @@ input[type='radio']:checked::before {
 		height: 50px;
 	}
 
-	.vehicle-step-component .plate-clear-icon {
-		width: 40px;
-		height: 40px;
+	.multiple-products-info-container-row > .vehicle-info-container:first-child {
+		border-radius: 8px 8px 0 0;
+		margin-bottom: 0;
+		margin-top: 16px;
+		border-left: 1px solid #607091ff;
+	}
+
+	.multiple-products-info-container-row > .vehicle-info-container:last-child {
+		border-top: none;
+		border-radius: 0 0 8px 8px;
+		margin-top: 0;
+		border-left: 1px solid #607091ff;
+	}
+
+	.vehicle-buttons-container {
+		border-radius: 8px;
 	}
 }
 
@@ -517,13 +748,7 @@ button {
 	padding: 16px;
 }
 
-.next-button {
-	background: #8ac100;
-	border: none;
-}
-
 .return-to-start-button {
-	background: #8ac100;
 	width: auto;
 }
 
@@ -714,7 +939,6 @@ input[type='checkbox'] {
 
 .search-time-slot {
 	width: auto;
-	background: #8ac100;
 }
 
 .react-datepicker {
@@ -809,16 +1033,11 @@ input[type='checkbox'] {
 	height: auto;
 }
 
-.dropdown-toggle::after {
-	display: none !important;
-}
-
 .sort-button {
-	color: #95c01f !important;
+	color: #95c01f;
 	height: auto;
 	width: auto;
 	padding: 0 5px 0 5px;
-	background-color: transparent !important;
 	border: none;
 	margin: auto;
 	margin-right: 2px;
@@ -826,6 +1045,10 @@ input[type='checkbox'] {
 	justify-content: space-between;
 }
 
+.sort-button:focus {
+	color: #95c01f;
+}
+
 .sort-dropdown {
 	height: 20px;
 	margin: auto;
@@ -1001,13 +1224,22 @@ input[type='checkbox'] {
 }
 .react-datepicker__day--selected {
 	background-color: #95c01f;
-	padding: 0 !important;
-	width: 14% !important;
+	padding: 0;
+	width: 14%;
 }
 .react-datepicker__day--selected:hover {
 	background-color: #3a7203;
 }
 
+.react-datepicker__day--keyboard-selected:not(.react-datepicker__day--selected) {
+	background-color: transparent;
+	color: inherit;
+}
+
+.react-datepicker__day--today.react-datepicker__day--keyboard-selected:not(.react-datepicker__day--selected) {
+	background-color: transparent;
+}
+
 .day-with-price {
 	padding: 6px;
 	height: 76px;
@@ -1220,8 +1452,8 @@ input[type='checkbox'] {
 	margin-top: 4px;
 }
 
-.summary-component .campaign-code {
-	margin-left: 8px;
+.summary-component .campaign-code-activated {
+	margin-left: 4px;
 }
 
 .summary-component .campaign-name {
@@ -1245,7 +1477,6 @@ input[type='checkbox'] {
 }
 
 .confirmation-calendar-button {
-	background-color: #8ac100;
 	margin-bottom: 16px;
 	margin-top: 16px;
 	width: auto;
@@ -1470,11 +1701,21 @@ body {
 		box-shadow 0.15s ease-in-out;
 }
 
-.btn-booking:disabled,
-.btn-booking:disabled:hover {
-	background-color: #e3e3e3 !important;
-	color: #495057 !important;
-	border: none;
+.btn-blue {
+	background-color: #007bff;
+	color: #ffffff;
+}
+
+.btn-primary {
+	background-color: #8ac100;
+	color: #fff;
+	border: 1px solid transparent;
+}
+
+.btn-primary:hover {
+	background: #e3e3e3;
+	color: #000000;
+	border: 1px solid transparent;
 }
 
 .input-group-booking > .custom-file,
@@ -1546,10 +1787,7 @@ input[type='checkbox'].form-check-input-booking {
 }
 
 .btn-apply-booking {
-	background: #8ac100;
-	border: none;
 	border-radius: 0 5px 5px 0;
-	color: #ffffff;
 	font-weight: 700;
 	font-size: 16px;
 	line-height: 24px;
@@ -1575,12 +1813,12 @@ input[type='checkbox'].form-check-input-booking {
 }
 
 ::-webkit-scrollbar {
-	width: 16px;
+	width: 8px;
 }
 
 ::-webkit-scrollbar-thumb {
 	background: #888;
-	border-left: 12px white solid;
+	border-left: 4px white solid;
 }
 
 ::-webkit-scrollbar-thumb:hover {
@@ -1601,6 +1839,7 @@ input[type='checkbox'].form-check-input-booking {
 	0% {
 		transform: rotate(0deg);
 	}
+
 	100% {
 		transform: rotate(360deg);
 	}

package/package.json

@@ -4,7 +4,7 @@
   "author": "Muster by Pinja",
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "/dist/index.bundle.js",
-  "version": "1.32.0",
+  "version": "1.33.0",
   "scripts": {
     "start": "webpack-dev-server",
     "build": "cross-env NODE_ENV=production OUTPUT=library webpack --progress",