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);
+ }
+ }}
+ />