diff --git a/src/components/EditListingPoliciesPanel/EditListingPoliciesPanel.css b/src/components/EditListingPoliciesPanel/EditListingPoliciesPanel.css new file mode 100644 index 00000000..580c779a --- /dev/null +++ b/src/components/EditListingPoliciesPanel/EditListingPoliciesPanel.css @@ -0,0 +1,22 @@ +@import '../../marketplace.css'; + +.root { + flex-grow: 1; + width: 100%; + height: auto; + display: flex; + flex-direction: column; + padding: 11px 24px 0 24px; +} + +.form { + flex-grow: 1; +} + +.title { + margin-bottom: 19px; + + @media (--viewportLarge) { + margin-bottom: 44px; + } +} diff --git a/src/components/EditListingPoliciesPanel/EditListingPoliciesPanel.js b/src/components/EditListingPoliciesPanel/EditListingPoliciesPanel.js new file mode 100644 index 00000000..15839f6e --- /dev/null +++ b/src/components/EditListingPoliciesPanel/EditListingPoliciesPanel.js @@ -0,0 +1,86 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { FormattedMessage } from 'react-intl'; +import { ensureListing } from '../../util/data'; +import { createSlug } from '../../util/urlHelpers'; +import { NamedLink } from '../../components'; +import { EditListingPoliciesForm } from '../../containers'; + +import css from './EditListingPoliciesPanel.css'; + +const EditListingPoliciesPanel = props => { + const { + className, + rootClassName, + listing, + onSubmit, + onChange, + submitButtonText, + panelUpdated, + updateInProgress, + errors, + } = props; + + const classes = classNames(rootClassName || css.root, className); + const currentListing = ensureListing(listing); + const { title, publicData } = currentListing.attributes; + const listingTitle = title || ''; + const listingLink = currentListing.id ? ( + + {listingTitle} + + ) : ( + '' + ); + + const panelTitle = currentListing.id ? ( + + ) : ( + + ); + + const saunaRules = publicData && publicData.saunaRules ? publicData.saunaRules : ''; + const initialSearchFormValues = { saunaRules }; + + return ( +
+

{panelTitle}

+ +
+ ); +}; + +const { func, object, string, bool } = PropTypes; + +EditListingPoliciesPanel.defaultProps = { + className: null, + rootClassName: null, + listing: null, +}; + +EditListingPoliciesPanel.propTypes = { + className: string, + rootClassName: string, + + // We cannot use propTypes.listing since the listing might be a draft. + listing: object, + + onSubmit: func.isRequired, + onChange: func.isRequired, + submitButtonText: string.isRequired, + panelUpdated: bool.isRequired, + updateInProgress: bool.isRequired, + errors: object.isRequired, +}; + +export default EditListingPoliciesPanel; diff --git a/src/components/EditListingWizard/EditListingWizard.js b/src/components/EditListingWizard/EditListingWizard.js index f1aa91bc..72b87be6 100644 --- a/src/components/EditListingWizard/EditListingWizard.js +++ b/src/components/EditListingWizard/EditListingWizard.js @@ -12,6 +12,7 @@ import { EditListingDescriptionPanel, EditListingLocationPanel, EditListingPhotosPanel, + EditListingPoliciesPanel, EditListingPricingPanel, NamedRedirect, Tabs, @@ -20,10 +21,11 @@ import { import css from './EditListingWizard.css'; const DESCRIPTION = 'description'; +const POLICY = 'policy'; const LOCATION = 'location'; const PRICING = 'pricing'; const PHOTOS = 'photos'; -const STEPS = [DESCRIPTION, LOCATION, PRICING, PHOTOS]; +const STEPS = [DESCRIPTION, POLICY, LOCATION, PRICING, PHOTOS]; // Tabs are horizontal in small screens const MAX_HORIZONTAL_NAV_SCREEN_WIDTH = 1023; @@ -32,6 +34,8 @@ const submitText = (intl, isNew, step) => { let key = null; if (step === DESCRIPTION) { key = isNew ? 'EditListingWizard.saveNewDescription' : 'EditListingWizard.saveEditDescription'; + } else if (step === POLICY) { + key = isNew ? 'EditListingWizard.saveNewPolicies' : 'EditListingWizard.saveEditPolicies'; } else if (step === LOCATION) { key = isNew ? 'EditListingWizard.saveNewLocation' : 'EditListingWizard.saveEditLocation'; } else if (step === PRICING) { @@ -53,6 +57,7 @@ const submitText = (intl, isNew, step) => { const stepsActive = listing => { const { description, geolocation, price, title, publicData } = listing.attributes; const descriptionStep = !!(title && description); + const policyStep = !!(publicData && typeof publicData.saunaRules !== 'undefined'); const locationStep = !!( geolocation && publicData && @@ -65,7 +70,8 @@ const stepsActive = listing => { return { [DESCRIPTION]: true, - [LOCATION]: descriptionStep, + [POLICY]: descriptionStep, + [LOCATION]: policyStep, [PRICING]: locationStep, [PHOTOS]: pricingStep, }; @@ -186,7 +192,7 @@ class EditListingWizard extends Component { if (isNew) { onUpsertListingDraft(updateValues); - const pathParams = tabParams(LOCATION); + const pathParams = tabParams(POLICY); // Redirect to location tab history.push( createResourceLocatorString('EditListingPage', routeConfiguration(), pathParams, {}) @@ -196,6 +202,39 @@ class EditListingWizard extends Component { } }} /> + { + const { saunaRules = '' } = values; + const updateValues = { + publicData: { + saunaRules, + }, + }; + + if (isNew) { + onUpdateListingDraft(updateValues); + const pathParams = tabParams(LOCATION); + // Redirect to pricing tab + history.push( + createResourceLocatorString('EditListingPage', routeConfiguration(), pathParams, {}) + ); + } else { + update(POLICY, updateValues); + } + }} + />