Merge pull request #1089 from sharetribe/payment-intents

Payment Intents

CHANGELOG.md

@@ -14,6 +14,20 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2019-XX-XX
 
+## [v3.0.0] 2019-07-02
+
+- [add] Strong Customer Authentication (SCA) with Stripe's new PaymentIntents flow. This is a big
+  change for checkout flow and includes a madatory transaction process change.
+  [#1089](https://github.com/sharetribe/flex-template-web/pull/1089)
+
+  - You should check [the pull request](https://github.com/sharetribe/flex-template-web/pull/1089)
+  - and read 3 Flex Docs articles:
+    [SCA](https://www.sharetribe.com/docs/background/strong-customer-authentication/),
+    [PaymentIntents](https://www.sharetribe.com/docs/background/payment-intents/), and
+    [How to take PaymentIntents into use](https://www.sharetribe.com/docs/guide/how-to-take-payment-intents-into-use/)
+
+  [v3.0.0]: https://github.com/sharetribe/flex-template-web/compare/v2.17.1...v3.0.0
+
 ## [v2.17.1] 2019-06-11
 
 - [fix] `stripeCardToken` didn't update when the user tried to book the same listing for a second

src/app.js

@@ -27,6 +27,10 @@ import defaultMessages from './translations/en.json';
 //   3) Import correct locale rules for Moment library
 //   4) Use the `messagesInLocale` import to add the correct translation file.
 
+// Note that there is also translations in './translations/countryCodes.js' file
+// This file contains ISO 3166-1 alpha-2 country codes, country names and their translations in our default languages
+// This used to collect billing address in StripePaymentAddress on CheckoutPage
+
 // Step 2:
 // Import locale rules for React Intl library
 import localeData from 'react-intl/locale-data/en';

src/components/ActivityFeed/ActivityFeed.example.js

@@ -13,7 +13,8 @@ import {
   TRANSITION_COMPLETE,
   TRANSITION_DECLINE,
   TRANSITION_EXPIRE_REVIEW_PERIOD,
-  TRANSITION_REQUEST,
+  TRANSITION_REQUEST_PAYMENT,
+  TRANSITION_CONFIRM_PAYMENT,
   TRANSITION_REVIEW_1_BY_CUSTOMER,
   TRANSITION_REVIEW_1_BY_PROVIDER,
   TRANSITION_REVIEW_2_BY_CUSTOMER,
@@ -80,10 +81,16 @@ export const WithTransitions = {
       provider: createUser('user2'),
       listing: createListing('Listing'),
       transitions: [
+        // this should not be visible in the feed
         createTxTransition({
           createdAt: new Date(Date.UTC(2017, 10, 9, 8, 10)),
           by: TX_TRANSITION_ACTOR_CUSTOMER,
-          transition: TRANSITION_REQUEST,
+          transition: TRANSITION_REQUEST_PAYMENT,
+        }),
+        createTxTransition({
+          createdAt: new Date(Date.UTC(2017, 10, 9, 8, 10)),
+          by: TX_TRANSITION_ACTOR_CUSTOMER,
+          transition: TRANSITION_CONFIRM_PAYMENT,
         }),
         createTxTransition({
           createdAt: new Date(Date.UTC(2017, 10, 9, 8, 12)),
@@ -120,7 +127,12 @@ export const WithMessagesTransitionsAndReviews = {
         createTxTransition({
           createdAt: new Date(Date.UTC(2017, 10, 9, 8, 10)),
           by: TX_TRANSITION_ACTOR_CUSTOMER,
-          transition: TRANSITION_REQUEST,
+          transition: TRANSITION_REQUEST_PAYMENT,
+        }),
+        createTxTransition({
+          createdAt: new Date(Date.UTC(2017, 10, 9, 8, 10)),
+          by: TX_TRANSITION_ACTOR_CUSTOMER,
+          transition: TRANSITION_CONFIRM_PAYMENT,
         }),
         createTxTransition({
           createdAt: new Date(Date.UTC(2017, 10, 9, 8, 12)),
@@ -257,17 +269,22 @@ class PagedFeed extends Component {
     const trans1 = createTxTransition({
       createdAt: dates[0],
       by: TX_TRANSITION_ACTOR_CUSTOMER,
-      transition: TRANSITION_REQUEST,
+      transition: TRANSITION_REQUEST_PAYMENT,
     });
     const trans2 = createTxTransition({
+      createdAt: dates[0],
+      by: TX_TRANSITION_ACTOR_CUSTOMER,
+      transition: TRANSITION_CONFIRM_PAYMENT,
+    });
+    const trans3 = createTxTransition({
       createdAt: dates[2],
       by: TX_TRANSITION_ACTOR_PROVIDER,
       transition: TRANSITION_ACCEPT,
     });
 
     // Last transition timestamp is interleaved between the last two
     // messages.
-    const trans3 = createTxTransition({
+    const trans4 = createTxTransition({
       createdAt: dates[5],
       by: TX_TRANSITION_ACTOR_CUSTOMER,
       transition: TRANSITION_COMPLETE,
@@ -285,7 +302,7 @@ class PagedFeed extends Component {
       id: 'tx1',
       lastTransition: TRANSITION_COMPLETE,
       lastTransitionedAt: dates[5],
-      transitions: [trans1, trans2, trans3],
+      transitions: [trans1, trans2, trans3, trans4],
       listing: createListing('listing'),
       customer,
       provider,

src/components/ActivityFeed/ActivityFeed.js

@@ -12,8 +12,7 @@ import {
   TRANSITION_COMPLETE,
   TRANSITION_DECLINE,
   TRANSITION_EXPIRE,
-  TRANSITION_REQUEST,
-  TRANSITION_REQUEST_AFTER_ENQUIRY,
+  TRANSITION_CONFIRM_PAYMENT,
   TRANSITION_REVIEW_1_BY_CUSTOMER,
   TRANSITION_REVIEW_1_BY_PROVIDER,
   TRANSITION_REVIEW_2_BY_CUSTOMER,
@@ -115,8 +114,7 @@ const resolveTransitionMessage = (
   const displayName = otherUsersName;
 
   switch (currentTransition) {
-    case TRANSITION_REQUEST:
-    case TRANSITION_REQUEST_AFTER_ENQUIRY:
+    case TRANSITION_CONFIRM_PAYMENT:
       return isOwnTransition ? (
         <FormattedMessage id="ActivityFeed.ownTransitionRequest" values={{ listingTitle }} />
       ) : (

src/components/ActivityFeed/__snapshots__/ActivityFeed.test.js.snap

@@ -5,7 +5,7 @@ exports[`ActivityFeed matches snapshot 1`] = `
   className=""
 >
   <li
-    key="transition/request"
+    key="transition/confirm-payment"
   >
     <div>
       <div>

src/components/BookingBreakdown/BookingBreakdown.example.js

@@ -6,7 +6,8 @@ import {
   TRANSITION_COMPLETE,
   TRANSITION_DECLINE,
   TRANSITION_EXPIRE,
-  TRANSITION_REQUEST,
+  TRANSITION_REQUEST_PAYMENT,
+  TRANSITION_CONFIRM_PAYMENT,
   TX_TRANSITION_ACTOR_CUSTOMER,
 } from '../../util/transaction';
 import { LINE_ITEM_DAY, LINE_ITEM_NIGHT, LINE_ITEM_UNITS } from '../../util/types';
@@ -27,18 +28,24 @@ const exampleBooking = attributes => {
 
 const exampleTransaction = params => {
   const created = new Date(Date.UTC(2017, 1, 1));
+  const confirmed = new Date(Date.UTC(2017, 1, 1, 0, 1));
   return {
     id: new UUID('example-transaction'),
     type: 'transaction',
     attributes: {
       createdAt: created,
       lastTransitionedAt: created,
-      lastTransition: TRANSITION_REQUEST,
+      lastTransition: TRANSITION_CONFIRM_PAYMENT,
       transitions: [
         {
           createdAt: created,
           by: TX_TRANSITION_ACTOR_CUSTOMER,
-          transition: TRANSITION_REQUEST,
+          transition: TRANSITION_REQUEST_PAYMENT,
+        },
+        {
+          createdAt: confirmed,
+          by: TX_TRANSITION_ACTOR_CUSTOMER,
+          transition: TRANSITION_CONFIRM_PAYMENT,
         },
       ],
 
@@ -205,7 +212,7 @@ export const ProviderSalePreauthorized = {
     userRole: 'provider',
     unitType: LINE_ITEM_NIGHT,
     transaction: exampleTransaction({
-      lastTransition: TRANSITION_REQUEST,
+      lastTransition: TRANSITION_CONFIRM_PAYMENT,
       payinTotal: new Money(4500, CURRENCY),
       payoutTotal: new Money(2500, CURRENCY),
       lineItems: [

src/components/BookingBreakdown/BookingBreakdown.test.js

@@ -5,7 +5,7 @@ import { renderDeep } from '../../util/test-helpers';
 import { types as sdkTypes } from '../../util/sdkLoader';
 import {
   TRANSITION_CANCEL,
-  TRANSITION_REQUEST,
+  TRANSITION_REQUEST_PAYMENT,
   TX_TRANSITION_ACTOR_CUSTOMER,
 } from '../../util/transaction';
 import { LINE_ITEM_NIGHT } from '../../util/types';
@@ -21,12 +21,12 @@ const exampleTransaction = params => {
     attributes: {
       createdAt: created,
       lastTransitionedAt: created,
-      lastTransition: TRANSITION_REQUEST,
+      lastTransition: TRANSITION_REQUEST_PAYMENT,
       transitions: [
         {
           createdAt: created,
           by: TX_TRANSITION_ACTOR_CUSTOMER,
-          transition: TRANSITION_REQUEST,
+          transition: TRANSITION_REQUEST_PAYMENT,
         },
       ],
 

src/components/TransactionPanel/PanelHeading.js

@@ -7,6 +7,8 @@ import { NamedLink } from '../../components';
 import css from './TransactionPanel.css';
 
 export const HEADING_ENQUIRED = 'enquired';
+export const HEADING_PAYMENT_PENDING = 'pending-payment';
+export const HEADING_PAYMENT_EXPIRED = 'payment-expired';
 export const HEADING_REQUESTED = 'requested';
 export const HEADING_ACCEPTED = 'accepted';
 export const HEADING_DECLINED = 'declined';
@@ -74,14 +76,15 @@ const CustomerBannedInfoMaybe = props => {
 };
 
 const HeadingProvider = props => {
-  const { className, id, values, isCustomerBanned } = props;
+  const { className, id, values, isCustomerBanned, children } = props;
   return (
     <React.Fragment>
       <h1 className={className}>
         <span className={css.mainTitle}>
           <FormattedMessage id={id} values={values} />
         </span>
       </h1>
+      {children}
       <CustomerBannedInfoMaybe isCustomerBanned={isCustomerBanned} />
     </React.Fragment>
   );
@@ -125,6 +128,45 @@ const PanelHeading = props => {
           isCustomerBanned={isCustomerBanned}
         />
       );
+    case HEADING_PAYMENT_PENDING:
+      return isCustomer ? (
+        <HeadingCustomer
+          className={titleClasses}
+          id="TransactionPanel.orderPaymentPendingTitle"
+          values={{ listingLink }}
+          listingDeleted={listingDeleted}
+        />
+      ) : (
+        <HeadingProvider
+          className={titleClasses}
+          id="TransactionPanel.salePaymentPendingTitle"
+          values={{ customerName, listingLink }}
+          isCustomerBanned={isCustomerBanned}
+        >
+          <p className={css.transactionInfoMessage}>
+            <FormattedMessage
+              id="TransactionPanel.salePaymentPendingInfo"
+              values={{ customerName }}
+            />
+          </p>
+        </HeadingProvider>
+      );
+    case HEADING_PAYMENT_EXPIRED:
+      return isCustomer ? (
+        <HeadingCustomer
+          className={titleClasses}
+          id="TransactionPanel.orderPaymentExpiredTitle"
+          values={{ listingLink }}
+          listingDeleted={listingDeleted}
+        />
+      ) : (
+        <HeadingProvider
+          className={titleClasses}
+          id="TransactionPanel.salePaymentExpiredTitle"
+          values={{ customerName, listingLink }}
+          isCustomerBanned={isCustomerBanned}
+        />
+      );
     case HEADING_REQUESTED:
       return isCustomer ? (
         <HeadingCustomerWithSubtitle

src/components/TransactionPanel/TransactionPanel.js

@@ -7,6 +7,8 @@ import {
   txIsCanceled,
   txIsDeclined,
   txIsEnquired,
+  txIsPaymentExpired,
+  txIsPaymentPending,
   txIsRequested,
   txHasBeenDelivered,
 } from '../../util/transaction';
@@ -32,6 +34,8 @@ import FeedSection from './FeedSection';
 import SaleActionButtonsMaybe from './SaleActionButtonsMaybe';
 import PanelHeading, {
   HEADING_ENQUIRED,
+  HEADING_PAYMENT_PENDING,
+  HEADING_PAYMENT_EXPIRED,
   HEADING_REQUESTED,
   HEADING_ACCEPTED,
   HEADING_DECLINED,
@@ -202,6 +206,16 @@ export class TransactionPanelComponent extends Component {
           headingState: HEADING_ENQUIRED,
           showBookingPanel: isCustomer && !isProviderBanned,
         };
+      } else if (txIsPaymentPending(tx)) {
+        return {
+          headingState: HEADING_PAYMENT_PENDING,
+          showDetailCardHeadings: isCustomer,
+        };
+      } else if (txIsPaymentExpired(tx)) {
+        return {
+          headingState: HEADING_PAYMENT_EXPIRED,
+          showDetailCardHeadings: isCustomer,
+        };
       } else if (txIsRequested(tx)) {
         return {
           headingState: HEADING_REQUESTED,

src/components/TransactionPanel/TransactionPanel.test.js

@@ -19,7 +19,8 @@ import {
   TRANSITION_DECLINE,
   TRANSITION_ENQUIRE,
   TRANSITION_EXPIRE,
-  TRANSITION_REQUEST,
+  TRANSITION_REQUEST_PAYMENT,
+  TRANSITION_CONFIRM_PAYMENT,
 } from '../../util/transaction';
 import BreakdownMaybe from './BreakdownMaybe';
 import { TransactionPanelComponent } from './TransactionPanel';
@@ -57,7 +58,7 @@ describe('TransactionPanel - Sale', () => {
 
   const txPreauthorized = createTransaction({
     id: 'sale-preauthorized',
-    lastTransition: TRANSITION_REQUEST,
+    lastTransition: TRANSITION_REQUEST_PAYMENT,
     ...baseTxAttrs,
   });
 
@@ -92,7 +93,7 @@ describe('TransactionPanel - Sale', () => {
       createTxTransition({
         createdAt: new Date(Date.UTC(2017, 4, 1)),
         by: 'customer',
-        transition: TRANSITION_REQUEST,
+        transition: TRANSITION_REQUEST_PAYMENT,
       }),
       createTxTransition({
         createdAt: new Date(Date.UTC(2017, 5, 1)),
@@ -197,7 +198,7 @@ describe('TransactionPanel - Sale', () => {
 
     const transaction = createTransaction({
       id: 'sale-tx',
-      lastTransition: TRANSITION_REQUEST,
+      lastTransition: TRANSITION_REQUEST_PAYMENT,
       total: new Money(16500, 'USD'),
       commission: new Money(1000, 'USD'),
       booking: createBooking('booking1', {
@@ -252,7 +253,7 @@ describe('TransactionPanel - Order', () => {
 
   const txPreauthorized = createTransaction({
     id: 'order-preauthorized',
-    lastTransition: TRANSITION_REQUEST,
+    lastTransition: TRANSITION_CONFIRM_PAYMENT,
     ...baseTxAttrs,
   });
 
@@ -287,7 +288,12 @@ describe('TransactionPanel - Order', () => {
       createTxTransition({
         createdAt: new Date(Date.UTC(2017, 4, 1)),
         by: 'customer',
-        transition: TRANSITION_REQUEST,
+        transition: TRANSITION_REQUEST_PAYMENT,
+      }),
+      createTxTransition({
+        createdAt: new Date(Date.UTC(2017, 4, 1, 0, 0, 1)),
+        by: 'customer',
+        transition: TRANSITION_CONFIRM_PAYMENT,
       }),
       createTxTransition({
         createdAt: new Date(Date.UTC(2017, 5, 1)),
@@ -393,7 +399,7 @@ describe('TransactionPanel - Order', () => {
     const end = new Date(Date.UTC(2017, 5, 13));
     const tx = createTransaction({
       id: 'order-tx',
-      lastTransition: TRANSITION_REQUEST,
+      lastTransition: TRANSITION_REQUEST_PAYMENT,
       total: new Money(16500, 'USD'),
       booking: createBooking('booking1', {
         start,