Merge pull request #111 from sharetribe/update-v8.2.0-from-upstream

Update v8.2.0 from upstream

CHANGELOG.md

@@ -17,6 +17,20 @@ https://github.com/sharetribe/flex-template-web/
 
 ## Upcoming version 2020-XX-XX
 
+## [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] 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
+  sligthly different. Otherwise, these changes should not affect the behavior of the function.
+  [#1339](https://github.com/sharetribe/ftw-daily/pull/1339)
+
+[v8.2.0]: https://github.com/sharetribe/ftw-hourly/compare/v8.1.1...v8.2.0
+
 ## [v8.1.1] 2020-07-21
 
 - [fix] Fix config script for NodeJS v14.5.0

README.md

@@ -49,6 +49,25 @@ reference in Flex Docs.
 > [How to Customize FTW](https://www.sharetribe.com/docs/guides/how-to-customize-ftw/) guide in Flex
 > Docs.
 
+### For Windows users
+
+Change `export` to `set` in the package.json file if you're using Windows/DOS. You need to do the
+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-server": "set NODE_ENV=development PORT=4000 REACT_APP_CANONICAL_ROOT_URL=http://localhost:4000&&yarn run build&&nodemon --watch server server/index.js"
+```
+
+We strongly recommend installing
+[Windows Subsystem for Linux](https://docs.microsoft.com/en-us/windows/wsl/about), if you are
+developing on Windows. These templates are made for Unix-like web services which is the most common
+environment type on host-services for web apps. Also, Flex Docs uses Unix-like commands in articles
+instead of DOS commands.
+
 ## Getting started with your own customization
 
 If you want to build your own Flex marketplace by customizing the template application, see the

package.json

@@ -1,60 +1,60 @@
 {
   "name": "app",
-  "version": "8.1.1",
+  "version": "8.2.0",
   "private": true,
   "license": "Apache-2.0",
   "dependencies": {
     "@formatjs/intl-relativetimeformat": "^4.2.1",
-    "@mapbox/polyline": "^1.0.0",
-    "@sentry/browser": "5.7.1",
-    "@sentry/node": "5.7.1",
-    "array-includes": "^3.0.3",
+    "@mapbox/polyline": "^1.1.1",
+    "@sentry/browser": "5.20.1",
+    "@sentry/node": "5.20.1",
+    "array-includes": "^3.1.1",
     "array.prototype.find": "^2.1.1",
     "autosize": "^4.0.0",
     "basic-auth": "^2.0.1",
     "body-parser": "^1.18.3",
     "classnames": "^2.2.6",
     "compression": "^1.7.4",
     "cookie-parser": "^1.4.5",
-    "core-js": "^3.1.4",
+    "core-js": "^3.6.5",
     "cors": "^2.8.5",
     "decimal.js": "10.2.0",
     "dotenv": "6.2.0",
     "dotenv-expand": "4.2.0",
     "express": "^4.16.4",
     "express-enforces-ssl": "^1.1.0",
     "express-sitemap": "^1.8.0",
-    "final-form": "^4.18.5",
+    "final-form": "^4.20.1",
     "final-form-arrays": "^3.0.2",
     "full-icu": "^1.3.1",
     "helmet": "^3.21.2",
     "intl-pluralrules": "^1.0.3",
     "jstimezonedetect": "^1.0.7",
-    "lodash": "^4.17.14",
+    "lodash": "^4.17.19",
     "mapbox-gl-multitouch": "^1.0.3",
     "moment": "^2.22.2",
     "moment-timezone": "^0.5.26",
-    "object.entries": "^1.1.1",
+    "object.entries": "^1.1.2",
     "object.values": "^1.1.1",
     "path-to-regexp": "^3.0.0",
     "prop-types": "^15.7.2",
-    "query-string": "^5.1.1",
+    "query-string": "^6.13.1",
     "raf": "^3.4.0",
-    "react": "^16.9.0",
+    "react": "^16.13.1",
     "react-dates": "^21.3.1",
-    "react-dom": "^16.9.0",
-    "react-final-form": "^6.3.0",
-    "react-final-form-arrays": "^3.1.1",
+    "react-dom": "^16.13.1",
+    "react-final-form": "^6.5.1",
+    "react-final-form-arrays": "^3.1.2",
     "react-google-maps": "^9.4.5",
     "react-helmet-async": "^1.0.6",
     "react-intl": "^3.1.13",
     "react-moment-proptypes": "^1.6.0",
-    "react-redux": "^7.1.1",
-    "react-router-dom": "^5.0.1",
+    "react-redux": "^7.2.1",
+    "react-router-dom": "^5.2.0",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "seedrandom": "^3.0.5",
-    "sharetribe-flex-sdk": "1.11.0",
+    "sharetribe-flex-sdk": "1.12.0",
     "sharetribe-scripts": "3.1.1",
     "smoothscroll-polyfill": "^0.4.0",
     "source-map-support": "^0.5.9",
@@ -63,19 +63,19 @@
   "devDependencies": {
     "babel-jest": "24.9.0",
     "bfj": "^7.0.2",
-    "chalk": "^2.4.1",
-    "concurrently": "^5.2.0",
-    "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.12.0",
-    "enzyme-to-json": "^3.4.4",
-    "inquirer": "^7.0.0",
-    "nodemon": "^1.17.2",
+    "chalk": "^v4.1.0",
+    "concurrently": "^5.3.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "enzyme-to-json": "^3.5.0",
+    "inquirer": "^7.3.3",
+    "nodemon": "^2.0.4",
     "prettier": "^1.18.2"
   },
   "resolutions": {
-    "react-dates/lodash": "^4.17.14",
-    "react-google-maps/lodash": "^4.17.14",
-    "react-test-renderer": "^16.9.0",
+    "react-dates/lodash": "^4.17.19",
+    "react-google-maps/lodash": "^4.17.19",
+    "react-test-renderer": "^16.13.1",
     "handlebars": "^4.5.3",
     "serialize-javascript": "^2.1.1"
   },

src/components/Avatar/Avatar.js

@@ -19,6 +19,12 @@ const AVATAR_SIZES_MEDIUM = '60px';
 const AVATAR_SIZES_LARGE = '96px';
 
 const AVATAR_IMAGE_VARIANTS = [
+  // 40x40
+  'square-xsmall',
+
+  // 80x80
+  'square-xsmall2x',
+
   // 240x240
   'square-small',
 

src/components/FieldDateInput/FieldDateInput.js

@@ -64,7 +64,7 @@ class FieldDateInputComponent extends Component {
       [css.pickerError]: hasError,
     });
 
-    const { onBlur, onFocus, onChange: finalFormOnChange, type, ...restOfInput } = input;
+    const { onBlur, onFocus, onChange: finalFormOnChange, type, checked, ...restOfInput } = input;
     const inputProps = {
       onBlur: input.onBlur,
       onFocus: input.onFocus,

src/components/FieldDateRangeController/FieldDateRangeController.js

@@ -5,7 +5,7 @@ import DateRangeController from './DateRangeController';
 
 const component = props => {
   const { input, controllerRef, ...rest } = props;
-  const { type, ...restOfInput } = input;
+  const { type, checked, ...restOfInput } = input;
   return <DateRangeController ref={controllerRef} {...restOfInput} {...rest} />;
 };
 

src/components/FieldDateRangeInput/FieldDateRangeInput.js

@@ -117,7 +117,7 @@ class FieldDateRangeInputComponent extends Component {
       ) : null;
 
     // eslint-disable-next-line no-unused-vars
-    const { onBlur, onFocus, type, ...restOfInput } = input;
+    const { onBlur, onFocus, type, checked, ...restOfInput } = input;
     const inputProps = {
       unitType,
       onBlur: this.handleBlur,

src/containers/CheckoutPage/CheckoutPage.js

@@ -42,7 +42,7 @@ import {
 } from '../../components';
 import { StripePaymentForm } from '../../forms';
 import { isScrollingDisabled } from '../../ducks/UI.duck';
-import { handleCardPayment, retrievePaymentIntent } from '../../ducks/stripe.duck';
+import { confirmCardPayment, retrievePaymentIntent } from '../../ducks/stripe.duck';
 import { savePaymentMethod } from '../../ducks/paymentMethods.duck';
 
 import {
@@ -206,7 +206,7 @@ export class CheckoutPageComponent extends Component {
       currentUser,
       stripeCustomerFetched,
       onInitiateOrder,
-      onHandleCardPayment,
+      onConfirmCardPayment,
       onConfirmPayment,
       onSendMessage,
       onSavePaymentMethod,
@@ -251,7 +251,7 @@ export class CheckoutPageComponent extends Component {
     };
 
     // Step 2: pay using Stripe SDK
-    const fnHandleCardPayment = fnParams => {
+    const fnConfirmCardPayment = fnParams => {
       // fnParams should be returned transaction entity
 
       const order = ensureTransaction(fnParams);
@@ -284,8 +284,9 @@ export class CheckoutPageComponent extends Component {
       const paymentParams =
         selectedPaymentFlow !== USE_SAVED_CARD
           ? {
-              payment_method_data: {
+              payment_method: {
                 billing_details: billingDetails,
+                card: card,
               },
             }
           : {};
@@ -299,12 +300,12 @@ export class CheckoutPageComponent extends Component {
       };
 
       // If paymentIntent status is not waiting user action,
-      // handleCardPayment has been called previously.
+      // confirmCardPayment has been called previously.
       const hasPaymentIntentUserActionsDone =
         paymentIntent && STRIPE_PI_USER_ACTIONS_DONE_STATUSES.includes(paymentIntent.status);
       return hasPaymentIntentUserActionsDone
         ? Promise.resolve({ transactionId: order.id, paymentIntent })
-        : onHandleCardPayment(params);
+        : onConfirmCardPayment(params);
     };
 
     // Step 3: complete order by confirming payment to Marketplace API
@@ -343,13 +344,13 @@ export class CheckoutPageComponent extends Component {
     // Here we create promise calls in sequence
     // This is pretty much the same as:
     // fnRequestPayment({...initialParams})
-    //   .then(result => fnHandleCardPayment({...result}))
+    //   .then(result => fnConfirmCardPayment({...result}))
     //   .then(result => fnConfirmPayment({...result}))
     const applyAsync = (acc, val) => acc.then(val);
     const composeAsync = (...funcs) => x => funcs.reduce(applyAsync, Promise.resolve(x));
     const handlePaymentIntentCreation = composeAsync(
       fnRequestPayment,
-      fnHandleCardPayment,
+      fnConfirmCardPayment,
       fnConfirmPayment,
       fnSendMessage,
       fnSavePaymentMethod
@@ -362,7 +363,7 @@ export class CheckoutPageComponent extends Component {
 
     // Note: optionalPaymentParams contains Stripe paymentMethod,
     // but that can also be passed on Step 2
-    // stripe.handleCardPayment(stripe, { payment_method: stripePaymentMethodId })
+    // stripe.confirmCardPayment(stripe, { payment_method: stripePaymentMethodId })
     const optionalPaymentParams =
       selectedPaymentFlow === USE_SAVED_CARD && hasDefaultPaymentMethod
         ? { paymentMethod: stripePaymentMethodId }
@@ -497,7 +498,7 @@ export class CheckoutPageComponent extends Component {
       intl,
       params,
       currentUser,
-      handleCardPaymentError,
+      confirmCardPaymentError,
       paymentIntent,
       retrievePaymentIntentError,
       stripeCustomerFetched,
@@ -739,7 +740,7 @@ export class CheckoutPageComponent extends Component {
         : null;
 
     // If paymentIntent status is not waiting user action,
-    // handleCardPayment has been called previously.
+    // confirmCardPayment has been called previously.
     const hasPaymentIntentUserActionsDone =
       paymentIntent && STRIPE_PI_USER_ACTIONS_DONE_STATUSES.includes(paymentIntent.status);
 
@@ -796,7 +797,7 @@ export class CheckoutPageComponent extends Component {
                   showInitialMessageInput={showInitialMessageInput}
                   initialValues={initalValuesForStripePayment}
                   initiateOrderError={initiateOrderError}
-                  handleCardPaymentError={handleCardPaymentError}
+                  confirmCardPaymentError={confirmCardPaymentError}
                   confirmPaymentError={confirmPaymentError}
                   hasHandledCardPayment={hasPaymentIntentUserActionsDone}
                   loadingData={!stripeCustomerFetched}
@@ -878,14 +879,14 @@ CheckoutPageComponent.propTypes = {
   }).isRequired,
   onConfirmPayment: func.isRequired,
   onInitiateOrder: func.isRequired,
-  onHandleCardPayment: func.isRequired,
+  onConfirmCardPayment: func.isRequired,
   onRetrievePaymentIntent: func.isRequired,
   onSavePaymentMethod: func.isRequired,
   onSendMessage: func.isRequired,
   initiateOrderError: propTypes.error,
   confirmPaymentError: propTypes.error,
-  // handleCardPaymentError comes from Stripe so that's why we can't expect it to be in a specific form
-  handleCardPaymentError: oneOfType([propTypes.error, object]),
+  // confirmCardPaymentError comes from Stripe so that's why we can't expect it to be in a specific form
+  confirmCardPaymentError: oneOfType([propTypes.error, object]),
   paymentIntent: object,
 
   // from connect
@@ -914,7 +915,7 @@ const mapStateToProps = state => {
     confirmPaymentError,
   } = state.CheckoutPage;
   const { currentUser } = state.user;
-  const { handleCardPaymentError, paymentIntent, retrievePaymentIntentError } = state.stripe;
+  const { confirmCardPaymentError, paymentIntent, retrievePaymentIntentError } = state.stripe;
   return {
     scrollingDisabled: isScrollingDisabled(state),
     currentUser,
@@ -927,7 +928,7 @@ const mapStateToProps = state => {
     transaction,
     listing,
     initiateOrderError,
-    handleCardPaymentError,
+    confirmCardPaymentError,
     confirmPaymentError,
     paymentIntent,
     retrievePaymentIntentError,
@@ -941,7 +942,7 @@ const mapDispatchToProps = dispatch => ({
   fetchStripeCustomer: () => dispatch(stripeCustomer()),
   onInitiateOrder: (params, transactionId) => dispatch(initiateOrder(params, transactionId)),
   onRetrievePaymentIntent: params => dispatch(retrievePaymentIntent(params)),
-  onHandleCardPayment: params => dispatch(handleCardPayment(params)),
+  onConfirmCardPayment: params => dispatch(confirmCardPayment(params)),
   onConfirmPayment: params => dispatch(confirmPayment(params)),
   onSendMessage: params => dispatch(sendMessage(params)),
   onSavePaymentMethod: (stripeCustomer, stripePaymentMethodId) =>

src/containers/CheckoutPage/CheckoutPage.test.js

@@ -31,12 +31,12 @@ describe('CheckoutPage', () => {
       speculateTransactionInProgress: false,
       scrollingDisabled: false,
       onConfirmPayment: noop,
-      onHandleCardPayment: noop,
+      onConfirmCardPayment: noop,
       onInitiateOrder: noop,
       onRetrievePaymentIntent: noop,
       onSavePaymentMethod: noop,
       onSendMessage: noop,
-      handleCardPaymentInProgress: false,
+      confirmCardPaymentInProgress: false,
     };
     const tree = renderShallow(<CheckoutPageComponent {...props} />);
     expect(tree).toMatchSnapshot();