listing-form-sidebar-help (visit https://dev03.beenest.io/host/listings/87134/listing_info) by jerminatorhits · Pull Request #113 · thebeetoken/beenest-web

jerminatorhits · 2019-01-31T23:17:56Z

Description

Why did you write this code?
Add text helpers to the listing form side bar. Mostly just have the scaffolding down and can make a separate PR for full detailed descriptions.

How to Test

Visit host/listings/:id/edit
Click various fields and tabs for side info

Which devices did you test on?

jerminatorhits · 2019-02-01T04:24:30Z

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

+  pricing_availability: 'pricing availability header',
+  checkin_details: 'checkin details header',
+}
+


looking into consolidating properties based on each crumb. seems like there are a lot of declared objects with the crumb as the key.

kcvan · 2019-02-01T18:48:25Z

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

+
+const Title = () => (
+  <div>
+    <p>This is ListingName Info</p>


I'm wondering if these should e more use-friendly since they're consumer facing? Maybe something like This is the listing title. Same for the ones below this one:

This is the description for the listing.
This is the country the listing is located in
This is the listing's cover photo
..etc

oh these were just placeholders haha. The scaffolding was more of the goal of this PR, prob could have been more clear soz.

updated match the listing doc: https://docs.google.com/document/d/1w1RCVl9lIHqGA5UOVk3B0zqgRG3qSDBlfsQP_iiF0hg/edit#

some fields don't have explanations -- left them blank for now.

kcvan · 2019-02-01T18:49:54Z

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

+
+const AsideHeaders: AsideHeadersInterface = {
+  listing_info: 'Let’s get started! This section will inform guests about where they’ll be staying and what to expect. The more descriptive, the better.',
+  accommodations: 'accommodations header',


Wondering if we need the word header at the end of these?

placeholders again -- I'll swap in the actual headers

woeltjen · 2019-02-01T21:59:08Z

This is looking good! 👍 to using position: sticky for the aside

jerminatorhits · 2019-02-05T02:36:34Z

Most field helpers have been filled out. Still improving the content with Amy on Tuesday but for the most part, the structure is there. Feel free to comment on the smallest details / typos; be as nitpicky as possible (within reason) thx! 😄

kcvan · 2019-02-05T21:03:13Z

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

        <InputWrapper>
          <Field
            name="sleepingArrangement"
+            onFocus={() => setFocus('sleepingArrangement')}


might be a little easier to manage these as enums so you can just change it in one place

updated to use LISTING_FIELDS enum

kcvan · 2019-02-05T21:04:20Z

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

+    <h4>Examples:</h4>
+    <br />
+    <div className="images-container">
+      <LazyImage className="image-container--horizontal" src="https://s3-us-west-2.amazonaws.com/beenest-public/images/photo-examples/Do_LA_Bedroom.jpg" />


small comment but can we use the https://static.beenest.com url for these?

kcvan · 2019-02-06T00:15:21Z

just a few things that might not be in the scope of this pr:

the plus and minus buttons are tabbable but the outline isnt showing
the checkbox doesnt seem tabbable

somethings we can change in this pr:
Min Nights might want to be changed to Minimum Nights for the label and the description

kcvan · 2019-02-06T00:15:56Z

also, is there a reason why the help description is not highlightable?

jerminatorhits · 2019-02-06T00:35:38Z

reason help text isn't highlightable is z-index: -1. This is due to the position: fixed issue + the verification banner that pushes everything down except fixed position divs. Could fix by removing -1 z index and not letting unverified users create listings so the banner never shows up. motion to fix in new pr.

jerminatorhits · 2019-02-06T00:37:54Z

good calls. Will update min nights to more complete Minimum Nights also down to look into the tabbable issues in another pr

woeltjen · 2019-02-06T01:07:08Z

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

+      </ListItem>
+      <ListItem noHover prefixColor="correct" start="tiny">
+        <Svg className="prefix" src="utils/check-circle" />
+        <span>Do provide multiple angles</span>


Since this is preceded with a "Do:" (the h4 above) I'd just say "Provide multiple angles" here

thx updated.

woeltjen · 2019-02-06T01:14:17Z

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

                      path="/host/listings/:id/accommodations"
-                      render={() => <AccommodationsForm {...FormikProps} />}
+                      render={() => (
+                        <AccommodationsForm {...FormikProps} ListingField={ListingField} setFocus={this.handleFocus} />


Passing in the ListingField enum as a prop here feels funny; could ListingField just be exported from somewhere appropriate and shared by the various form pages?

was thinking the same. Any suggestions on where it belongs? I was thinking networking/listings but it might be out of scope for that file

networking/listings was my first thought as well. Agree that it isn't ideal w.r.t. the scope of that file; maybe leave it there with a TODO prompting us to move it when we have a more appropriate place for form descriptions?

sgtm. this should make the form much cleaner!

woeltjen · 2019-02-06T01:17:29Z

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

+
+  checkInTime: <CheckInTime />,
+  checkOutTime: <CheckOutTime />,
+  houseRules: <HouseRules />,


I really like this approach!

Would [ListingField.HOUSE_RULES]: <HouseRules /> make sense here?

👍 Oh ya definitely could use that here as well

woeltjen · 2019-02-06T01:24:16Z

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

+import LazyImage from 'shared/LazyImage';
+
+interface ListingHelpTextInterfaceInterface {
+  [name: string]: React.ReactNode;


ListingHelpTextInterfaceInterface gives me many giggles. Can we name this ListingHelpTextInterface and change the returned const to ListingHelpText? That gives me no giggles at all.

Or even just ListingHelp

Oh, and corollary to comment below, think this could be:

[name: ListingField]: React.ReactNode;

...to leverage type-checking a little more.

oops InterfaceInterface was from me being vscode trigger happy. good catch!

condensed filename to ListingHelp

tried to use the enum in building the interface but typescript doesn't like it

Looked at few sources and it might require some golfing.
microsoft/TypeScript#5683
https://stackoverflow.com/questions/50849359/how-can-i-use-a-string-enum-type-as-a-computed-property-name-in-an-interface

woeltjen · 2019-02-06T01:31:58Z

A few minor suggestions inline. This looks great and I liked testing it!

… group

tc

looking good!

jerminatorhits added 3 commits January 31, 2019 15:17

WIP

36b0d25

proof of concept for structure

71847a1

add focus and dynamic aside text

a07c6a4

jerminatorhits requested review from kcvan, tc and woeltjen February 1, 2019 04:13

jerminatorhits changed the title ~~listing-form-sidebar-help WIP~~ listing-form-sidebar-help (WIP visit https://dev03.beenest.io/host/listings/87134/listing_info) Feb 1, 2019

remove unused style

231f640

jerminatorhits commented Feb 1, 2019

View reviewed changes

kcvan reviewed Feb 1, 2019

View reviewed changes

jerminatorhits added 4 commits February 1, 2019 12:05

fill in aside headers with actual info

40e5673

fill in aside info with real details

17c8f98

Merge branch 'master' into jeremy/ENG-920-listing-helper-section

7a479a7

fix unresolved merge conflict

b8fe67c

jerminatorhits added 10 commits February 1, 2019 14:19

Merge branch 'master' into jeremy/ENG-920-listing-helper-section

b072614

minor text changes

50eaa0f

make aside fixed, minor text changes

4eadd28

add titles and more help text to first 2 tabs

df9a8d8

add sublabel to shared bathroom

9980a01

add bullets to list items

4ad0052

fix overlap when banner shows

4c66e53

content adjustments

7a58db8

update text

e1edb9f

Merge branch 'master' into jeremy/ENG-920-listing-helper-section

6e19277

jerminatorhits changed the title ~~listing-form-sidebar-help (WIP visit https://dev03.beenest.io/host/listings/87134/listing_info)~~ listing-form-sidebar-help (visit https://dev03.beenest.io/host/listings/87134/listing_info) Feb 5, 2019

kcvan reviewed Feb 5, 2019

View reviewed changes

jerminatorhits added 6 commits February 5, 2019 14:45

add checkintime and checkouttime text, update house rules

c832b5e

use enum correctly

59a0712

use enums in form schema and default values

500e543

run prettier

2e7ec88

remove <br /> and minor text chagnes

09492d3

fix list-item spacing

4eab3e2

remove strong tags and replace with span for css control

4779fb7

jerminatorhits added 3 commits February 5, 2019 16:39

min nights to Minimum Nights

38beccb

rename AsideContent to ListingHelper

723c4e6

change ListingHelper to ListingHelpText

f14fee7

woeltjen reviewed Feb 6, 2019

View reviewed changes

remove redundant Do

772b611

jerminatorhits added 7 commits February 5, 2019 17:39

adjust dropdown stylings, consolidate country field with full address…

998d7b2

… group

move ListingField to networking/listings, rename ListingHelp

247440d

import ListingField into form files

81fdbfb

Merge branch 'master' into jeremy/ENG-920-listing-helper-section

10a5efe

Merge branch 'master' into jeremy/ENG-920-listing-helper-section

1e8fc15

add margin bottom to help photos

6f21f2b

add optional sublabel to ical urls

ec71603

tc approved these changes Feb 7, 2019

View reviewed changes

jerminatorhits merged commit 70c55a2 into master Feb 7, 2019

jerminatorhits deleted the jeremy/ENG-920-listing-helper-section branch February 7, 2019 23:16

Conversation

jerminatorhits commented Jan 31, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How to Test

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jerminatorhits Feb 1, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

woeltjen commented Feb 1, 2019

Uh oh!

jerminatorhits commented Feb 5, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kcvan commented Feb 6, 2019

Uh oh!

kcvan commented Feb 6, 2019

Uh oh!

jerminatorhits commented Feb 6, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jerminatorhits commented Feb 6, 2019

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jerminatorhits Feb 6, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

woeltjen commented Feb 6, 2019

Uh oh!

tc left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jerminatorhits commented Jan 31, 2019 •

edited

Loading

jerminatorhits Feb 1, 2019 •

edited

Loading

jerminatorhits commented Feb 5, 2019 •

edited

Loading

jerminatorhits commented Feb 6, 2019 •

edited

Loading

jerminatorhits Feb 6, 2019 •

edited

Loading