Merge pull request #1138 from sharetribe/save-credit-card

Save payment card
sharetribe · Aug 22, 2019 · 239914c · 239914c
2 parents 15994f9 + ac1559b
commit 239914c
Show file tree

Hide file tree

Showing 58 changed files with 3,120 additions and 503 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,33 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2019-XX-XX
 
+## [v3.3.0] 2019-08-22
+
+- [add] Saving payment card after payment or without initial payment. This release contains quite a
+  lot changes to many files. This includes:
+
+  - UI changes to `CheckoutPage` for showing the saved payment method
+  - One more step to `handlePaymentIntent` flow on `CheckoutPage` if the user decides to save the
+    payment card
+  - Showing error notification on `TransactionPage` if saving the payment method has failed
+  - Use Flex SDK v1.5.0 which has new endpoints for creating Stripe Customer and using Stripe
+    SetupIntents
+  - Add `handleCardSetup` function to `stripe.duck.js`
+  - New shared duck file `paymentMethods.duck.js` for handling saving, deleting and replacing the
+    payment method
+  - New page `PaymentMethodsPage` in user's account settings
+  - `StripePaymenAddress` used in `StripePaymentForm` is now a separate component used also in new
+    `PaymentMethodsForm`
+  - New `LayoutWrapperAccountSettingsSideNav` component which is used in account settings pages:
+    `ContactDetailsPage`, `PasswordChangePage`, `PayoutPreferencesPage`, `PaymentMethodsPage`
+
+  [#1138](https://github.com/sharetribe/flex-template-web/pull/1138)
+
+Read more from Flex docs:
+[How saving payment card works in FTW](https://www.sharetribe.com/docs/background/save-payment-card/)
+
+[v3.3.0]: https://github.com/sharetribe/flex-template-web/compare/v3.2.0...v3.2.1
+
 ## [v3.2.1] 2019-08-22
 
 - [fix] On `ListingPage` align avatar with the left side of the content and fix content width so

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "app",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "private": true,
   "license": "Apache-2.0",
   "dependencies": {
@@ -49,7 +49,7 @@
     "redux-thunk": "^2.3.0",
     "sanitize.css": "^5.0.0",
     "seedrandom": "^2.4.4",
-    "sharetribe-flex-sdk": "^1.4.1",
+    "sharetribe-flex-sdk": "^1.5.0",
     "sharetribe-scripts": "3.0.0",
     "smoothscroll-polyfill": "^0.4.0",
     "source-map-support": "^0.5.9",

diff --git a/public/index.html b/public/index.html
@@ -88,6 +88,7 @@
   </head>
   <body>
     <div id="root"><!--!body--></div>
+    <div id="portal-root"></div>
     <script>
       (function(document){
         // Check if Promise exists in window

diff --git a/src/components/FieldCheckbox/FieldCheckbox.css b/src/components/FieldCheckbox/FieldCheckbox.css
@@ -17,13 +17,27 @@
     stroke: var(--marketplaceColor);
   }
 
+  /* successColor version */
+  &:hover + label .boxSuccess,
+  &:focus + label .boxSuccess,
+  &:checked + label .boxSuccess {
+    stroke: var(--successColor);
+  }
+
   /* Display the "check" when checked */
   &:checked + label .checked {
     display: inline;
     stroke: var(--marketplaceColor);
     stroke-width: 1px;
   }
 
+  /* Display the "check" when checked */
+  &:checked + label .checkedSuccess {
+    display: inline;
+    stroke: var(--successColor);
+    stroke-width: 1px;
+  }
+
   /* Hightlight the text on checked, hover and focus */
   &:focus + label .text,
   &:hover + label .text,
@@ -54,12 +68,19 @@
   display: none;
   fill: var(--marketplaceColor);
 }
+.checkedSuccess {
+  display: none;
+  fill: var(--successColor);
+}
 
+.boxSuccess,
 .box {
   stroke: var(--matterColorAnti);
 }
 
 .text {
+}
+.textRoot {
   @apply --marketplaceListingAttributeFontStyles;
   color: var(--matterColor);
   margin-top: -1px;

diff --git a/src/components/FieldCheckbox/FieldCheckbox.js b/src/components/FieldCheckbox/FieldCheckbox.js
@@ -6,16 +6,17 @@ import { Field } from 'react-final-form';
 import css from './FieldCheckbox.css';
 
 const IconCheckbox = props => {
+  const { className, checkedClassName, boxClassName } = props;
   return (
-    <svg className={props.className} width="14" height="14" xmlns="http://www.w3.org/2000/svg">
+    <svg className={className} width="14" height="14" xmlns="http://www.w3.org/2000/svg">
       <g fill="none" fillRule="evenodd">
         <g transform="translate(2 2)">
           <path
-            className={css.checked}
+            className={checkedClassName || css.checked}
             d="M9.9992985 1.5048549l-.0194517 6.9993137C9.977549 9.3309651 9.3066522 10 8.4798526 10H1.5001008c-.8284271 0-1.5-.6715729-1.5-1.5l-.000121-7c0-.8284271.6715728-1.5 1.5-1.5h.000121l6.9993246.0006862c.8284272.000067 1.4999458.671694 1.499879 1.5001211a1.5002208 1.5002208 0 0 1-.0000059.0040476z"
           />
           <path
-            className={css.box}
+            className={boxClassName || css.box}
             strokeWidth="2"
             d="M10.9992947 1.507634l-.0194518 6.9993137C10.9760133 9.8849417 9.8578519 11 8.4798526 11H1.5001008c-1.3807119 0-2.5-1.1192881-2.5-2.4999827L-1.0000202 1.5c0-1.3807119 1.119288-2.5 2.500098-2.5l6.9994284.0006862c1.3807118.0001115 2.4999096 1.11949 2.4997981 2.5002019-.0000018.003373-.0000018.003373-.0000096.0067458z"
           />
@@ -29,12 +30,21 @@ const IconCheckbox = props => {
   );
 };
 
-IconCheckbox.defaultProps = { className: null };
+IconCheckbox.defaultProps = { className: null, checkedClassName: null, boxClassName: null };
 
-IconCheckbox.propTypes = { className: string };
+IconCheckbox.propTypes = { className: string, checkedClassName: string, boxClassName: string };
 
 const FieldCheckboxComponent = props => {
-  const { rootClassName, className, svgClassName, id, label, ...rest } = props;
+  const {
+    rootClassName,
+    className,
+    svgClassName,
+    textClassName,
+    id,
+    label,
+    useSuccessColor,
+    ...rest
+  } = props;
 
   const classes = classNames(rootClassName || css.root, className);
   const checkboxProps = {
@@ -45,14 +55,21 @@ const FieldCheckboxComponent = props => {
     ...rest,
   };
 
+  const successColorVariantMaybe = useSuccessColor
+    ? {
+        checkedClassName: css.checkedSuccess,
+        boxClassName: css.boxSuccess,
+      }
+    : {};
+
   return (
     <span className={classes}>
       <Field {...checkboxProps} />
       <label htmlFor={id} className={css.label}>
         <span className={css.checkboxWrapper}>
-          <IconCheckbox className={svgClassName} />
+          <IconCheckbox className={svgClassName} {...successColorVariantMaybe} />
         </span>
-        <span className={css.text}>{label}</span>
+        <span className={classNames(css.text, textClassName || css.textRoot)}>{label}</span>
       </label>
     </span>
   );
@@ -62,13 +79,15 @@ FieldCheckboxComponent.defaultProps = {
   className: null,
   rootClassName: null,
   svgClassName: null,
+  textClassName: null,
   label: null,
 };
 
 FieldCheckboxComponent.propTypes = {
   className: string,
   rootClassName: string,
   svgClassName: string,
+  textClassName: string,
 
   // Id is needed to connect the label with input.
   id: string.isRequired,

diff --git a/src/components/IconArrowHead/IconArrowHead.js b/src/components/IconArrowHead/IconArrowHead.js
@@ -6,6 +6,8 @@ import css from './IconArrowHead.css';
 
 const DIRECTION_RIGHT = 'right';
 const DIRECTION_LEFT = 'left';
+const DIRECTION_DOWN = 'down';
+const DIRECTION_UP = 'up';
 const SIZE_BIG = 'big';
 const SIZE_SMALL = 'small';
 
@@ -15,6 +17,8 @@ const IconArrowHead = props => {
 
   const isRight = direction === DIRECTION_RIGHT;
   const isLeft = direction === DIRECTION_LEFT;
+  const isDown = direction === DIRECTION_DOWN;
+  const isUp = direction === DIRECTION_UP;
   const isBig = size === SIZE_BIG;
   const isSmall = size === SIZE_SMALL;
 
@@ -48,6 +52,36 @@ const IconArrowHead = props => {
         />
       </svg>
     );
+  } else if (isDown && isSmall) {
+    return (
+      <svg
+        className={classes}
+        width="13"
+        height="9"
+        viewBox="0 0 13 9"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6.03 6.805c.26.26.68.26.94 0l5.335-5.333a.668.668 0 0 0-.943-.943L6.5 5.39 1.638.53a.666.666 0 1 0-.943.942L6.03 6.805z"
+          fillRule="evenodd"
+        />
+      </svg>
+    );
+  } else if (isUp && isSmall) {
+    return (
+      <svg
+        className={classes}
+        width="13"
+        height="9"
+        viewBox="0 0 13 9"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6.97.195a.664.664 0 0 0-.94 0L.695 5.528a.668.668 0 0 0 .943.943L6.5 1.61l4.862 4.86a.666.666 0 1 0 .943-.942L6.97.195z"
+          fillRule="evenodd"
+        />
+      </svg>
+    );
   } else if (isRight && isBig) {
     return (
       <svg
@@ -78,6 +112,36 @@ const IconArrowHead = props => {
         />
       </svg>
     );
+  } else if (isDown && isBig) {
+    return (
+      <svg
+        className={classes}
+        width="15"
+        height="11"
+        viewBox="0 0 15 11"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M.5 1.1C.5.93.565.76.692.642a.508.508 0 0 1 .764.07L7 7.972 12.545.71a.506.506 0 0 1 .763-.07c.23.214.257.592.064.846l-5.958 7.8A.524.524 0 0 1 7 9.498a.522.522 0 0 1-.414-.212l-5.958-7.8A.638.638 0 0 1 .5 1.098"
+          fillRule="evenodd"
+        />
+      </svg>
+    );
+  } else if (isUp && isBig) {
+    return (
+      <svg
+        className={classes}
+        width="15"
+        height="11"
+        viewBox="0 0 15 11"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M13.5 8.9c0 .17-.065.34-.192.458a.508.508 0 0 1-.764-.07L7 2.028 1.455 9.29a.506.506 0 0 1-.763.07.644.644 0 0 1-.064-.846l5.958-7.8A.524.524 0 0 1 7 .502c.16 0 .31.077.414.212l5.958 7.8c.086.113.128.25.128.388"
+          fillRule="evenodd"
+        />
+      </svg>
+    );
   }
 };
 
@@ -90,7 +154,7 @@ IconArrowHead.defaultProps = {
 IconArrowHead.propTypes = {
   className: string,
   rootClassName: string,
-  direction: oneOf([DIRECTION_RIGHT, DIRECTION_LEFT]).isRequired,
+  direction: oneOf([DIRECTION_RIGHT, DIRECTION_LEFT, DIRECTION_DOWN, DIRECTION_UP]).isRequired,
   size: oneOf([SIZE_BIG, SIZE_SMALL]),
 };
 

diff --git a/src/components/IconCard/IconCard.css b/src/components/IconCard/IconCard.css
@@ -0,0 +1,4 @@
+@import '../../marketplace.css';
+
+.root {
+}