diff --git a/CHANGELOG.md b/CHANGELOG.md index a848cc55..a2ddfcd1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,78 +4,78 @@ We are not following semantic versioning in this template app since any change c a breaking change for forked customization projects. We are still experimenting with what is a good way to update this template, but currently, we follow a pattern: -* Major version change (v**X**.0.0): Changes to several pages and other components. Consider +- Major version change (v**X**.0.0): Changes to several pages and other components. Consider implementing this without merging upstream (we'll provide instructions). -* Minor version change (v0.**X**.0): New features and changes to a single page. These are likely to +- Minor version change (v0.**X**.0): New features and changes to a single page. These are likely to cause conflicts. -* Patch (v0.0.**X**): Bug fixes and small changes to components. +- Patch (v0.0.**X**): Bug fixes and small changes to components. --- ## Upcoming version 2018-XX-XX -* [change] Improved documents related to onboarding: env.md, deploying-to-production.md, +- [change] Improved documents related to onboarding: env.md, deploying-to-production.md, map-providers.md [#971](https://github.com/sharetribe/flex-template-web/pull/971) -* [change] Update outdated dependencies. +- [change] Update outdated dependencies. [#967](https://github.com/sharetribe/flex-template-web/pull/967) - * **Note:** Updating Prettier caused multiple file changes mostly to `.md` files and `compose` + - **Note:** Updating Prettier caused multiple file changes mostly to `.md` files and `compose` setup. -* [change] Update supported Node version to the latest LTS (10.14). +- [change] Update supported Node version to the latest LTS (10.14). [#964](https://github.com/sharetribe/flex-template-web/pull/964) -* [add] Add documentation about deploying to production. Also add _deploy to Heroku_ button. +- [add] Add documentation about deploying to production. Also add _deploy to Heroku_ button. [#961](https://github.com/sharetribe/flex-template-web/pull/961) ## [v2.4.1] 2018-11-29 -* [fix] Add missing French translation. +- [fix] Add missing French translation. [#966](https://github.com/sharetribe/flex-template-web/pull/966) [v2.4.1]: https://github.com/sharetribe/flex-template-web/compare/v2.4.0...v2.4.1 ## [v2.4.0] 2018-11-28 -* [change] Update Flex JS SDK to 1.2. +- [change] Update Flex JS SDK to 1.2. [#963](https://github.com/sharetribe/flex-template-web/pull/963) -* [add] Add French as a default language in addition to English. +- [add] Add French as a default language in addition to English. [#962](https://github.com/sharetribe/flex-template-web/pull/962) -* [fix] Show Stripe error message on CheckoutPage if payment request fails because of Stripe error. +- [fix] Show Stripe error message on CheckoutPage if payment request fails because of Stripe error. Also show error if payment amount is zero. [#960](https://github.com/sharetribe/flex-template-web/pull/960) -* [fix] Remove unused translation keys and update PasswordChangePage title +- [fix] Remove unused translation keys and update PasswordChangePage title [#959](https://github.com/sharetribe/flex-template-web/pull/959) -* [add] Add translations CLI tool [#955](https://github.com/sharetribe/flex-template-web/pull/955) +- [add] Add translations CLI tool [#955](https://github.com/sharetribe/flex-template-web/pull/955) [v2.4.0]: https://github.com/sharetribe/flex-template-web/compare/v2.3.2...v2.4.0 ## [v2.3.2] 2018-11-20 -* [fix] Take 2: don't set currentUserHasListings if fetched listing is in draft state. +- [fix] Take 2: don't set currentUserHasListings if fetched listing is in draft state. [#956](https://github.com/sharetribe/flex-template-web/pull/956) -* [fix] PriceFilter styles [#954](https://github.com/sharetribe/flex-template-web/pull/954) +- [fix] PriceFilter styles [#954](https://github.com/sharetribe/flex-template-web/pull/954) [v2.3.2]: https://github.com/sharetribe/flex-template-web/compare/v2.3.1...v2.3.2 ## [v2.3.1] 2018-11-16 -* [fix] Don't set currentUserHasListings if fetched listing is in draft state. +- [fix] Don't set currentUserHasListings if fetched listing is in draft state. ModalMissingInformation was shown too early for users creating their first listing. [#953](https://github.com/sharetribe/flex-template-web/pull/953) -* [change] Add index files of components and containers folder to .prettierignore +- [change] Add index files of components and containers folder to .prettierignore [#952](https://github.com/sharetribe/flex-template-web/pull/952) -* [fix] the alignment of arrows in FieldDateRangeInput and refactoring arrow icon code. +- [fix] the alignment of arrows in FieldDateRangeInput and refactoring arrow icon code. [#951](https://github.com/sharetribe/flex-template-web/pull/951) -* [change] Remove unnecessary language configuration and improve translations documentation. +- [change] Remove unnecessary language configuration and improve translations documentation. [#950](https://github.com/sharetribe/flex-template-web/pull/950) [v2.3.1]: https://github.com/sharetribe/flex-template-web/compare/v2.3.0...v2.3.1 ## [v2.3.0] 2018-11-13 -* [add] Draft listing is used in EditListingWizard, ManageListingCard and ListingPage. From now on +- [add] Draft listing is used in EditListingWizard, ManageListingCard and ListingPage. From now on description panel creates a draft listing and photos panel publishes it. You can also view your current draft listings from 'your listings' page. [#947](https://github.com/sharetribe/flex-template-web/pull/947) -* [fix] Firefox showed select options with the same color as select itself. Now options have their +- [fix] Firefox showed select options with the same color as select itself. Now options have their own color set and _placeholder option needs to be disabled_. [#946](https://github.com/sharetribe/flex-template-web/pull/946) @@ -83,7 +83,7 @@ way to update this template, but currently, we follow a pattern: ## [v2.2.0] 2018-10-31 -* [add] SearchPage: adds PriceFilter (and RangeSlider, FieldRangeSlider, PriceFilterForm). +- [add] SearchPage: adds PriceFilter (and RangeSlider, FieldRangeSlider, PriceFilterForm). **Note:** You must define min and max for the filter in `src/marketplace-custom-config.js`. Current maximum value for the range is set to 1000 (USD/EUR/currency units). In addition, this @@ -95,56 +95,56 @@ way to update this template, but currently, we follow a pattern: ## [v2.1.1] 2018-10-23 -* [add] Added initial documentation about routing and loading data. +- [add] Added initial documentation about routing and loading data. [#941](https://github.com/sharetribe/flex-template-web/pull/941) -* [remove] Removed plain text parts of email templates. +- [remove] Removed plain text parts of email templates. [#942](https://github.com/sharetribe/flex-template-web/pull/942) -* [add] Add referrer policy due tokens in URL on PasswordResetPage and EmailVerificationPage. +- [add] Add referrer policy due tokens in URL on PasswordResetPage and EmailVerificationPage. [#940](https://github.com/sharetribe/flex-template-web/pull/940) -* [add] Added initial documentation about our Redux setup. +- [add] Added initial documentation about our Redux setup. [#939](https://github.com/sharetribe/flex-template-web/pull/939) -* [add] Added a small comment to documentation about the current state of code-splitting. +- [add] Added a small comment to documentation about the current state of code-splitting. [#938](https://github.com/sharetribe/flex-template-web/pull/938) [v2.1.1]: https://github.com/sharetribe/flex-template-web/compare/v2.1.0...v2.1.1 ## [v2.1.0] 2018-10-01 -* [change] Improve performance of public pages. Image assets are optimized and lazy loading is +- [change] Improve performance of public pages. Image assets are optimized and lazy loading is applied to images in SectionLocation and ListingCard. Read [documentation](./docs/improving-performance.md) for implementation details. [#936](https://github.com/sharetribe/flex-template-web/pull/936) -* [change] Update sharetribe-scripts. **cssnext** (used previously in sharetribe-scripts) has been +- [change] Update sharetribe-scripts. **cssnext** (used previously in sharetribe-scripts) has been deprecated. Now **postcss-preset-env** is used instead with stage 3 + custom media queries and nesting-rules. If this change breaks your styling, you could still use v1.1.2. The next version of [postcss-nesting](https://github.com/jonathantneal/postcss-nesting) (v7.0.0) will no longer support nested at-rules (like media queries) - therefore, we didn't update to that version yet. [#935](https://github.com/sharetribe/flex-template-web/pull/935) -* [change] Change Mapbox's default font to marketplace font. +- [change] Change Mapbox's default font to marketplace font. [#934](https://github.com/sharetribe/flex-template-web/pull/934) -* [add] New default design for the landing page's hero section. Now the CTA button's default +- [add] New default design for the landing page's hero section. Now the CTA button's default behavior is 'Browse'. - * `marketplaceH1FontStyles`: changed letter spacing to be more tight. - * `SectionHero` has now a search page link that should be customized to point to your marketplace + - `marketplaceH1FontStyles`: changed letter spacing to be more tight. + - `SectionHero` has now a search page link that should be customized to point to your marketplace primary area [#933](https://github.com/sharetribe/flex-template-web/pull/933) [v2.1.0]: https://github.com/sharetribe/flex-template-web/compare/v2.0.0...v2.1.0 ## [v2.0.0] 2018-09-19 -* [add] New default map provider (Mapbox) and complete refactoring to all map and geocoding +- [add] New default map provider (Mapbox) and complete refactoring to all map and geocoding components. [#888](https://github.com/sharetribe/flex-template-web/pull/888) **Note:** Before updating to version 2.0.0, you should very carefully track customizations that you have made to following components: - * **LocationAutocompleteInput** - * **Map** - * **SearchPage** (especially previous `onIdle` function) - * **SearchMap** - * **SearchMapPriceLabel** - * **SearchMapGroupLabel** - * **SearchMapInfoCard** + - **LocationAutocompleteInput** + - **Map** + - **SearchPage** (especially previous `onIdle` function) + - **SearchMap** + - **SearchMapPriceLabel** + - **SearchMapGroupLabel** + - **SearchMapInfoCard** To get a better understanding of what has changed, you should read documents about how to [integrate to map providers](./docs/map-providers.md) and especially @@ -154,38 +154,38 @@ way to update this template, but currently, we follow a pattern: ## [v1.4.3] 2018-09-15 -* [fix] fuzzy location didn't change when listing location changed. +- [fix] fuzzy location didn't change when listing location changed. [#931](https://github.com/sharetribe/flex-template-web/pull/931) -* [fix] obfuscatedCoordinatesImpl didn't always return coordinates within given offset radius. +- [fix] obfuscatedCoordinatesImpl didn't always return coordinates within given offset radius. [#930](https://github.com/sharetribe/flex-template-web/pull/930) -* [fix] LocationAutocompleteInput: blur input when selecting by enter to prevent flash of default +- [fix] LocationAutocompleteInput: blur input when selecting by enter to prevent flash of default predictions. [#928](https://github.com/sharetribe/flex-template-web/pull/928) -* [fix] LocationAutocompleteInput: selecting with enter key prevented while fetching predictions. +- [fix] LocationAutocompleteInput: selecting with enter key prevented while fetching predictions. [#923](https://github.com/sharetribe/flex-template-web/pull/923) [v1.4.3]: https://github.com/sharetribe/flex-template-web/compare/v1.4.2...v1.4.3 ## [v1.4.2] 2018-09-06 -* [add] Reduce character queries on LocationAutocompleteInput to reduce geocoding costs. +- [add] Reduce character queries on LocationAutocompleteInput to reduce geocoding costs. [#883](https://github.com/sharetribe/flex-template-web/pull/883) -* [change] Update git links and improve documentation +- [change] Update git links and improve documentation [#911](https://github.com/sharetribe/flex-template-web/pull/911) -* [change] improve env-template to better defaults. +- [change] improve env-template to better defaults. [#912](https://github.com/sharetribe/flex-template-web/pull/912) -* [fix] Touch event from location autocomplete prediction list ended up causing clicks. +- [fix] Touch event from location autocomplete prediction list ended up causing clicks. [#917](https://github.com/sharetribe/flex-template-web/pull/917) -* [change] Disable default predictions in listing wizard +- [change] Disable default predictions in listing wizard [#906](https://github.com/sharetribe/flex-template-web/pull/906) [v1.4.2]: https://github.com/sharetribe/flex-template-web/compare/v1.4.1...v1.4.2 ## [v1.4.1] 2018-08-21 -* [fix] Fix window resize redirecting to search page with reusable map component +- [fix] Fix window resize redirecting to search page with reusable map component [#905](https://github.com/sharetribe/flex-template-web/pull/905) -* [change] Maps configuration has been restructured. The new configuration is agnostic of the maps +- [change] Maps configuration has been restructured. The new configuration is agnostic of the maps provider in use and works with both Google Maps as well as Mapbox. The fuzzy location circle has less configuration, but otherwise all the previous settings can be @@ -201,150 +201,150 @@ way to update this template, but currently, we follow a pattern: ## [v1.4.0] 2018-08-17 -* [change] Put availability calendar behind a feature flag +- [change] Put availability calendar behind a feature flag [#902](https://github.com/sharetribe/flex-template-web/pull/902) -* [fix] Drop date time from time slots request query params +- [fix] Drop date time from time slots request query params [#901](https://github.com/sharetribe/flex-template-web/pull/901) -* [fix] Make a second time slots request when required +- [fix] Make a second time slots request when required [#901](https://github.com/sharetribe/flex-template-web/pull/901) -* [add] Map component (used in ListingPage) using Mapbox instead of Google Maps +- [add] Map component (used in ListingPage) using Mapbox instead of Google Maps [#896](https://github.com/sharetribe/flex-template-web/pull/896) -* [add] Listing availability [#868](https://github.com/sharetribe/flex-template-web/pull/868), +- [add] Listing availability [#868](https://github.com/sharetribe/flex-template-web/pull/868), [#873](https://github.com/sharetribe/flex-template-web/pull/873), [#891](https://github.com/sharetribe/flex-template-web/pull/891) & [#892](https://github.com/sharetribe/flex-template-web/pull/892) -* [add] Add support for user's current location as a default suggestion in the location autocomplete +- [add] Add support for user's current location as a default suggestion in the location autocomplete search. [#895](https://github.com/sharetribe/flex-template-web/pull/895) -* [add] Add support for default locations in the LocationAutocompleteInput component. Common +- [add] Add support for default locations in the LocationAutocompleteInput component. Common searches can be configured to show when the input has focus. This reduces typing and Google Places geolocation API usage. The defaults can be configured in `src/components/LocationAutocompleteInput/GeocoderGoogleMaps.js`. [#894](https://github.com/sharetribe/flex-template-web/pull/894) -* [change] Removed the `country` parameter from the search page as it was not used anywhere. +- [change] Removed the `country` parameter from the search page as it was not used anywhere. [#893](https://github.com/sharetribe/flex-template-web/pull/893) [v1.4.0]: https://github.com/sharetribe/flex-template-web/compare/v1.3.2...v1.4.0 ## [v1.3.2] 2018-08-07 -* [change] Update the Sharetribe Flex SDK to the 1.0.0 version in NPM. All the `sharetribe-sdk` +- [change] Update the Sharetribe Flex SDK to the 1.0.0 version in NPM. All the `sharetribe-sdk` imports are now using the new package name `sharetribe-flex-sdk`. [#884](https://github.com/sharetribe/flex-template-web/pull/884) -* [change] Reusable SearchMap. Fixed the original reverted version. (Includes audit exception 678) +- [change] Reusable SearchMap. Fixed the original reverted version. (Includes audit exception 678) [#882](https://github.com/sharetribe/flex-template-web/pull/882) [v1.3.2]: https://github.com/sharetribe/flex-template-web/compare/v1.3.1...v1.3.2 ## [v1.3.1] -* [fix] Hotfix: reverting the usage of ReusableMapContainer due to production build error. +- [fix] Hotfix: reverting the usage of ReusableMapContainer due to production build error. [#881](https://github.com/sharetribe/flex-template-web/pull/881) [v1.3.1]: https://github.com/sharetribe/flex-template-web/compare/v1.3.0...v1.3.1 ## [v1.3.0] -* [change] Reusable SearchMap. [#877](https://github.com/sharetribe/flex-template-web/pull/877) -* [fix] Fix a search filters panel bug where selecting an option in a multi select filter ends up +- [change] Reusable SearchMap. [#877](https://github.com/sharetribe/flex-template-web/pull/877) +- [fix] Fix a search filters panel bug where selecting an option in a multi select filter ends up invoking a mobile filter callback function. [#876](https://github.com/sharetribe/flex-template-web/pull/876) -* [change] Use seeded random for client side coordinate obfuscation +- [change] Use seeded random for client side coordinate obfuscation [#874](https://github.com/sharetribe/flex-template-web/pull/874) [v1.3.0]: https://github.com/sharetribe/flex-template-web/compare/v1.2.2...v1.3.0 ## [v1.2.2] -* [change] Change static map to dynamic map when clicked. +- [change] Change static map to dynamic map when clicked. [#871](https://github.com/sharetribe/flex-template-web/pull/871) [v1.2.2]: https://github.com/sharetribe/flex-template-web/compare/v1.2.1...v1.2.2 ## [v1.2.1] -* [fix] Lazy load map only if the map is near current viewport. +- [fix] Lazy load map only if the map is near current viewport. [#871](https://github.com/sharetribe/flex-template-web/pull/871) [v1.2.1]: https://github.com/sharetribe/flex-template-web/compare/v1.2.0...v1.2.1 ## [v1.2.0] -* [change] Use Google's static map on ListingPage. This is a reaction to pricing change of Google +- [change] Use Google's static map on ListingPage. This is a reaction to pricing change of Google Maps APIs. [#869](https://github.com/sharetribe/flex-template-web/pull/869) -* [change] Use sessionTokens and fields for Autocomplete calls to Google Maps. This is a reaction to +- [change] Use sessionTokens and fields for Autocomplete calls to Google Maps. This is a reaction to pricing change of Google Maps APIs. [#867](https://github.com/sharetribe/flex-template-web/pull/867) -* [change] Change TransactionPage state management in loadData. +- [change] Change TransactionPage state management in loadData. [#863](https://github.com/sharetribe/flex-template-web/pull/863), [#865](https://github.com/sharetribe/flex-template-web/pull/865) & [#866](https://github.com/sharetribe/flex-template-web/pull/866) -* [fix] Fix submit button state on contact details page. +- [fix] Fix submit button state on contact details page. [#864](https://github.com/sharetribe/flex-template-web/pull/864) -* [fix] Fix listing page host section layout bug. +- [fix] Fix listing page host section layout bug. [#862](https://github.com/sharetribe/flex-template-web/pull/862) -* [fix] Fix initial message input clearing too early in checkout page. +- [fix] Fix initial message input clearing too early in checkout page. [#861](https://github.com/sharetribe/flex-template-web/pull/861) -* [fix] Fix setting Topbar search input initial value. -* [change] Update Redux to v4 [#859](https://github.com/sharetribe/flex-template-web/pull/859) -* [fix] Fix setting Topbar search input initial value +- [fix] Fix setting Topbar search input initial value. +- [change] Update Redux to v4 [#859](https://github.com/sharetribe/flex-template-web/pull/859) +- [fix] Fix setting Topbar search input initial value [#857](https://github.com/sharetribe/flex-template-web/pull/857) [v1.2.0]: https://github.com/sharetribe/flex-template-web/compare/v1.1.0...v1.2.0 ## [v1.1.0] -* [fix] Improve slug creation (slashes were breaking rendering in some environments) +- [fix] Improve slug creation (slashes were breaking rendering in some environments) [#850](https://github.com/sharetribe/flex-template-web/pull/850) -* [fix] Anonymous user should see contact link on UserCard +- [fix] Anonymous user should see contact link on UserCard [#851](https://github.com/sharetribe/flex-template-web/pull/851) -* [fix] Persisting booking request details across authentication +- [fix] Persisting booking request details across authentication [#852](https://github.com/sharetribe/flex-template-web/pull/852) -* [change] Footer styles changed to more generic (no disappearing columns etc.) If you have made +- [change] Footer styles changed to more generic (no disappearing columns etc.) If you have made changes to Footer, consider extracting it to different component before update. [#853](https://github.com/sharetribe/flex-template-web/pull/853) -* [change] Logo customization refactored to be easier. Check CheckoutPage, TopbarDesktop and Footer +- [change] Logo customization refactored to be easier. Check CheckoutPage, TopbarDesktop and Footer after update. [#854](https://github.com/sharetribe/flex-template-web/pull/854) -* [fix] Fix showing reviews from banned users. +- [fix] Fix showing reviews from banned users. [#855](https://github.com/sharetribe/flex-template-web/pull/855) [v1.1.0]: https://github.com/sharetribe/flex-template-web/compare/v1.0.0...v1.1.0 ## [v1.0.0] -* [change] Migrate remaining Redux Forms to Final Form. Also now all the form components can be +- [change] Migrate remaining Redux Forms to Final Form. Also now all the form components can be found in the src/forms folder. Remove redux-form from the dependencies. [#845](https://github.com/sharetribe/flex-template-web/pull/845) -* [fix] Extract and fix missing information reminder modal from Topbar +- [fix] Extract and fix missing information reminder modal from Topbar [#846](https://github.com/sharetribe/flex-template-web/pull/846) -* [fix] Add missing styles for ModalMissingInformation from Topbar +- [fix] Add missing styles for ModalMissingInformation from Topbar [#847](https://github.com/sharetribe/flex-template-web/pull/847) -* [fix] API does not return all image variants anymore, this adds correct variants to update contact +- [fix] API does not return all image variants anymore, this adds correct variants to update contact details call. [#848](https://github.com/sharetribe/flex-template-web/pull/848) [v1.0.0]: https://github.com/sharetribe/flex-template-web/compare/v0.3.1...v1.0.0 ## [v0.3.1] -* [change] Change lodash import syntax to reduce bundle size (-15.14 KB) +- [change] Change lodash import syntax to reduce bundle size (-15.14 KB) [#839](https://github.com/sharetribe/flex-template-web/pull/839) -* [fix] Use https instead of git to access SDK repo for Heroku build (now that the repo is public). +- [fix] Use https instead of git to access SDK repo for Heroku build (now that the repo is public). TODO: create SDK releases instead of using direct refs to single commit. [#841](https://github.com/sharetribe/flex-template-web/pull/841) -* [fix] Typo fix for background-color +- [fix] Typo fix for background-color [#842](https://github.com/sharetribe/flex-template-web/pull/842) [v0.3.1]: https://github.com/sharetribe/flex-template-web/compare/v0.3.0...v0.3.1 ## [v0.3.0] -* Remove custom touched handling from `FieldCheckboxGroup` as it has has become obsolete now that +- Remove custom touched handling from `FieldCheckboxGroup` as it has has become obsolete now that Final Form is replacing Redux Form. [#837](https://github.com/sharetribe/flex-template-web/pull/837) -* Create Stripe account directly instead of passing payout details to Flex API (deprecated way). +- Create Stripe account directly instead of passing payout details to Flex API (deprecated way). [#836](https://github.com/sharetribe/flex-template-web/pull/836) [v0.3.0]: https://github.com/sharetribe/flex-template-web/compare/v0.2.0...v0.3.0 ## v0.2.0 -* Starting a change log for Flex Template for Web. +- Starting a change log for Flex Template for Web. diff --git a/docs/README.md b/docs/README.md index 10a3d46f..93e47121 100644 --- a/docs/README.md +++ b/docs/README.md @@ -13,15 +13,15 @@ used in a browser environment using the JavaScript SDK. Marketplace features included in Saunatime: -* **Location search** shows the user if there are saunas available in a given location. -* **The listing page** gives a detailed view about what a particular sauna offers. -* **Transaction process**: Saunatime uses nightly booking. -* **Notifications**: Emails are sent during the booking process to alert customers and providers +- **Location search** shows the user if there are saunas available in a given location. +- **The listing page** gives a detailed view about what a particular sauna offers. +- **Transaction process**: Saunatime uses nightly booking. +- **Notifications**: Emails are sent during the booking process to alert customers and providers about changes in the booking state. -* **Inbox** lists **orders** and **sales**. -* **Reviews** can be given after a completed transaction. -* **User profiles** provide detailed information about a given user. -* **Extended data:** The listing and user data models are modified using extended data. +- **Inbox** lists **orders** and **sales**. +- **Reviews** can be given after a completed transaction. +- **User profiles** provide detailed information about a given user. +- **Extended data:** The listing and user data models are modified using extended data. ## How to customize this template @@ -33,28 +33,28 @@ The easiest way to start a customization project is to read through the Documentation for specific topics can be found in the following files: -* [Customization guide](customization-guide.md) -* [Folder structure](folder-structure.md) -* [Integration to map providers](map-providers.md) -* [Translations](translations.md) -* [Styling a marketplace](styling.md) -* [Static pages](static-pages.md) -* [Terms of Service and Privacy Policy](terms-of-service-and-privacy-policy.md) -* [Routing](routing.md) -* [Redux and duck files](redux.md) -* [Extended data](extended-data.md) -* [Extend the listing data model](extend-listing.md) -* [Search filters](search-filters.md) -* [Testing](testing.md) -* [Error logging with Sentry](sentry.md) -* [Analytics](analytics.md) -* [Continuous Integration (CI)](ci.md) -* [Content Security Policy (CSP)](content-security-policy.md) -* [Original create-react-app documentation](https://github.com/sharetribe/create-react-app/blob/master/packages/react-scripts/template/README.md) -* [Customization checklist](customization-checklist.md) -* [Icons](icons.md) -* [Improving performance](improving-performance.md) -* [Deploying to production](deploying-to-production.md) +- [Customization guide](customization-guide.md) +- [Folder structure](folder-structure.md) +- [Integration to map providers](map-providers.md) +- [Translations](translations.md) +- [Styling a marketplace](styling.md) +- [Static pages](static-pages.md) +- [Terms of Service and Privacy Policy](terms-of-service-and-privacy-policy.md) +- [Routing](routing.md) +- [Redux and duck files](redux.md) +- [Extended data](extended-data.md) +- [Extend the listing data model](extend-listing.md) +- [Search filters](search-filters.md) +- [Testing](testing.md) +- [Error logging with Sentry](sentry.md) +- [Analytics](analytics.md) +- [Continuous Integration (CI)](ci.md) +- [Content Security Policy (CSP)](content-security-policy.md) +- [Original create-react-app documentation](https://github.com/sharetribe/create-react-app/blob/master/packages/react-scripts/template/README.md) +- [Customization checklist](customization-checklist.md) +- [Icons](icons.md) +- [Improving performance](improving-performance.md) +- [Deploying to production](deploying-to-production.md) The application was bootstrapped with a forked version of [create-react-app](https://github.com/facebookincubator/create-react-app). While most of the diff --git a/docs/content-security-policy.md b/docs/content-security-policy.md index d75b9af4..ccf0ec0e 100644 --- a/docs/content-security-policy.md +++ b/docs/content-security-policy.md @@ -16,9 +16,9 @@ The CSP is configured using the `REACT_APP_CSP` environment variable. Possible values: -* not set: disabled -* `REACT_APP_CSP=report`: Enabled, but policy violations are only reported -* `REACT_APP_CSP=block`: Enabled. Policy violations are reported and requests that violate the +- not set: disabled +- `REACT_APP_CSP=report`: Enabled, but policy violations are only reported +- `REACT_APP_CSP=block`: Enabled. Policy violations are reported and requests that violate the policy are blocked If error logging with Sentry is enabled (See [Error logging with Sentry](sentry.md)), the reports @@ -37,7 +37,7 @@ URL. To understand what CSP is and how browsers work, here are some resources: -* https://content-security-policy.com/ -* https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -* https://ponyfoo.com/articles/content-security-policy-in-express-apps -* https://helmetjs.github.io/docs/csp/ +- https://content-security-policy.com/ +- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP +- https://ponyfoo.com/articles/content-security-policy-in-express-apps +- https://helmetjs.github.io/docs/csp/ diff --git a/docs/customization-checklist.md b/docs/customization-checklist.md index 1e95a4a8..71c82556 100644 --- a/docs/customization-checklist.md +++ b/docs/customization-checklist.md @@ -2,40 +2,40 @@ Some generic things to update and check when starting to customize the template. -* [Marketplace colors](styling.md) -* [Generate app icons](icons.md) -* [Update translations](../src/translations/en.json) or [change the language](translations.md) -* [LandingPage](../src/containers/LandingPage/LandingPage.js): update and create branded sections -* [Footer](../src/components/Footer/Footer.js) -* [AboutPage](../src/containers/AboutPage/AboutPage.js) -* [Terms of Service](terms-of-service-and-privacy-policy.md#terms-of-service) -* [Privacy Policy](terms-of-service-and-privacy-policy.md#privacy-policy) -* [Social media sharing graphics](../src/components/Page/Page.js); -* [Logo](../src/components/Logo/Logo.js) Change and check that it works on Topbar, Footer, and +- [Marketplace colors](styling.md) +- [Generate app icons](icons.md) +- [Update translations](../src/translations/en.json) or [change the language](translations.md) +- [LandingPage](../src/containers/LandingPage/LandingPage.js): update and create branded sections +- [Footer](../src/components/Footer/Footer.js) +- [AboutPage](../src/containers/AboutPage/AboutPage.js) +- [Terms of Service](terms-of-service-and-privacy-policy.md#terms-of-service) +- [Privacy Policy](terms-of-service-and-privacy-policy.md#privacy-policy) +- [Social media sharing graphics](../src/components/Page/Page.js); +- [Logo](../src/components/Logo/Logo.js) Change and check that it works on Topbar, Footer, and CheckoutPage -* [Default background image](../src/assets/background-1440.jpg) -* [Maps Marker icon](../src/components/Map/images/marker-32x32.png) -* [Config: update environment variables](../src/config.js) -* [Config: siteTitle](../src/config.js) for page schema (SEO) -* [Config: marketplace address](../src/config.js): contact details also improve SEO -* [Config: social media pages](../src/config.js) -* [Marketplace custom config](../src/marketplace-custom-config.js) -* Update [ListingPage](../src/containers/ListingPage/ListingPage.js) to show extended data (aka +- [Default background image](../src/assets/background-1440.jpg) +- [Maps Marker icon](../src/components/Map/images/marker-32x32.png) +- [Config: update environment variables](../src/config.js) +- [Config: siteTitle](../src/config.js) for page schema (SEO) +- [Config: marketplace address](../src/config.js): contact details also improve SEO +- [Config: social media pages](../src/config.js) +- [Marketplace custom config](../src/marketplace-custom-config.js) +- Update [ListingPage](../src/containers/ListingPage/ListingPage.js) to show extended data (aka publicData attribute) -* Update [EditListingWizard](../src/components/EditListingWizard/EditListingWizard.js) and panels to +- Update [EditListingWizard](../src/components/EditListingWizard/EditListingWizard.js) and panels to add extended data -* Update [SearchPage](../src/containers/SearchPage/SearchPage.js) to filter with extended data -* Update [routeConfiguration](../src/routeConfiguration.js) if needed -* Update [Email templates](../ext/default-mail-templates), all of them: .html, subject.txt, and +- Update [SearchPage](../src/containers/SearchPage/SearchPage.js) to filter with extended data +- Update [routeConfiguration](../src/routeConfiguration.js) if needed +- Update [Email templates](../ext/default-mail-templates), all of them: .html, subject.txt, and text.txt -* Update [config: bookingUnitType](../src/config.js) if needed -* If `line-item/units` is used, add quantity handling to +- Update [config: bookingUnitType](../src/config.js) if needed +- If `line-item/units` is used, add quantity handling to [BookingDatesForm](../src/forms/BookingDatesForm/BookingDatesForm.js), [ListingPage](../src/containers/ListingPage/ListingPage.js), [CheckoutPage](../src/containers/CheckoutPage/CheckoutPage.js) ## What else -* Do you need more [static pages](static-pages.md)? -* Changes to existing pages -* Changes to transaction process (API + Web app) +- Do you need more [static pages](static-pages.md)? +- Changes to existing pages +- Changes to transaction process (API + Web app) diff --git a/docs/customization-guide.md b/docs/customization-guide.md index 16e36ad2..5eef2aab 100644 --- a/docs/customization-guide.md +++ b/docs/customization-guide.md @@ -11,8 +11,8 @@ repository is the recommended way to proceed. Follow this guide for instructions Install required tools: -* [Node.js](https://nodejs.org/) -* [Yarn](https://yarnpkg.com/) +- [Node.js](https://nodejs.org/) +- [Yarn](https://yarnpkg.com/) ## Technologies @@ -24,13 +24,13 @@ get-go. Here are some main technologies that the template uses: -* JavaScript: programming language for the whole application -* CSS: styling the user interface using [CSS Modules](https://github.com/css-modules/css-modules) -* [React](https://reactjs.org/): library for creating user interfaces with components -* [Redux](https://redux.js.org/): state and data flow handling -* [Final Form](https://github.com/final-form/final-form): forms -* [React Router](https://reacttraining.com/react-router/): routing -* [Express](https://expressjs.com/): server +- JavaScript: programming language for the whole application +- CSS: styling the user interface using [CSS Modules](https://github.com/css-modules/css-modules) +- [React](https://reactjs.org/): library for creating user interfaces with components +- [Redux](https://redux.js.org/): state and data flow handling +- [Final Form](https://github.com/final-form/final-form): forms +- [React Router](https://reacttraining.com/react-router/): routing +- [Express](https://expressjs.com/): server ## Setup @@ -109,7 +109,7 @@ To develop the application and to see changes live, start the frontend developme **Known issues:** -* Adding/changing `import`s may not be synced properly with ESLint. You may see an error +- Adding/changing `import`s may not be synced properly with ESLint. You may see an error `Unable to resolve path to module` even though the module existing in right path. Restarting the server doesn't help. To solve the issue, you need to make a change to the file where the error occurs. diff --git a/docs/deploying-to-production.md b/docs/deploying-to-production.md index d653ceb4..3c6a8e29 100644 --- a/docs/deploying-to-production.md +++ b/docs/deploying-to-production.md @@ -51,13 +51,13 @@ Start the server: ## Deploying to Heroku -* [Forking the repository](#forking-the-repository) -* [Creating new app](#creating-new-app) -* [Connect GitHub to Heroku](#connect-github-to-heroku) -* [Heroku settings](#heroku-settings) - * [Updating enviroment variables](#updating-enviroment-variables) - * [Domains and certificates](#domains-and-certificates) -* [Heroku logs](#heroku-logs) +- [Forking the repository](#forking-the-repository) +- [Creating new app](#creating-new-app) +- [Connect GitHub to Heroku](#connect-github-to-heroku) +- [Heroku settings](#heroku-settings) + - [Updating enviroment variables](#updating-enviroment-variables) + - [Domains and certificates](#domains-and-certificates) +- [Heroku logs](#heroku-logs) Before creating the app you need three accounts: [Heroku](https://heroku.com/), [Stripe](https://stripe.com/fi) and [MapBox](https://www.mapbox.com/). Creating the accounts is free @@ -100,7 +100,7 @@ from any branch in the repository. Read more from Heroku docs: -* [GitHub Integration](https://devcenter.heroku.com/articles/github-integration) +- [GitHub Integration](https://devcenter.heroku.com/articles/github-integration) ### Heroku settings @@ -123,8 +123,8 @@ SSH settings in the _Settings tab_. Read more from Heroku docs: -* [Custom Domain Names for Apps](https://devcenter.heroku.com/articles/custom-domains) -* [Manually Acquiring an SSL/TLS Certificate](https://devcenter.heroku.com/articles/acquiring-an-ssl-certificate) +- [Custom Domain Names for Apps](https://devcenter.heroku.com/articles/custom-domains) +- [Manually Acquiring an SSL/TLS Certificate](https://devcenter.heroku.com/articles/acquiring-an-ssl-certificate)  diff --git a/docs/extend-listing.md b/docs/extend-listing.md index 9b614bcf..109d23d6 100644 --- a/docs/extend-listing.md +++ b/docs/extend-listing.md @@ -9,10 +9,10 @@ Adding new attributes to the data model relies on a Flex concept called Three main areas in extending the listing data model are: -* [Declare the attribute and it's possible values](#declare-the-attribute-and-its-possible-values) -* [Edit the listing wizard](#edit-the-listing-wizard) -* [Show the attribute on listing page](#show-the-attribute-on-listing-page) -* [Use the attribute as a search filter](#use-the-attribute-as-a-search-filter) +- [Declare the attribute and it's possible values](#declare-the-attribute-and-its-possible-values) +- [Edit the listing wizard](#edit-the-listing-wizard) +- [Show the attribute on listing page](#show-the-attribute-on-listing-page) +- [Use the attribute as a search filter](#use-the-attribute-as-a-search-filter) In this guide we will extend the listing data model by adding a _capacity_ attribute. diff --git a/docs/folder-structure.md b/docs/folder-structure.md index 4e048af5..6614cb5e 100644 --- a/docs/folder-structure.md +++ b/docs/folder-structure.md @@ -48,14 +48,14 @@ API), and app icons. It also specifies placeholders for tags generated by ## src/ -* `src/index.js` is the JavaScript entry point on the client-side (it also exports `renderApp` +- `src/index.js` is the JavaScript entry point on the client-side (it also exports `renderApp` function to be used for server-side rendering). -* `src/app.js` creates ClientApp and ServerApp -* `src/routeConfiguration.js` defines logic between routes and page-level components -* `src/marketplace.css`, `src/marketplaceIndex.css`, `src/marketplaceIndex.css` define marketplace +- `src/app.js` creates ClientApp and ServerApp +- `src/routeConfiguration.js` defines logic between routes and page-level components +- `src/marketplace.css`, `src/marketplaceIndex.css`, `src/marketplaceIndex.css` define marketplace level styling using [CSS Properties](http://cssnext.io/features/#custom-properties-var) and CSS Property Sets. -* `src/translations/en.json` all English translations used in Saunatime template app. (A good place +- `src/translations/en.json` all English translations used in Saunatime template app. (A good place to start customization.) ### `src/components/` @@ -81,11 +81,11 @@ internal state, etc. ## server/ -* `server/index.js` handles server-side rendering (SSR). Built with [Express](http://expressjs.com) +- `server/index.js` handles server-side rendering (SSR). Built with [Express](http://expressjs.com) (Node.js framework). -* `server/csp.js` [Content Security Policy](https://content-security-policy.com), whitelist of +- `server/csp.js` [Content Security Policy](https://content-security-policy.com), whitelist of domains that the application and loaded scripts are allowed to access from the browser. -* `server/sitemap.js` generates a minimal sitemap.xml for SEO purposes. +- `server/sitemap.js` generates a minimal sitemap.xml for SEO purposes. ## ext/default-mail-templates/ diff --git a/docs/improving-performance.md b/docs/improving-performance.md index 7f0816b5..d00b8e7f 100644 --- a/docs/improving-performance.md +++ b/docs/improving-performance.md @@ -2,8 +2,8 @@ When we think about page speed there are actually two different scenarios that we need to address: -* The speed of initial page load and possible reloads after that -* The speed of changing the page within Single page application (SPA) +- The speed of initial page load and possible reloads after that +- The speed of changing the page within Single page application (SPA) The first one is usually a slower process. A browser needs to load all the HTML, CSS, JavaScript, and images - and then it needs to understand and execute those files, calculate layout, paint @@ -27,11 +27,11 @@ Read more about We haven't yet implemented code splitting to reduce initial page rendering time, but there're other improvements that could be done to improve both cases of page rendering. -* [Check page performance](#check-page-performance) -* [Optimize image sizes](#optimize-image-sizes) -* [Lazy load off-screen images and other components](#lazy-load-off-screen-images-and-other-components) -* [Use sparse fields](#use-sparse-fields) -* [About code-splitting](#about-code-splitting) +- [Check page performance](#check-page-performance) +- [Optimize image sizes](#optimize-image-sizes) +- [Lazy load off-screen images and other components](#lazy-load-off-screen-images-and-other-components) +- [Use sparse fields](#use-sparse-fields) +- [About code-splitting](#about-code-splitting) ## Check page performance @@ -52,17 +52,17 @@ within your web app. Quick checklist: -* Check that the actual dimensions of an image match with DOM element's dimensions. -* Lighthouse suggests that image compression level should be 85% or lower. +- Check that the actual dimensions of an image match with DOM element's dimensions. +- Lighthouse suggests that image compression level should be 85% or lower. [Read more](https://developers.google.com/web/tools/lighthouse/audits/optimize-images) -* Good rule-of-thumb is that use JPEG for images and photos, where PNG is better for graphics, such +- Good rule-of-thumb is that use JPEG for images and photos, where PNG is better for graphics, such as logos, graphs and illustrations. -* If you are using JPEG images, think about saving them as progressive JPEGs. +- If you are using JPEG images, think about saving them as progressive JPEGs. [Read more](https://cloudinary.com/blog/progressive_jpegs_and_green_martians) + [Photoshop guide](https://helpx.adobe.com/photoshop-elements/using/optimizing-images-jpeg-format.html) -* If you are using PNG images, consider running them through PNG optimizers to reduce file size. +- If you are using PNG images, consider running them through PNG optimizers to reduce file size. Plenty of options available, one example is [TinyPNG.com](https://tinypng.com) -* Think about serving images and other static assets from some CDN. +- Think about serving images and other static assets from some CDN. [Read more.](https://www.smashingmagazine.com/2017/04/content-delivery-network-optimize-images/) ## Lazy load off-screen images and other components diff --git a/docs/redux.md b/docs/redux.md index 98ade398..d1239300 100644 --- a/docs/redux.md +++ b/docs/redux.md @@ -14,10 +14,10 @@ level elements (unless you are modifying [a static page](static-pages.md)). In the following subtopics, we assume that you know the [basics of Redux](https://redux.js.org/basics) already. -* [Containers: Pages + TopbarContainer](#containers-pages--topbarcontainer) -* [Duck files](#duck-files) -* [Setting up Redux](#setting-up-redux) -* [Advanced Redux concepts: thunks](#advanced-redux-concepts-thunks) +- [Containers: Pages + TopbarContainer](#containers-pages--topbarcontainer) +- [Duck files](#duck-files) +- [Setting up Redux](#setting-up-redux) +- [Advanced Redux concepts: thunks](#advanced-redux-concepts-thunks) ## Containers: Pages + TopbarContainer @@ -42,9 +42,13 @@ file. For example, `src/containers/TransactionPage/TransactionPage.js` connects store with `mapStateToProps` and `mapDispatchToProps` functions: ```js -const TransactionPage = compose(connect(mapStateToProps, mapDispatchToProps), injectIntl)( - TransactionPageComponent -); +const TransactionPage = compose( + connect( + mapStateToProps, + mapDispatchToProps + ), + injectIntl +)(TransactionPageComponent); ``` ## Duck files @@ -85,8 +89,8 @@ function (in `src/store.js`). This setup creates a store structure that separates container specific state as well as global data by their reducer names. Together with Ducks module naming schema, this means that: -* the state of the `ListingPage` can be found from `state.ListingPage` and -* the state of the global `user` object can be found from `state.user`. +- the state of the `ListingPage` can be found from `state.ListingPage` and +- the state of the global `user` object can be found from `state.user`. ## Advanced Redux concepts: thunks diff --git a/docs/routing.md b/docs/routing.md index 89d17114..aea13b59 100644 --- a/docs/routing.md +++ b/docs/routing.md @@ -7,11 +7,11 @@ instead of defining on server-side what gets rendered when user goes to URL `somemarketplace.com/about`, we just catch all the path combinations and let the app to define what page gets rendered. -* [React Router setup](#react-router-setup) -* [Linking](#linking) -* [Loading data](#loading-data) -* [Analytics](#analytics) -* [A brief introduction to server-side rendering](#a-brief-introduction-to-ssr) +- [React Router setup](#react-router-setup) +- [Linking](#linking) +- [Loading data](#loading-data) +- [Analytics](#analytics) +- [A brief introduction to server-side rendering](#a-brief-introduction-to-ssr) ## React Router setup @@ -144,10 +144,10 @@ const Routes = (props, context) => { Inside `src/Routes.js`, we also have a component called `RouteComponentRenderer`, which has three important jobs: -* Calling loadData function, if those have been defined in `src/routeConfiguration.js`. This is an +- Calling loadData function, if those have been defined in `src/routeConfiguration.js`. This is an asynchronous call, a page needs to define what gets rendered before data is complete. -* Reset scroll position after location change. -* Dispatch location changed actions to Redux store. This makes it possible for +- Reset scroll position after location change. +- Dispatch location changed actions to Redux store. This makes it possible for [analytics Redux middleware](analytics.md) to listen location changes. ## Linking diff --git a/docs/search-filters.md b/docs/search-filters.md index 404b3082..b8057d2b 100644 --- a/docs/search-filters.md +++ b/docs/search-filters.md @@ -17,8 +17,8 @@ out search result with only one value per search parameter. The _select multiple other hand can take multiple values for a single search parameter. These two filter types for extended data are implemented with four different components, a standard and a plain one: -* Select single filter: `SelectSingleFilter` and `SelectSingleFilterPlain` -* Select multiple filter: `SelectMultipleFilter` and `SelectMultipleFilterPlain` +- Select single filter: `SelectSingleFilter` and `SelectSingleFilterPlain` +- Select multiple filter: `SelectMultipleFilter` and `SelectMultipleFilterPlain` The `SelectSingleFilter` and `SelectMultipleFilter` components are rendered as standard dropdowns in the search view. The plain filter components `SelectSingleFilterPlain` and @@ -132,9 +132,9 @@ passed as props to the components that render the filters: `SearchFilters`, `Sea `SearchFiltersMobile` .The difference between filters passed as primary and secondary varies in mobile and desktop views: -* **Desktop:** Primary filters are shown in the top of the search view, secondary filters are +- **Desktop:** Primary filters are shown in the top of the search view, secondary filters are rendered in a distinct panel that opens on top of search results. -* **Mobile:** Both primary and secondary filters are rendered in the same modal. +- **Mobile:** Both primary and secondary filters are rendered in the same modal. ### Desktop filters @@ -144,9 +144,9 @@ A basic desktop filter that renders as a dropdown button on top of the search re achieved using the `SelectSingleFilter` and `SelectMultipleFilter` components. To add standard desktop filters, perform the following in `SearchFilters` component: -* declare a prop with the same name that you added the filter config to `primaryFilters` -* resolve the filters initial value with `initialValue` and `initialValues` functions -* render the filter by using a `SelectSingleFilter` or `SelectMultipleFilter` component inside the +- declare a prop with the same name that you added the filter config to `primaryFilters` +- resolve the filters initial value with `initialValue` and `initialValues` functions +- render the filter by using a `SelectSingleFilter` or `SelectMultipleFilter` component inside the `