Merge pull request #229 from sharetribe/update-v10.1.0-from-upstream

Update v10.1.0 from upstream

CHANGELOG.md

@@ -17,9 +17,24 @@ https://github.com/sharetribe/flex-template-web/
 
 ## Upcoming version 2023-XX-XX
 
+## [v12.1.0] 2023-02-28
+
 - [fix] AuthenticationPage.duck.js: had wrong asset name.
   [#228](https://github.com/sharetribe/ftw-hourly/pull/228)
 
+### Updates from upstream (FTW-daily v10.1.0)
+
+- [change] remove background-color from images (to allow opacity).
+  [#1590](https://github.com/sharetribe/ftw-daily/pull/1590)
+- [change] improve error handling possibilities on PageBuilder.
+  [#1589](https://github.com/sharetribe/ftw-daily/pull/1589)
+- [fix] AuthenticationPage.duck.js: had wrong asset name.
+  [#1588](https://github.com/sharetribe/ftw-daily/pull/1588)
+- [change] P.js: remove requirement for mandatory children.
+  [#1587](https://github.com/sharetribe/ftw-daily/pull/1587)
+
+  [v12.1.0]: https://github.com/sharetribe/ftw-hourly/compare/v12.0.0.../v12.1.0
+
 ## [v12.0.0] 2023-02-14
 
 ### Updates from upstream (FTW-daily v10.0.0)

package.json

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

src/containers/LandingPage/FallbackPage.js

@@ -3,11 +3,13 @@ import PageBuilder from '../PageBuilder/PageBuilder';
 import css from './FallbackPage.module.css';
 
 // Create fallback content (array of sections) in page asset format:
-export const fallbackSections = {
+export const fallbackSections = error => ({
   sections: [
     {
       sectionType: 'customMaintenance',
       sectionId: 'maintenance-mode',
+      // pass possible error to SectionMaintenanceMode component
+      error,
     },
   ],
   meta: {
@@ -20,37 +22,50 @@ export const fallbackSections = {
       content: 'Home page fetch failed',
     },
   },
-};
+});
 
 // Note: this microcopy/translation does not come from translation file.
 //       It needs to be something that is not part of fetched assets but built-in text
 const SectionMaintenanceMode = props => {
-  const { sectionId } = props;
+  const { sectionId, error } = props;
+  // 404 means that the landing-page asset was not found from the expected asset path
+  // which is defined in config.js
+  const is404 = error?.status === 404;
 
   return (
     <section id={sectionId} className={css.root}>
-      <div className={css.content}>
-        <h1>Maintenance mode</h1>
-        <p>
-          The marketplace is not fully operational at the moment. Try refreshing the page and if
-          that does not solve the issue, contact the marketplace admins.
-        </p>
-      </div>
+      {is404 ? (
+        <div className={css.content}>
+          <h2>Maintenance mode</h2>
+          <p>
+            The marketplace is not fully operational at the moment.
+            <br />
+            Try refreshing the page and if that does not solve the issue, contact the marketplace
+            admins.
+          </p>
+        </div>
+      ) : (
+        <div className={css.content}>
+          <h2>Oops, something went wrong!</h2>
+          <p>{error?.message}</p>
+        </div>
+      )}
     </section>
   );
 };
 
 // This is the fallback page, in case there's no Landing Page asset defined in Console.
 const FallbackPage = props => {
+  const { error, ...rest } = props;
   return (
     <PageBuilder
-      pageAssetsData={fallbackSections}
+      pageAssetsData={fallbackSections(error)}
       options={{
         sectionComponents: {
           customMaintenance: { component: SectionMaintenanceMode },
         },
       }}
-      {...props}
+      {...rest}
     />
   );
 };

src/containers/LandingPage/LandingPage.js

@@ -2,38 +2,37 @@ import React from 'react';
 import { bool, object } from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
 
-import { injectIntl, intlShape } from '../../util/reactIntl';
 import { camelize } from '../../util/string';
+import { propTypes } from '../../util/types';
 
 import PageBuilder from '../../containers/PageBuilder/PageBuilder';
 
 import FallbackPage from './FallbackPage';
 import { ASSET_NAME } from './LandingPage.duck';
 
 export const LandingPageComponent = props => {
-  const { pageAssetsData, inProgress } = props;
+  const { pageAssetsData, inProgress, error } = props;
 
   return (
     <PageBuilder
       pageAssetsData={pageAssetsData?.[camelize(ASSET_NAME)]?.data}
       inProgress={inProgress}
-      fallbackPage={<FallbackPage />}
+      error={error}
+      fallbackPage={<FallbackPage error={error} />}
     />
   );
 };
 
 LandingPageComponent.propTypes = {
-  // from injectIntl
-  intl: intlShape.isRequired,
   pageAssetsData: object,
   inProgress: bool,
+  error: propTypes.error,
 };
 
 const mapStateToProps = state => {
-  const { pageAssetsData, inProgress } = state.hostedAssets || {};
-  return { pageAssetsData, inProgress };
+  const { pageAssetsData, inProgress, error } = state.hostedAssets || {};
+  return { pageAssetsData, inProgress, error };
 };
 
 // Note: it is important that the withRouter HOC is **outside** the
@@ -42,10 +41,6 @@ const mapStateToProps = state => {
 // lifecycle hook.
 //
 // See: https://github.com/ReactTraining/react-router/issues/4671
-const LandingPage = compose(
-  withRouter,
-  connect(mapStateToProps),
-  injectIntl
-)(LandingPageComponent);
+const LandingPage = compose(connect(mapStateToProps))(LandingPageComponent);
 
 export default LandingPage;

src/containers/PageBuilder/BlockBuilder/BlockDefault/BlockDefault.module.css

@@ -3,7 +3,6 @@
 
 .media {
   width: 100%;
-  background-color: var(--matterColorNegative); /* Loading state color for the images */
   border-radius: 8px;
   margin-bottom: 0;
 }

src/containers/PageBuilder/PageBuilder.js

@@ -73,9 +73,17 @@ const getMetadata = (meta, schemaType, fieldOptions) => {
  * @returns page component
  */
 const PageBuilder = props => {
-  const { pageAssetsData, inProgress, fallbackPage, schemaType, options, ...pageProps } = props;
+  const {
+    pageAssetsData,
+    inProgress,
+    error,
+    fallbackPage,
+    schemaType,
+    options,
+    ...pageProps
+  } = props;
 
-  if (!pageAssetsData && fallbackPage && !inProgress) {
+  if (!pageAssetsData && fallbackPage && !inProgress && error) {
     return fallbackPage;
   }
 

src/containers/PageBuilder/Primitives/Image/Image.js

@@ -40,7 +40,7 @@ export const FieldImage = React.forwardRef((props, ref) => {
   const firstImageVariant = variants[variantNames[0]];
   const { width: aspectWidth, height: aspectHeight } = firstImageVariant || {};
 
-  const classes = classNames(rootClassName || css.markdownImage, className);
+  const classes = classNames(rootClassName || css.fieldImage, className);
   return (
     <AspectRatioWrapper className={classes} width={aspectWidth || 1} height={aspectHeight || 1}>
       <ResponsiveImage

src/containers/PageBuilder/Primitives/Image/Image.module.css

@@ -1,5 +1,9 @@
 .markdownImage {
-  width: 100%;
+  /**
+   * Note: markdown images might be too small for filling the space.
+   */
+  width: auto;
+  max-width: 100%;
   border-radius: 8px;
   object-fit: cover;
 }

src/containers/PrivacyPolicyPage/PrivacyPolicyPage.js

@@ -2,10 +2,9 @@ import React from 'react';
 import { bool, object } from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
 
-import { injectIntl, intlShape } from '../../util/reactIntl';
 import { camelize } from '../../util/string';
+import { propTypes } from '../../util/types';
 
 import { H1 } from '../PageBuilder/Primitives/Heading';
 import PageBuilder, { SectionBuilder } from '../../containers/PageBuilder/PageBuilder';
@@ -47,27 +46,27 @@ const PrivacyPolicyContent = props => {
 
 // Presentational component for PrivacyPolicyPage
 const PrivacyPolicyPageComponent = props => {
-  const { pageAssetsData, inProgress } = props;
+  const { pageAssetsData, inProgress, error } = props;
 
   return (
     <PageBuilder
       pageAssetsData={pageAssetsData?.[camelize(ASSET_NAME)]?.data}
       inProgress={inProgress}
+      error={error}
       fallbackPage={<FallbackPage />}
     />
   );
 };
 
 PrivacyPolicyPageComponent.propTypes = {
-  // from injectIntl
-  intl: intlShape.isRequired,
   pageAssetsData: object,
   inProgress: bool,
+  error: propTypes.error,
 };
 
 const mapStateToProps = state => {
-  const { pageAssetsData, inProgress } = state.hostedAssets || {};
-  return { pageAssetsData, inProgress };
+  const { pageAssetsData, inProgress, error } = state.hostedAssets || {};
+  return { pageAssetsData, inProgress, error };
 };
 
 // Note: it is important that the withRouter HOC is **outside** the
@@ -76,11 +75,7 @@ const mapStateToProps = state => {
 // lifecycle hook.
 //
 // See: https://github.com/ReactTraining/react-router/issues/4671
-const PrivacyPolicyPage = compose(
-  withRouter,
-  connect(mapStateToProps),
-  injectIntl
-)(PrivacyPolicyPageComponent);
+const PrivacyPolicyPage = compose(connect(mapStateToProps))(PrivacyPolicyPageComponent);
 
 const PRIVACY_POLICY_ASSET_NAME = ASSET_NAME;
 export { PRIVACY_POLICY_ASSET_NAME, PrivacyPolicyPageComponent, PrivacyPolicyContent };

src/containers/TermsOfServicePage/TermsOfServicePage.js

@@ -2,11 +2,9 @@ import React from 'react';
 import { bool, object } from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
 
-import config from '../../config';
-import { injectIntl, intlShape } from '../../util/reactIntl';
 import { camelize } from '../../util/string';
+import { propTypes } from '../../util/types';
 
 import { H1 } from '../PageBuilder/Primitives/Heading';
 import PageBuilder, { SectionBuilder } from '../../containers/PageBuilder/PageBuilder';
@@ -48,27 +46,27 @@ const TermsOfServiceContent = props => {
 
 // Presentational component for TermsOfServicePage
 const TermsOfServicePageComponent = props => {
-  const { pageAssetsData, inProgress } = props;
+  const { pageAssetsData, inProgress, error } = props;
 
   return (
     <PageBuilder
       pageAssetsData={pageAssetsData?.[camelize(ASSET_NAME)]?.data}
       inProgress={inProgress}
+      error={error}
       fallbackPage={<FallbackPage />}
     />
   );
 };
 
 TermsOfServicePageComponent.propTypes = {
-  // from injectIntl
-  intl: intlShape.isRequired,
   pageAssetsData: object,
   inProgress: bool,
+  error: propTypes.error,
 };
 
 const mapStateToProps = state => {
-  const { pageAssetsData, inProgress } = state.hostedAssets || {};
-  return { pageAssetsData, inProgress };
+  const { pageAssetsData, inProgress, error } = state.hostedAssets || {};
+  return { pageAssetsData, inProgress, error };
 };
 
 // Note: it is important that the withRouter HOC is **outside** the
@@ -77,11 +75,7 @@ const mapStateToProps = state => {
 // lifecycle hook.
 //
 // See: https://github.com/ReactTraining/react-router/issues/4671
-const TermsOfServicePage = compose(
-  withRouter,
-  connect(mapStateToProps),
-  injectIntl
-)(TermsOfServicePageComponent);
+const TermsOfServicePage = compose(connect(mapStateToProps))(TermsOfServicePageComponent);
 
 const TOS_ASSET_NAME = ASSET_NAME;
 export { TOS_ASSET_NAME, TermsOfServicePageComponent, TermsOfServiceContent };