Changes after design review and testing

(these will be merged to correct commits later)
sharetribe · Jan 3, 2019 · a023d0e · a023d0e
1 parent e013962
commit a023d0e
Show file tree

Hide file tree

Showing 6 changed files with 210 additions and 104 deletions.
diff --git a/src/components/EditListingWizard/EditListingWizard.css b/src/components/EditListingWizard/EditListingWizard.css
@@ -82,7 +82,7 @@
   flex-grow: 1;
 
   @media (--viewportLarge) {
-    padding: 90px 15vw 82px 82px;
+    padding: 82px 15vw 82px 82px;
     border-left: 1px solid var(--matterColorNegative);
     background-color: var(--matterColorLight);
   }

diff --git a/src/containers/EditListingPage/EditListingPage.duck.js b/src/containers/EditListingPage/EditListingPage.duck.js
@@ -69,11 +69,14 @@ const updateException = (exception, calendar) => {
 
 // Update calendar data of given month
 const updateCalendarMonth = (state, monthId, data) => {
+  // Ensure that every month has array for bookings and exceptions
+  const defaultMonthData = { bookings: [], exceptions: [] };
   return {
     ...state,
     availabilityCalendar: {
       ...state.availabilityCalendar,
       [monthId]: {
+        ...defaultMonthData,
         ...state.availabilityCalendar[monthId],
         ...data,
       },
@@ -286,8 +289,20 @@ export default function reducer(state = initialState, action = {}) {
     }
 
     case DELETE_EXCEPTION_REQUEST: {
-      const { id, currentException } = payload.params;
-      const exception = { ...omit(currentException, ['error']), id, inProgress: true };
+      const { id, seats, currentException } = payload.params;
+
+      // We first create temporary exception with given 'seats' count (the default after deletion).
+      // This makes it possible to show the UI element immediately with default color that matches
+      // with the availability plan.
+      const exception = {
+        id,
+        inProgress: true,
+        availabilityException: {
+          ...currentException.availabilityException,
+          attributes: { ...currentException.availabilityException.attributes, seats },
+        },
+      };
+
       const availabilityCalendar = updateException(exception, state.availabilityCalendar);
       return { ...state, availabilityCalendar };
     }
@@ -568,7 +583,7 @@ export const requestCreateAvailabilityException = params => (dispatch, getState,
 };
 
 export const requestDeleteAvailabilityException = params => (dispatch, getState, sdk) => {
-  const { currentException, ...deleteParams } = params;
+  const { currentException, seats, ...deleteParams } = params;
 
   dispatch(deleteAvailabilityExceptionRequest(params));
 

diff --git a/src/forms/EditListingAvailabilityForm/EditListingAvailabilityForm.css b/src/forms/EditListingAvailabilityForm/EditListingAvailabilityForm.css
@@ -11,18 +11,10 @@
   flex-direction: column;
 
   padding-top: 1px;
-
-  @media (--viewportMedium) {
-    padding-top: 2px;
-  }
 }
 
 .title {
   margin-bottom: 24px;
-
-  @media (--viewportMedium) {
-    margin-bottom: 32px;
-  }
 }
 
 .error {
@@ -33,18 +25,34 @@
   flex-grow: 1;
   position: relative;
   width: 100%;
-  height: 100%;
+  /*height: 100%;*/
   margin-bottom: 24px;
 }
 
 .submitButton {
   margin-top: auto;
   margin-bottom: 24px;
   flex-shrink: 0;
+}
 
-  @media (--viewportLarge) {
+@media (--viewportMedium) {
+  .root {
+    padding-top: 2px;
+    margin-top: -16px;
+  }
+  .title {
+    margin-bottom: 32px;
+  }
+}
+
+@media (--viewportLarge) {
+  .calendarWrapper {
+    flex-grow: 0;
+    margin-bottom: 24px;
+  }
+  .submitButton {
     display: inline-block;
     width: 241px;
-    margin-top: 100px;
+    margin-top: 86px;
   }
 }