listing-form-sidebar-help (visit https://dev03.beenest.io/host/listings/87134/listing_info)

src/components/routes/Host/ListingForm/AccommodationsForm/AccommodationsForm.tsx

@@ -1,52 +1,35 @@
 import * as React from 'react';
+import { Field, ErrorMessage } from 'formik';
 
+import { ListingField } from 'networking/listings';
+import Checkbox from 'shared/Checkbox';
+import ErrorMessageWrapper from 'shared/ErrorMessageWrapper';
 import InputLabel from 'shared/InputLabel';
 import InputWrapper from 'shared/InputWrapper';
 import NumberInput from 'shared/NumberInput';
 import Textarea from 'shared/Textarea';
 import { TextareaEvent } from 'shared/Textarea/Textarea';
 import { stringToArray, arrayToString } from 'utils/formatter';
-import Checkbox from 'shared/Checkbox';
-import { Field, ErrorMessage } from 'formik';
-import ErrorMessageWrapper from 'shared/ErrorMessageWrapper';
 
 const AccommodationsForm = (props: any): JSX.Element => {
-  const { setFieldTouched, setFieldValue, values } = props;
+  const { setFocus, setFieldTouched, setFieldValue, values } = props;
   const StyledErrorMessage = (props: { name: string }) => (
     <ErrorMessageWrapper>
       {props.name && <ErrorMessage {...props} />}
     </ErrorMessageWrapper>
   );
   return (
     <>
-      {/* <div className="form-item">
-        <InputLabel>Housing Accommodation</InputLabel>
-        <SelectBoxWrapper suffixSize="tiny">
-          <select id="homeType" name="homeType" value={props.inputForm.homeType} onChange={onInput}>
-            <option value={undefined}>
-              Choose the Accommodation
-            </option>
-            {Object.values(HomeTypeHostForm).map((value: HomeTypeHostForm) => (
-              <option value={value} key={value}>
-                {value}
-              </option>
-            ))}
-          </select>
-          <label htmlFor="homeType">
-            <Svg className="suffix" src="utils/carat-down" />
-          </label>
-        </SelectBoxWrapper>
-      </div> */}
-
       <div className="form-item">
-        <InputLabel htmlFor="sleepingArrangement" subLabel="(required)">Sleeping Arrangement</InputLabel>
+        <InputLabel htmlFor={ListingField.SLEEPING_ARRANGEMENT} subLabel="(required)">Sleeping Arrangement</InputLabel>
         <InputWrapper>
           <Field
-            name="sleepingArrangement"
+            name={ListingField.SLEEPING_ARRANGEMENT}
+            onFocus={() => setFocus(ListingField.SLEEPING_ARRANGEMENT)}
             placeholder="1 King, 2 Queens"
             type="text" />
         </InputWrapper>
-        <StyledErrorMessage name="sleepingArrangement" />
+        <StyledErrorMessage name={ListingField.SLEEPING_ARRANGEMENT} />
       </div>
 
       <div className="form-item">
@@ -57,8 +40,9 @@ const AccommodationsForm = (props: any): JSX.Element => {
             max={50}
             min={1}
             onChange={(value: number) => {
-              setFieldValue('numberOfBedrooms', value);
-              setFieldTouched('numberOfBedrooms');
+              setFieldValue(ListingField.NUMBER_OF_BEDROOMS, value);
+              setFieldTouched(ListingField.NUMBER_OF_BEDROOMS);
+              setFocus(ListingField.NUMBER_OF_BEDROOMS);
             }}
           />
         </div>
@@ -72,8 +56,9 @@ const AccommodationsForm = (props: any): JSX.Element => {
             max={50}
             min={0}
             onChange={(value: number) => {
-              setFieldValue('numberOfBathrooms', value);
-              setFieldTouched('numberOfBathrooms');
+              setFieldValue(ListingField.NUMBER_OF_BATHROOMS, value);
+              setFieldTouched(ListingField.NUMBER_OF_BATHROOMS);
+              setFocus(ListingField.NUMBER_OF_BATHROOMS);
             }}
             step={0.5}
           />
@@ -85,24 +70,28 @@ const AccommodationsForm = (props: any): JSX.Element => {
           checked={isSharedBathroom(values.sharedBathroom)}
           onChange={() => {
             const value = isSharedBathroom(values.sharedBathroom) ? 'No' : 'Yes';
-            setFieldValue('sharedBathroom', value);
-            setFieldTouched('sharedBathroom', true);
+            setFieldValue(ListingField.SHARED_BATHROOM, value);
+            setFieldTouched(ListingField.SHARED_BATHROOM, true);
+            setFocus(ListingField.SHARED_BATHROOM);
           }}>
-          Shared Bathroom
+          <InputLabel>
+            Shared Bathroom
+          </InputLabel>
         </Checkbox>
       </div>
 
       <div className="form-item">
-        <InputLabel htmlFor="amenities" subLabel="(required, separate by comma)">Amenities</InputLabel>
+        <InputLabel htmlFor={ListingField.AMENITIES} subLabel="(required, separate by comma)">Amenities</InputLabel>
         <Textarea
-          name="amenities"
-          onBlur={() => setFieldTouched('amenities', true)}
+          name={ListingField.AMENITIES}
+          onBlur={() => setFieldTouched(ListingField.AMENITIES, true)}
+          onFocus={() => setFocus(ListingField.AMENITIES)}
           onChange={(event: TextareaEvent) => {
-            setFieldValue('amenities', stringToArray(event.target.value));
+            setFieldValue(ListingField.AMENITIES, stringToArray(event.target.value));
           }}
           value={arrayToString(values.amenities)}
-          placeholder="Towels, Soap, Detergent" />
-          <StyledErrorMessage name="amenities" />
+          placeholder="Wifi, Towels, Soap, TV, Coffee..." />
+          <StyledErrorMessage name={ListingField.AMENITIES} />
       </div>
     </>
   );

src/components/routes/Host/ListingForm/CheckinDetailsForm/CheckinDetailsForm.tsx

@@ -1,16 +1,17 @@
 import * as React from 'react';
+import { ErrorMessage } from 'formik';
 
+import { ListingField } from 'networking/listings';
+import ErrorMessageWrapper from 'shared/ErrorMessageWrapper';
 import InputLabel from 'shared/InputLabel';
 import SelectBoxWrapper from 'shared/SelectBoxWrapper';
 import Svg from 'shared/Svg';
 import Textarea from 'shared/Textarea';
 import { TextareaEvent } from 'shared/Textarea/Textarea';
 import timeOptions from 'utils/timeOptions';
-import ErrorMessageWrapper from 'shared/ErrorMessageWrapper';
-import { ErrorMessage } from 'formik';
 
 const CheckinDetailsForm = (props: any): JSX.Element => {
-  const { setFieldTouched, setFieldValue, values } = props;
+  const { setFocus, setFieldTouched, setFieldValue, values } = props;
   const StyledErrorMessage = (props: { name: string }) => (
     <ErrorMessageWrapper>
       {props.name && <ErrorMessage {...props} />}
@@ -20,16 +21,17 @@ const CheckinDetailsForm = (props: any): JSX.Element => {
 
     <>
       <div className="form-item">
-        <InputLabel htmlFor="from" subLabel="(From)">Check-in</InputLabel>
+        <InputLabel htmlFor="from" subLabel="(from)">Check-in</InputLabel>
         <SelectBoxWrapper suffixSize="tiny">
           <select
             id="from"
             name="from"
             value={values.checkInTime.from}
             onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
-              setFieldTouched('checkInTime', true);
-              setFieldValue('checkInTime', { ...values.checkInTime, from: event.target.value });
-            }}>
+              setFieldTouched(ListingField.CHECK_IN_TIME, true);
+              setFieldValue(ListingField.CHECK_IN_TIME, { ...values.checkInTime, from: event.target.value });
+            }}
+            onFocus={() => setFocus(ListingField.CHECK_IN_TIME)}>
             {timeOptions.map(
               time => <option key={time} value={time}>{time}</option>
             )}
@@ -41,16 +43,17 @@ const CheckinDetailsForm = (props: any): JSX.Element => {
       </div>
 
       <div className="form-item">
-        <InputLabel htmlFor="to" subLabel="(To)">Check-in</InputLabel>
+        <InputLabel htmlFor="to" subLabel="(to)">Check-in</InputLabel>
         <SelectBoxWrapper suffixSize="tiny">
           <select
             id="to"
             name="to"
             value={values.checkInTime.to}
             onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
-              setFieldTouched('checkInTime', true);
-              setFieldValue('checkInTime', { ...values.checkInTime, to: event.target.value })
-            }}>
+              setFieldTouched(ListingField.CHECK_IN_TIME, true);
+              setFieldValue(ListingField.CHECK_IN_TIME, { ...values.checkInTime, to: event.target.value })
+            }}
+            onFocus={() => setFocus(ListingField.CHECK_IN_TIME)}>
             {timeOptions.map(
               time => <option key={time} value={time}>{time}</option>
             )}
@@ -59,39 +62,41 @@ const CheckinDetailsForm = (props: any): JSX.Element => {
             <Svg className="suffix" src="utils/carat-down" />
           </label>
         </SelectBoxWrapper>
-        <StyledErrorMessage name="checkInTime" />
+        <StyledErrorMessage name={ListingField.CHECK_IN_TIME} />
       </div>
 
       <div className="form-item">
-        <InputLabel htmlFor="checkOutTime" subLabel="(Before)">Check-out</InputLabel>
+        <InputLabel htmlFor={ListingField.CHECK_OUT_TIME} subLabel="(before)">Check-out</InputLabel>
         <SelectBoxWrapper suffixSize="tiny">
           <select
-            id="checkOutTime"
-            name="checkOutTime"
+            id={ListingField.CHECK_OUT_TIME}
+            name={ListingField.CHECK_OUT_TIME}
             value={values.checkOutTime}
-            onChange={(event: React.ChangeEvent<HTMLSelectElement>) => setFieldValue('checkOutTime', event.target.value)}>
+            onChange={(event: React.ChangeEvent<HTMLSelectElement>) => setFieldValue(ListingField.CHECK_OUT_TIME, event.target.value)}
+            onFocus={() => setFocus(ListingField.CHECK_OUT_TIME)}>
             {timeOptions.map(
               time => <option key={time} value={time}>{time}</option>
             )}
           </select>
-          <label htmlFor="checkOutTime">
+          <label htmlFor={ListingField.CHECK_OUT_TIME}>
             <Svg className="suffix" src="utils/carat-down" />
           </label>
         </SelectBoxWrapper>
       </div>
 
       <div className="form-item check-in-details">
-        <InputLabel htmlFor="houseRules" subLabel="(required)">House Rules</InputLabel>
+        <InputLabel htmlFor={ListingField.HOUSE_RULES} subLabel="(required)">House Rules</InputLabel>
         <Textarea
           html
-          name="houseRules"
-          onBlur={() => setFieldTouched('houseRules', true)}
+          name={ListingField.HOUSE_RULES}
+          onBlur={() => setFieldTouched(ListingField.HOUSE_RULES, true)}
+          onFocus={() => setFocus(ListingField.HOUSE_RULES)}
           onChange={(event: TextareaEvent) => {
-            setFieldValue('houseRules', event.target.value);
+            setFieldValue(ListingField.HOUSE_RULES, event.target.value);
           }}
           value={values.houseRules}
           placeholder="Let your guests know about quiet hours, pets, etc." />
-        <StyledErrorMessage name="houseRules" />
+        <StyledErrorMessage name={ListingField.HOUSE_RULES} />
       </div>
     </>
   );

src/components/routes/Host/ListingForm/ListingForm.container.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { color } from 'styled/utils';
+import { color, typography } from 'styled/utils';
 
 const ListingFormMobileContainer = styled.section`
   width: 100%;
@@ -22,6 +22,11 @@ const ListingFormMobileContainer = styled.section`
         .bee-textarea {
           width: 100%;
         }
+        .bee-checkbox {
+          label {
+            margin-bottom: 0;
+          }
+        }
         .input-number-container {
           align-items: center;
           display: flex;
@@ -40,7 +45,6 @@ const ListingFormMobileContainer = styled.section`
           .state,
           .postal-code {
             display: inline-block;
-            margin-bottom: 0;
           }
           .state,
           .postal-code {
@@ -55,6 +59,9 @@ const ListingFormMobileContainer = styled.section`
           .postal-code {
             width: 20%;
           }
+          .country {
+            margin-bottom: 0;
+          }
         }
         &.photo {
           width: 100%;
@@ -86,11 +93,77 @@ const ListingFormMobileContainer = styled.section`
     }
 
     aside {
-      background-color: ${color('white')};
-      min-height: calc(100% - 128px);
-      position: absolute;
+      background-color: ${color('light')};
+      height: 100%;
       left: calc(586px + (100% - 976px) / 2);
+      position: fixed;
       width: calc((100% - 586px) - ((100% - 976px) / 2));
+      z-index: -1;
+      .background-extender {
+        background-color: ${color('light')};
+        position: absolute;
+        top: -64px;
+        width: 100%;
+        height: 64px;
+      }
+      .aside-container {
+        height: 608px;
+        max-width: 632px;
+        padding: 40px 56px 72px;
+        header {
+          ${typography('title', 7)}
+          color: ${color('dark')};
+          margin-bottom: 32px;
+          > span {
+            ${typography('emp', 5)}
+          }
+        }
+        > div {
+          h3 {
+            ${typography('read', 1)}
+            margin-bottom: 24px;
+          }
+          h4 {
+            ${typography('emp', 5)}
+            margin-bottom: 8px;
+          }
+          p {
+            ${typography('read', 2)}
+            margin-bottom: 24px;
+            > span {
+              ${typography('emp', 6)}
+            }
+          }
+          ol {
+            li {
+              list-style-type: decimal;
+              > span {
+                ${typography('emp', 5)}
+              }
+            }
+          }
+          ul {
+            margin-top: 0;
+            margin-bottom: 24px;
+            padding-left: 12px;
+            list-style-position: inside;
+            li {
+              list-style-type: disc;
+            }
+          }
+          .images-container {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            justify-content: space-between;
+            .image-container--horizontal {
+              height: 180px;
+              width: 240px;
+              margin-bottom: 16px;
+            }
+          }
+        }
+      }
     }
   }
 `;