Merge pull request #112 from sharetribe/update-v8.3.0-from-upstream

Update v8.3.0 from upstream
sharetribe · Aug 19, 2020 · 04f5952 · 04f5952
2 parents 8a9aeff + ad92921
commit 04f5952
Show file tree

Hide file tree

Showing 57 changed files with 337 additions and 409 deletions.
diff --git a/.env-template b/.env-template
@@ -27,13 +27,16 @@ REACT_APP_CANONICAL_ROOT_URL=http://localhost:3000
 REACT_APP_ENV=production
 
 
+# CSP. You can use value 'report' or 'block'.
+# If the env varibale is missing, csp is disabled.
+REACT_APP_CSP=report
+
 # Options. Uncomment and set to test.
 #
 
 # REACT_APP_SHARETRIBE_USING_SSL=true
 # SERVER_SHARETRIBE_TRUST_PROXY=true
 # REACT_APP_SENTRY_DSN=change-me
-# REACT_APP_CSP=report
 # BASIC_AUTH_USERNAME=sharetribe
 # BASIC_AUTH_PASSWORD=secret
 # REACT_APP_GOOGLE_ANALYTICS_ID=change-me

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,12 +17,29 @@ https://github.com/sharetribe/flex-template-web/
 
 ## Upcoming version 2020-XX-XX
 
