Merge pull request #79 from sharetribe/update-v4.3.0-from-upstream

Update v4.3.0 from upstream
sharetribe · Mar 16, 2020 · 8046b77 · 8046b77
2 parents c4766c4 + 2603c88
commit 8046b77
Show file tree

Hide file tree

Showing 30 changed files with 720 additions and 367 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,27 @@ https://github.com/sharetribe/flex-template-web/
 
 ## Upcoming version 2020-XX-XX
 
+## [v6.3.0] 2020-03-16
+
+This is update from from [upstream](https://github.com/sharetribe/ftw-daily): v4.3.0
+
+- [change] Redirect user back to Stripe during Connect Onboarding Flow when user is returned to
+  failure URL provided that the Account Link generation is successful.
+  [#1269](https://github.com/sharetribe/ftw-daily/pull/1269)
+- [fix] Don't flash listing closed text on mobile view of `BookingPanel` when the listing data is
+  not loaded yet. Instead, check that text is shown only for closed listings.
+  [#1268](https://github.com/sharetribe/ftw-daily/pull/1268)
+- [change] Use some default values to improve Stripe Connect onboarding. When creating a new Stripe
+  the account we will pass the account type, business URL and MCC to Stripe in order to avoid a
+  couple of steps in Connect Onboarding. We will also pass `tos_shown_and_accepted` flag. This PR
+  will bring back the previously used `accountToken` which is now used for passing e.g. the account
+  type to Stripe. [#1267](https://github.com/sharetribe/ftw-daily/pull/1267)
+- [change] Update `Modal` component to have option to use `Portal` with `usePortal` flag. Keep also
+  possibility to use modals without Portal because of `ModalInMobile` component.
+  [#1258](https://github.com/sharetribe/ftw-daily/pull/1258)
+
+[v6.3.0]: https://github.com/sharetribe/ftw-hourly/compare/v6.2.0...v6.3.0
+
 ## [v6.2.0] 2020-02-18
 
 This is update from from [upstream](https://github.com/sharetribe/ftw-daily): v4.2.0

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "app",
-  "version": "v6.1.0",
+  "version": "v6.3.0",
   "private": true,
   "license": "Apache-2.0",
   "dependencies": {

diff --git a/src/components/BookingPanel/BookingPanel.js b/src/components/BookingPanel/BookingPanel.js
@@ -160,11 +160,11 @@ const BookingPanel = props => {
           >
             <FormattedMessage id="BookingPanel.ctaButtonMessage" />
           </Button>
-        ) : (
+        ) : isClosed ? (
           <div className={css.closedListingButton}>
             <FormattedMessage id="BookingPanel.closedListingButtonText" />
           </div>
-        )}
+        ) : null}
       </div>
     </div>
   );

diff --git a/src/components/EditListingAvailabilityPanel/EditListingAvailabilityPanel.js b/src/components/EditListingAvailabilityPanel/EditListingAvailabilityPanel.js
@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
 import { arrayOf, bool, func, object, string } from 'prop-types';
 import classNames from 'classnames';
 import { FormattedMessage } from '../../util/reactIntl';
@@ -29,42 +28,6 @@ const MAX_EXCEPTIONS_COUNT = 100;
 const defaultTimeZone = () =>
   typeof window !== 'undefined' ? getDefaultTimeZoneOnBrowser() : 'Etc/UTC';
 
-////////////
-// Portal //
-////////////
-
-// TODO: change all the modals to use portals at some point.
-// Portal is used here to circumvent the problems that rise
-// from different levels of z-indexes in DOM tree.
-// Note: React Portal didn't exist when we originally created modals.
-
-class Portal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.el = document.createElement('div');
-  }
-
-  componentDidMount() {
-    // The portal element is inserted in the DOM tree after
-    // the Modal's children are mounted, meaning that children
-    // will be mounted on a detached DOM node. If a child
-    // component requires to be attached to the DOM tree
-    // immediately when mounted, for example to measure a
-    // DOM node, or uses 'autoFocus' in a descendant, add
-    // state to Modal and only render the children when Modal
-    // is inserted in the DOM tree.
-    this.props.portalRoot.appendChild(this.el);
-  }
-
-  componentWillUnmount() {
-    this.props.portalRoot.removeChild(this.el);
-  }
-
-  render() {
-    return ReactDOM.createPortal(this.props.children, this.el);
-  }
-}
-
 /////////////
 // Weekday //
 /////////////
@@ -194,13 +157,8 @@ const EditListingAvailabilityPanel = props => {
   // Hooks
   const [isEditPlanModalOpen, setIsEditPlanModalOpen] = useState(false);
   const [isEditExceptionsModalOpen, setIsEditExceptionsModalOpen] = useState(false);
-  const [portalRoot, setPortalRoot] = useState(null);
   const [valuesFromLastSubmit, setValuesFromLastSubmit] = useState(null);
 
-  const setPortalRootAfterInitialRender = () => {
-    setPortalRoot(document.getElementById('portal-root'));
-  };
-
   const classes = classNames(rootClassName || css.root, className);
   const currentListing = ensureOwnListing(listing);
   const isNextButtonDisabled = !currentListing.attributes.availabilityPlan;
@@ -261,7 +219,7 @@ const EditListingAvailabilityPanel = props => {
   };
 
   return (
-    <main className={classes} ref={setPortalRootAfterInitialRender}>
+    <main className={classes}>
       <h1 className={css.title}>
         {isPublished ? (
           <FormattedMessage
@@ -393,47 +351,45 @@ const EditListingAvailabilityPanel = props => {
           {submitButtonText}
         </Button>
       ) : null}
-      {portalRoot && onManageDisableScrolling ? (
-        <Portal portalRoot={portalRoot}>
-          <Modal
-            id="EditAvailabilityPlan"
-            isOpen={isEditPlanModalOpen}
-            onClose={() => setIsEditPlanModalOpen(false)}
-            onManageDisableScrolling={onManageDisableScrolling}
-            containerClassName={css.modalContainer}
-          >
-            <EditListingAvailabilityPlanForm
-              formId="EditListingAvailabilityPlanForm"
-              listingTitle={currentListing.attributes.title}
-              availabilityPlan={availabilityPlan}
-              weekdays={WEEKDAYS}
-              onSubmit={handleSubmit}
-              initialValues={initialValues}
-              inProgress={updateInProgress}
-              fetchErrors={errors}
-            />
-          </Modal>
-        </Portal>
+      {onManageDisableScrolling ? (
+        <Modal
+          id="EditAvailabilityPlan"
+          isOpen={isEditPlanModalOpen}
+          onClose={() => setIsEditPlanModalOpen(false)}
+          onManageDisableScrolling={onManageDisableScrolling}
+          containerClassName={css.modalContainer}
+          usePortal
+        >
+          <EditListingAvailabilityPlanForm
+            formId="EditListingAvailabilityPlanForm"
+            listingTitle={currentListing.attributes.title}
+            availabilityPlan={availabilityPlan}
+            weekdays={WEEKDAYS}
+            onSubmit={handleSubmit}
+            initialValues={initialValues}
+            inProgress={updateInProgress}
+            fetchErrors={errors}
+          />
+        </Modal>
       ) : null}
-      {portalRoot && onManageDisableScrolling ? (
-        <Portal portalRoot={portalRoot}>
-          <Modal
-            id="EditAvailabilityExceptions"
-            isOpen={isEditExceptionsModalOpen}
-            onClose={() => setIsEditExceptionsModalOpen(false)}
-            onManageDisableScrolling={onManageDisableScrolling}
-            containerClassName={css.modalContainer}
-          >
-            <EditListingAvailabilityExceptionForm
-              formId="EditListingAvailabilityExceptionForm"
-              onSubmit={saveException}
-              timeZone={availabilityPlan.timezone}
-              availabilityExceptions={sortedAvailabilityExceptions}
-              updateInProgress={updateInProgress}
-              fetchErrors={errors}
-            />
-          </Modal>
-        </Portal>
+      {onManageDisableScrolling ? (
+        <Modal
+          id="EditAvailabilityExceptions"
+          isOpen={isEditExceptionsModalOpen}
+          onClose={() => setIsEditExceptionsModalOpen(false)}
+          onManageDisableScrolling={onManageDisableScrolling}
+          containerClassName={css.modalContainer}
+          usePortal
+        >
+          <EditListingAvailabilityExceptionForm
+            formId="EditListingAvailabilityExceptionForm"
+            onSubmit={saveException}
+            timeZone={availabilityPlan.timezone}
+            availabilityExceptions={sortedAvailabilityExceptions}
+            updateInProgress={updateInProgress}
+            fetchErrors={errors}
+          />
+        </Modal>
       ) : null}
     </main>
   );

diff --git a/src/components/EditListingWizard/EditListingWizard.css b/src/components/EditListingWizard/EditListingWizard.css
@@ -112,3 +112,7 @@
     padding-top: 11px;
   }
 }
+
+.modalMessage {
+  @apply --marketplaceModalParagraphStyles;
+}