Merge pull request #186 from sharetribe/update-v8.4.1-from-upstream

Release v10.4.1 (against upstream v8.4.1)

.env-template

@@ -1,3 +1,6 @@
+# Environment variables for the client app.
+# Note that variables, that start with "REACT_APP" prefix, are exposed to the public web.
+# https://create-react-app.dev/docs/adding-custom-environment-variables
 
 # Mandatory configuration
 #

CHANGELOG.md

@@ -15,7 +15,25 @@ https://github.com/sharetribe/flex-template-web/
 
 ---
 
-## Upcoming version 2021-XX-XX
+## Upcoming version 2022-XX-XX
+
+## [v10.4.1] 2022-03-16
+
+- [fix] FieldDateInput: input font-size must be min 16px for mobile. EditListingPage.duck: fix image
+  upload (dublicate images shown). [#186](https://github.com/sharetribe/ftw-daily/pull/186)
+
+### Updates from upstream (FTW-daily v8.4.1)
+
+- [fix] Portal version of Modals couldn't use 100vh on mobile Safari. Safari changes the window's
+  height based on if the location bar is squeezed or not (and that depends on scroll-effect).
+  [#1501](https://github.com/sharetribe/ftw-daily/pull/1501)
+- [fix] Setting multiple environment variables in Windows requires using the set command before each
+  individual variable. Updated the 'for windows users' section in documentation.
+  [#1491](https://github.com/sharetribe/ftw-daily/pull/1491)
+- [add] Code comment about "REACT_APP" prefix in environment variables.
+  [#1492](https://github.com/sharetribe/ftw-daily/pull/1492)
+
+  [v10.4.1]: https://github.com/sharetribe/ftw-hourly/compare/v10.4.0...v10.4.1
 
 ## [v10.4.0] 2021-12-02
 

README.md

@@ -63,11 +63,11 @@ Change `export` to `set` in the package.json file if you're using Windows/DOS. Y
 change to "dev" and "dev-sever" commands.
 
 ```
-"dev": "yarn run config-check&&set NODE_ENV=development REACT_APP_DEV_API_SERVER_PORT=3500&&concurrently --kill-others \"yarn run dev-frontend\" \"yarn run dev-backend\""
+"dev": "yarn run config-check&&set NODE_ENV=development&& set REACT_APP_DEV_API_SERVER_PORT=3500&&concurrently --kill-others \"yarn run dev-frontend\" \"yarn run dev-backend\""
 ```
 
 ```
-"dev-server": "set NODE_ENV=development PORT=4000 REACT_APP_CANONICAL_ROOT_URL=http://localhost:4000&&yarn run build&&nodemon --watch server server/index.js"
+"dev-server": "set NODE_ENV=development&& set PORT=4000&& set REACT_APP_CANONICAL_ROOT_URL=http://localhost:4000&&yarn run build&&nodemon --watch server server/index.js"
 ```
 
 We strongly recommend installing

package.json

@@ -1,6 +1,6 @@
 {
   "name": "app",
-  "version": "10.4.0",
+  "version": "10.4.1",
   "private": true,
   "license": "Apache-2.0",
   "dependencies": {

src/components/BookingPanel/BookingPanel.module.css

@@ -9,7 +9,7 @@
 
   @media (--viewportMedium) {
     flex-basis: 576px;
-    height: 100%;
+    height: unset;
     padding: var(--modalPaddingMedium);
     background-color: var(--matterColorLight);
     margin-top: 12.5vh;
@@ -135,13 +135,10 @@
   flex-grow: 1;
   display: flex;
   flex-direction: column;
-  /* Mobile phones introduce bottom-bar, which takes 102px vertical space.
-     In addition to that we have fixed button that takes 84px vertical space.
-  */
-  margin: 0 0 186px 0;
+  padding: 0;
 
   @media (--viewportMedium) {
-    margin: 0;
+    padding: 0;
     min-height: 400px;
   }
 

src/components/FieldDateInput/DateInput.module.css

@@ -27,6 +27,7 @@
   & :global(.DateInput_input) {
     @apply --marketplaceDefaultFontStyles;
     @apply --marketplaceInputStyles;
+    font-size: 16px;
     border-bottom-style: solid;
     border-bottom-width: 2px;
     border-bottom-color: var(--attentionColor);

src/components/FieldDateRangeInput/DateRangeInput.module.css

@@ -26,6 +26,7 @@
 
   & :global(.DateInput_input) {
     @apply --marketplaceH4FontStyles;
+    font-size: 16px;
     padding: 0;
     margin: 0;
     border: 0;

src/components/Modal/Modal.js

@@ -51,8 +51,10 @@ export class ModalComponent extends Component {
     super(props);
     this.handleBodyKeyUp = this.handleBodyKeyUp.bind(this);
     this.handleClose = this.handleClose.bind(this);
+    this.handleResize = this.handleResize.bind(this);
 
     this.refDiv = React.createRef();
+    this.vh = null;
 
     this.state = {
       portalRoot: null,
@@ -62,7 +64,15 @@ export class ModalComponent extends Component {
   componentDidMount() {
     const { id, isOpen, onManageDisableScrolling } = this.props;
     onManageDisableScrolling(id, isOpen);
-    document.body.addEventListener('keyup', this.handleBodyKeyUp);
+    window.document.body.addEventListener('keyup', this.handleBodyKeyUp);
+
+    // A hack to update container height for mobile Safari,
+    // when resizing happens due to scroll.
+    // css.isOpenInPortal has "height: calc(var(--vh, 1vh) * 100)"
+    this.vh = window.innerHeight * 0.01;
+    window.document.documentElement.style.setProperty('--vh', `${this.vh}px`);
+    window.addEventListener('resize', this.handleResize);
+
     this.setState({
       portalRoot: document.getElementById('portal-root'),
     });
@@ -83,7 +93,8 @@ export class ModalComponent extends Component {
 
   componentWillUnmount() {
     const { id, onManageDisableScrolling } = this.props;
-    document.body.removeEventListener('keyup', this.handleBodyKeyUp);
+    window.document.body.removeEventListener('keyup', this.handleBodyKeyUp);
+    window.document.body.removeEventListener('resize', this.handleResize);
     onManageDisableScrolling(id, false);
   }
 
@@ -100,6 +111,11 @@ export class ModalComponent extends Component {
     onClose(event);
   }
 
+  handleResize() {
+    this.vh = window.innerHeight * 0.01;
+    window.document.documentElement.style.setProperty('--vh', `${this.vh}px`);
+  }
+
   render() {
     const {
       children,
@@ -136,7 +152,8 @@ export class ModalComponent extends Component {
     // If props doesn't contain isClosedClassName, styles default to css.isClosed
     // This makes it possible to create ModalInMobile on top of Modal where style modes are:
     // visible, hidden, or none (ModalInMobile's children are always visible on desktop layout.)
-    const modalClass = isOpen ? css.isOpen : isClosedClassName;
+    const isOpenClass = usePortal ? css.isOpenInPortal : css.isOpenInPlace;
+    const modalClass = isOpen ? isOpenClass : isClosedClassName;
     const classes = classNames(modalClass, className);
     const scrollLayerClasses = scrollLayerClassName || css.scrollLayer;
     const containerClasses = containerClassName || css.container;

src/components/Modal/Modal.module.css

@@ -2,13 +2,6 @@
 
 /* Content is visible as modal layer */
 .isOpen {
-  display: flex;
-  flex-direction: column;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
   width: 100%;
   z-index: 100;
 
@@ -45,6 +38,34 @@
   }
 }
 
+.isOpenInPlace {
+  composes: isOpen;
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.isOpenInPortal {
+  composes: isOpen;
+  display: block;
+  height: calc(var(--vh, 1vh) * 100);
+  position: absolute;
+
+  @media (--viewportMedium) {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+}
+
 .content {
 }
 

src/containers/EditListingPage/EditListingPage.duck.js

@@ -167,7 +167,7 @@ export default function reducer(state = initialState, action = {}) {
     case SHOW_LISTINGS_REQUEST:
       return { ...state, showListingsError: null };
     case SHOW_LISTINGS_SUCCESS:
-      return state;
+      return { ...state, images: {}, imageOrder: [], removedImageIds: [] };
 
     case SHOW_LISTINGS_ERROR:
       // eslint-disable-next-line no-console

src/forms/BookingTimeForm/BookingTimeForm.module.css

@@ -15,7 +15,7 @@
 
 .priceBreakdownContainer {
   padding: 0 24px;
-  margin-bottom: 40px;
+  margin-bottom: 24px;
 
   @media (--viewportMedium) {
     padding: 0;

yarn.lock

@@ -6721,9 +6721,9 @@ flush-write-stream@^1.0.0:
     readable-stream "^2.3.6"
 
 follow-redirects@^1.0.0, follow-redirects@^1.14.0:
-  version "1.14.7"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.7.tgz#2004c02eb9436eee9a21446a6477debf17e81685"
-  integrity sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==
+  version "1.14.8"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.8.tgz#016996fb9a11a100566398b1c6839337d7bfa8fc"
+  integrity sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA==
 
 for-in@^1.0.2:
   version "1.0.2"
@@ -9637,9 +9637,9 @@ nan@^2.12.1:
   integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
 
 nanoid@^3.1.15:
-  version "3.1.16"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.16.tgz#b21f0a7d031196faf75314d7c65d36352beeef64"
-  integrity sha512-+AK8MN0WHji40lj8AEuwLOvLSbWYApQpre/aFJZD71r43wVRLrOYS4FmJOPQYon1TqB462RzrrxlfA74XRES8w==
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c"
+  integrity sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==
 
 nanomatch@^1.2.9:
   version "1.2.13"
@@ -14221,9 +14221,9 @@ url-parse-lax@^3.0.0:
     prepend-http "^2.0.0"
 
 url-parse@^1.4.3:
-  version "1.5.3"
-  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.3.tgz#71c1303d38fb6639ade183c2992c8cc0686df862"
-  integrity sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
+  integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
   dependencies:
     querystringify "^2.1.1"
     requires-port "^1.0.0"