+## [v8.3.0] 2020-08-19
+
+### Updates from upstream (FTW-daily v6.2.0)
+
+- [change] We decided to change the default font to Poppins.
+  [#1349](https://github.com/sharetribe/ftw-daily/pull/1349)
+- [change] Update path-to-regexp to v6.1.0
+  [#1348](https://github.com/sharetribe/ftw-daily/pull/1348)
+- [change] Update Helmet to v4.0.0. Show warning if environment variable REACT_APP_CSP is not set or
+  if it's set to 'report' mode in production environmet. Set REACT_APP_CSP to 'report' mode by
+  default in `.env-template` file. [#1347](https://github.com/sharetribe/ftw-daily/pull/1347)
+- [change] In `StripeConnectAccountForm` show error message from Stripe if there is one when
+  fetching account link. [#1346](https://github.com/sharetribe/ftw-daily/pull/1346)
+
+[v8.3.0]: https://github.com/sharetribe/ftw-hourly/compare/v8.2.0...v8.3.0
+
 ## [v8.2.0] 2020-08-12
 
 ### Updates from upstream (FTW-daily v6.2.0)
 
 - [fix] remove typo [#1343](https://github.com/sharetribe/ftw-daily/pull/1343)
-- [change] Request custom image variants for avatar [#1342](https://github.com/sharetribe/ftw-daily/pull/1342)
+- [change] Request custom image variants for avatar
+  [#1342](https://github.com/sharetribe/ftw-daily/pull/1342)
 - [change] Some dependency updates [#1337](https://github.com/sharetribe/ftw-daily/pull/1337)
 - [fix] Use Stripe's `confirmCardPayment` function instead of deprecated `handleCardPayment` to
   confirm PaymentIntent. In addition to the rename, the arguments passed to `handleCardPayment` are

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "app",
-  "version": "8.2.0",
+  "version": "8.3.0",
   "private": true,
   "license": "Apache-2.0",
   "dependencies": {
@@ -27,7 +27,7 @@
     "final-form": "^4.20.1",
     "final-form-arrays": "^3.0.2",
     "full-icu": "^1.3.1",
-    "helmet": "^3.21.2",
+    "helmet": "^4.0.0",
     "intl-pluralrules": "^1.0.3",
     "jstimezonedetect": "^1.0.7",
     "lodash": "^4.17.19",
@@ -36,7 +36,7 @@
     "moment-timezone": "^0.5.26",
     "object.entries": "^1.1.2",
     "object.values": "^1.1.1",
-    "path-to-regexp": "^3.0.0",
+    "path-to-regexp": "^6.1.0",
     "prop-types": "^15.7.2",
     "query-string": "^6.13.1",
     "raf": "^3.4.0",

diff --git a/public/500.html b/public/500.html
@@ -9,34 +9,31 @@
     <style>
 
      /**
-      * The fonts included are copyrighted by the vendor listed below.
-      *
-      * Vendor:      Mostardesign
-      * License URL: https://www.fontspring.com/licenses/mostardesign/webfont
+      * Poppins font is downloaded from Google Fonts
+      * but served from sharetribe.com assets.
       *
+      * https://fonts.google.com/specimen/Poppins
       */
+
       @font-face {
-          font-family: 'sofiapro';
-          src: url('https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-medium-webfont.woff2') format('woff2'),
-               url('https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-medium-webfont.woff') format('woff');
-          font-weight: 500; /* Medium */
-          font-style: normal;
+        font-family: 'poppins';
+        src: url('https://assets-sharetribecom.sharetribe.com/webfonts/poppins/Poppins-Medium.ttf') format('truetype');
+        font-weight: 500; /* Medium */
+        font-style: normal;
       }
 
       @font-face {
-          font-family: 'sofiapro';
-          src: url('https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-semibold-webfont.woff2') format('woff2'),
-               url('https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-semibold-webfont.woff') format('woff');
-          font-weight: 600; /* SemiBold */
-          font-style: normal;
+        font-family: 'poppins';
+        src: url('https://assets-sharetribecom.sharetribe.com/webfonts/poppins/Poppins-SemiBold.ttf') format('truetype');
+        font-weight: 600; /* SemiBold */
+        font-style: normal;
       }
 
       @font-face {
-          font-family: 'sofiapro';
-          src: url('https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-bold-webfont.woff2') format('woff2'),
-               url('https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-bold-webfont.woff') format('woff');
-          font-weight: 700; /* Bold */
-          font-style: normal;
+        font-family: 'poppins';
+        src: url('https://assets-sharetribecom.sharetribe.com/webfonts/poppins/Poppins-Bold.ttf') format('truetype');
+        font-weight: 700; /* Bold */
+        font-style: normal;
       }
 
       body {
@@ -125,7 +122,7 @@
       }
 
       .fontsLoaded body {
-        font-family: sofiapro, Helvetica, Arial, sans-serif;
+        font-family: poppins, Helvetica, Arial, sans-serif;
         opacity: 1;
       }
 
@@ -198,11 +195,11 @@ <h1>Sorry, it seems we did something wrong.</h1>
             return;
           }
 
-          var sofiaproMedium = new FontFace('sofiapro', 'url("https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-medium-webfont.woff2") format("woff2"), url("https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-medium-webfont.woff") format("woff")', { style: 'normal', weight: '500' });
-          var sofiaproSemibold = new FontFace('sofiapro', 'url("https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-semibold-webfont.woff2") format("woff2"), url("https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-semibold-webfont.woff") format("woff")', { style: 'normal', weight: '600' });
-          var sofiaproBold = new FontFace('sofiapro', 'url("https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-bold-webfont.woff2") format("woff2"), url("https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-bold-webfont.woff") format("woff")', { style: 'normal', weight: '700' });
+          var poppinsMedium = new FontFace('poppins', 'url("https://assets-sharetribecom.sharetribe.com/webfonts/poppins/Poppins-Medium.ttf") format("truetype")', { style: 'normal', weight: '500' });
+          var poppinsSemibold = new FontFace('poppins', 'url("https://assets-sharetribecom.sharetribe.com/webfonts/poppins/Poppins-SemiBold.ttf") format("truetype")', { style: 'normal', weight: '600' });
+          var poppinsBold = new FontFace('poppins', 'url("https://assets-sharetribecom.sharetribe.com/webfonts/poppins/Poppins-Bold.ttf") format("truetype")', { style: 'normal', weight: '700' });
 
-          Promise.all([sofiaproMedium.load(), sofiaproSemibold.load(), sofiaproBold.load()])
+          Promise.all([poppinsMedium.load(), poppinsSemibold.load(), poppinsBold.load()])
             .then(function(values) {
               values.forEach(function(f) {
                 document.fonts.add(f);

diff --git a/public/index.html b/public/index.html
@@ -24,52 +24,43 @@
 
     <style>
      /**
-      * The fonts included are copyrighted by the vendor listed below.
-      *
-      * Vendor:      Mostardesign
-      * License URL: https://www.fontspring.com/licenses/mostardesign/webfont
-      *
+      * Poppins font is downloaded from Google Fonts but served from sharetribe.com / CDN
       */
 
       @font-face {
-        /* 'SofiaPro-Regular' */
-        font-family: 'sofiapro';
-        src: url('https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-regular-webfont.woff2') format('woff2'),
-             url('https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-regular-webfont.woff') format('woff');
+        /* 'Poppins-Regular' */
+        font-family: 'poppins';
+        src: url('https://assets-sharetribecom.sharetribe.com/webfonts/poppins/Poppins-Regular.ttf') format('truetype');
         font-weight: 400; /* Regular */
         font-style: normal;
       }
 
       @font-face {
-          font-family: 'sofiapro';
-          src: url('https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-medium-webfont.woff2') format('woff2'),
-               url('https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-medium-webfont.woff') format('woff');
-          font-weight: 500; /* Medium */
-          font-style: normal;
+        font-family: 'poppins';
+        src: url('https://assets-sharetribecom.sharetribe.com/webfonts/poppins/Poppins-Medium.ttf') format('truetype');
+        font-weight: 500; /* Medium */
+        font-style: normal;
       }
 
       @font-face {
-          font-family: 'sofiapro';
-          src: url('https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-mediumit-webfont.woff2') format('woff2'),
-               url('https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-mediumit-webfont.woff') format('woff');
-          font-weight: 500; /* Medium italics */
-          font-style: italic;
+        font-family: 'poppins';
+        src: url('https://assets-sharetribecom.sharetribe.com/webfonts/poppins/Poppins-MediumItalic.ttf') format('truetype');
+        font-weight: 500; /* Medium italics */
+        font-style: italic;
       }
 
       @font-face {
-          font-family: 'sofiapro';
-          src: url('https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-semibold-webfont.woff2') format('woff2'),
-               url('https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-semibold-webfont.woff') format('woff');
-          font-weight: 600; /* SemiBold */
-          font-style: normal;
+        font-family: 'poppins';
+        src: url('https://assets-sharetribecom.sharetribe.com/webfonts/poppins/Poppins-SemiBold.ttf') format('truetype');
+        font-weight: 600; /* SemiBold */
+        font-style: normal;
       }
 
       @font-face {
-          font-family: 'sofiapro';
-          src: url('https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-bold-webfont.woff2') format('woff2'),
-               url('https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-bold-webfont.woff') format('woff');
-          font-weight: 700; /* Bold */
-          font-style: normal;
+        font-family: 'poppins';
+        src: url('https://assets-sharetribecom.sharetribe.com/webfonts/poppins/Poppins-Bold.ttf') format('truetype');
+        font-weight: 700; /* Bold */
+        font-style: normal;
       }
 
     </style>
@@ -118,18 +109,18 @@
 
 
         // Fonts we use (Check font-face rules from <style> tag in <head> section)
-        var sofiaproRegular = new FontFaceObserver('sofiapro', { weight: 400 });
-        var sofiaproMedium = new FontFaceObserver('sofiapro', { weight: 500 });
-        var sofiaproSemibold = new FontFaceObserver('sofiapro', { weight: 600 });
-        var sofiaproBold = new FontFaceObserver('sofiapro', { weight: 700 });
+        var poppinsRegular = new FontFaceObserver('poppins', { weight: 400 });
+        var poppinsMedium = new FontFaceObserver('poppins', { weight: 500 });
+        var poppinsSemibold = new FontFaceObserver('poppins', { weight: 600 });
+        var poppinsBold = new FontFaceObserver('poppins', { weight: 700 });
 
         var fontLoadingTimeout = 5000;
 
         Promise.all([
-          sofiaproRegular.load(null, fontLoadingTimeout),
-          sofiaproMedium.load(null, fontLoadingTimeout),
-          sofiaproSemibold.load(null, fontLoadingTimeout),
-          sofiaproBold.load(null, fontLoadingTimeout)
+          poppinsRegular.load(null, fontLoadingTimeout),
+          poppinsMedium.load(null, fontLoadingTimeout),
+          poppinsSemibold.load(null, fontLoadingTimeout),
+          poppinsBold.load(null, fontLoadingTimeout)
         ])
           .then(function () {
             document.documentElement.classList.add("fontsLoaded");

diff --git a/server/csp.js b/server/csp.js
@@ -102,14 +102,15 @@ module.exports = (reportUri, enforceSsl, reportOnly) => {
 
   // ================ END CUSTOM CSP URLs ================ //
 
-  const directives = Object.assign(
-    {
-      reportUri,
-      blockAllMixedContent: enforceSsl,
-    },
-    defaultDirectives,
-    customDirectives
-  );
+  // Helmet v4 expects every value to be iterable so strings or booleans are not supported directly
+  // If we want to add block-all-mixed-content directive we need to add empty array to directives
+  // See Helmet's default directives:
+  // https://github.com/helmetjs/helmet/blob/bdb09348c17c78698b0c94f0f6cc6b3968cd43f9/middlewares/content-security-policy/index.ts#L51
+
+  const directives = Object.assign({ reportUri: [reportUri] }, defaultDirectives, customDirectives);
+  if (enforceSsl) {
+    directives.blockAllMixedContent = [];
+  }
 
   // See: https://helmetjs.github.io/docs/csp/
   return helmet.contentSecurityPolicy({

diff --git a/server/index.js b/server/index.js
@@ -69,7 +69,14 @@ app.use(log.requestHandler());
 
 // The helmet middleware sets various HTTP headers to improve security.
 // See: https://www.npmjs.com/package/helmet
-app.use(helmet());
+// Helmet 4 doesn't disable CSP by default so we need to do that explicitly.
+// If csp is enabled we will add that separately.
+
+app.use(
+  helmet({
+    contentSecurityPolicy: false,
+  })
+);
 
 if (cspEnabled) {
   // When a CSP directive is violated, the browser posts a JSON body
@@ -84,8 +91,13 @@ if (cspEnabled) {
   // browser checks the policy and calls the report URL when the
   // policy is violated, but doesn't block any requests. In block
   // mode, the browser also blocks the requests.
+
+  // In Helmet 4,supplying functions as directive values is not supported.
+  // That's why we need to create own middleware function that calls the Helmet's middleware function
   const reportOnly = CSP === 'report';
-  app.use(csp(cspReportUrl, USING_SSL, reportOnly));
+  app.use((req, res, next) => {
+    csp(cspReportUrl, USING_SSL, reportOnly)(req, res, next);
+  });
 }
 
 // Redirect HTTP to HTTPS if USING_SSL is `true`.

diff --git a/src/components/Avatar/Avatar.css b/src/components/Avatar/Avatar.css
@@ -16,7 +16,7 @@
 
   /* Base for all avatars */
   --Avatar_base: {
-    font-family: 'sofiapro', Helvetica, Arial, sans-serif;
+    font-family: 'poppins', Helvetica, Arial, sans-serif;
     border-radius: 50%;
 
     /* Position possible initials to the center of the component */
@@ -54,7 +54,6 @@
 .initials {
   font-size: 14px;
   font-weight: var(--fontWeightBold);
-  padding-bottom: 4px;
 }
 
 .avatarImage {
@@ -76,7 +75,6 @@
 .mediumAvatar .initials {
   font-size: 26px;
   font-weight: var(--fontWeightSemiBold);
-  padding-bottom: 5px;
 }
 
 /* Large Avatar */
@@ -92,7 +90,6 @@
 .largeAvatar .initials {
   font-size: 30px;
   font-weight: var(--fontWeightSemiBold);
-  padding-bottom: 6px;
 }
 
 .bannedUserIcon {

diff --git a/src/components/BookingBreakdown/BookingBreakdown.css b/src/components/BookingBreakdown/BookingBreakdown.css
@@ -112,7 +112,7 @@
 }
 
 .totalLabel {
-  font-weight: var(--fontWeightNormal);
+  @apply --marketplaceSmallFontStyles;
 }
 
 .totalPrice {

diff --git a/src/components/BookingPanel/BookingPanel.css b/src/components/BookingPanel/BookingPanel.css
@@ -71,8 +71,7 @@
 
   @media (--viewportLarge) {
     display: block;
-    margin-top: -2px;
-    margin-bottom: 33px;
+    margin-bottom: 30px;
   }
 }
 .desktopPriceContainer {
@@ -107,7 +106,7 @@
 
   @media (--viewportMedium) {
     margin-top: 0;
-    margin-bottom: 6px;
+    margin-bottom: 12px;
     margin-left: 6px;
   }
 }
@@ -118,7 +117,7 @@
   color: var(--matterColor);
 
   margin-top: 0;
-  margin-bottom: 9px;
+  margin-bottom: 2px;
 }
 
 .bookingHelp {