stitches in new reaction payment page

artsy · Nov 6, 2018 · 36cca36 · 36cca36
1 parent 310acb5
commit 36cca36
Show file tree

Hide file tree

Showing 12 changed files with 33 additions and 84 deletions.
diff --git a/.gitignore b/.gitignore
@@ -18,6 +18,7 @@ npm-debug.log
 dump.rdb
 manifest.json
 .cache
+.cache-loader
 COMMIT_HASH.txt
 
 /data

diff --git a/package.json b/package.json
@@ -53,7 +53,7 @@
     "@artsy/express-reloadable": "^1.3.1",
     "@artsy/palette": "^2.18.1",
     "@artsy/passport": "^1.1.0",
-    "@artsy/reaction": "^5.10.2",
+    "@artsy/reaction": "^5.10.4",
     "@artsy/stitch": "^2.0.0",
     "@babel/core": "^7.0.0",
     "@babel/node": "^7.0.0",

diff --git a/src/desktop/apps/user/components/payment_methods/index.jade b/src/desktop/apps/user/components/payment_methods/index.jade
@@ -1,31 +1,2 @@
-a.settings-payment-methods__new.avant-garde-button-white.is-small(
-  class='js-add'
-) Add New
-
-if cards && cards.length
-  .settings-payment-methods__cards.grid-2-up
-    for card in cards
-      .settings-payment-methods__cards__card.grid-item
-        if card.id
-          .settings-payment-methods__cards__card__digits
-            | #{card.brand} xxxx-#{card.last_digits}
-
-          .settings-payment-methods__cards__card__name
-            = card.name
-
-          .settings-payment-methods__cards__card__exp
-            | #{card.expiration_month}/#{card.expiration_year}
-
-          .settings-payment-methods__cards__card__logo.credit-card-icon(
-            data-provider= card.brand
-          )
-        else
-          .loading-spinner
-
-        .settings-payment-methods__cards__card__delete.avant-garde-button-white.is-small(
-          class='js-delete'
-          data-id= card.id
-        ) Remove
-
-else
-  | Nothing yet.
+#stitch-credit-cards
+  != stitch.components.UserSettingsPayments({ mountId: 'stitch-credit-cards' })
diff --git a/src/desktop/apps/user/components/payment_methods/view.coffee b/src/desktop/apps/user/components/payment_methods/view.coffee
@@ -1,52 +1,19 @@
 { invoke } = require 'underscore'
 Backbone = require 'backbone'
-openCreditCardModal = require '../../../../components/credit_card_2/modal/index.coffee'
 template = -> require('./index.jade') arguments...
-CreditCardView = require '../../../../components/credit_card_2/view.coffee'
+sd = require('sharify').data
 
 module.exports = class PaymentMethodsView extends Backbone.View
   subViews: []
 
   className: 'settings-payment-methods'
 
-  events:
-    'click .js-add': 'add'
-    'click .js-delete': 'delete'
-
   initialize: ->
     @listenTo @collection, 'add remove sync destroy', @render
 
-  fetch: ->
-    @collection.fetch()
-
-  add: (e) ->
-    e.preventDefault()
-    openCreditCardModal collection: @collection
-
-  delete: (e) ->
-    e.preventDefault()
-
-    id = $(e.currentTarget)
-      .attr 'data-state', 'loading'
-      .data 'id'
-
-    @collection
-      .get id
-      .destroy()
-
   render: ->
-    if @collection.length
-      @$el.html template
-        cards: @collection.toJSON()
-
-    else
-      creditCardView = new CreditCardView collection: @collection
-      @$el.html creditCardView.render().$el
-      @subViews = [
-        creditCardView
-      ]
-
-    this
+    @$el.html template
+      stitch: sd.stitch
 
   remove: ->
     invoke @subViews, 'remove'

diff --git a/src/desktop/apps/user/pages/payments/index.coffee b/src/desktop/apps/user/pages/payments/index.coffee
@@ -2,6 +2,7 @@
 Backbone = require 'backbone'
 PaymentMethodsView = require '../../components/payment_methods/view.coffee'
 template = -> require('./index.jade') arguments...
+sd = require('sharify').data
 
 module.exports = class PaymentsView extends Backbone.View
   subViews: []
@@ -14,17 +15,10 @@ module.exports = class PaymentsView extends Backbone.View
     paymentMethodsView = new PaymentMethodsView collection: @user.related().creditCards
     @$('.js-settings-section__main--payment-methods')
       .html paymentMethodsView.render().$el
-    paymentMethodsView.fetch()
-
-    @subViews = [
-      paymentMethodsView
-    ]
 
   render: ->
     @$el.html template
       user: @user
+      stitch: sd.stitch
     @postRender()
     this
-
-  remove: ->
-    invoke @subViews, 'remove'
diff --git a/src/desktop/apps/user/pages/payments/index.jade b/src/desktop/apps/user/pages/payments/index.jade
@@ -1,4 +1,6 @@
 include ../../templates/mixins
 
-+settings-section('payment-methods', 'Payment Methods')
++settings-section('payment-methods', '')
   include ../../components/payment_methods/index
+
+  #some-other-id
diff --git a/src/desktop/apps/user/stylesheets/index.styl b/src/desktop/apps/user/stylesheets/index.styl
@@ -39,7 +39,7 @@
 
 .settings-section
   position relative
-  width 75%
+  width 100%
   block-margins(gutter)
   padding gutter 0 (gutter * 2) 0
   border-top 1px solid gray-lighter-color

diff --git a/src/desktop/apps/user/templates/layout.jade b/src/desktop/apps/user/templates/layout.jade
@@ -5,7 +5,7 @@ block head
 
 append locals
   - assetPackage = 'misc'
-  - options = {stripe: true}
+  - options = {stripev3: true}
 
 block body
   .settings-page.responsive-layout-container(

diff --git a/src/desktop/components/credit_card_2/index.styl b/src/desktop/components/credit_card_2/index.styl
@@ -27,7 +27,6 @@
     pointer-events none
 
 .credit-card-form
-  width 75%
   margin 0 auto
 
   &__form

diff --git a/src/desktop/components/react/stitch_components/ReactionUserSettingsPayments.tsx b/src/desktop/components/react/stitch_components/ReactionUserSettingsPayments.tsx
@@ -0,0 +1,12 @@
+import React from "react"
+import { ContextProvider } from "reaction/Artsy"
+import { UserSettingsPaymentsQueryRenderer as Renderer } from "reaction/Components/Payment/UserSettingsPayments"
+import { data as sd } from "sharify"
+
+export const ReactionUserSettingsPayments = () => {
+  return (
+    <ContextProvider user={sd.CURRENT_USER}>
+      <Renderer />
+    </ContextProvider>
+  )
+}
diff --git a/src/desktop/components/react/stitch_components/index.tsx b/src/desktop/components/react/stitch_components/index.tsx
@@ -10,3 +10,6 @@ export { ReactionFillwidth as Fillwidth } from "./ReactionFillwidth"
 export {
   ReactionTooltipQuestion as TooltipQuestion,
 } from "./ReactionTooltipQuestion"
+export {
+  ReactionUserSettingsPayments as UserSettingsPayments,
+} from "./ReactionUserSettingsPayments"
diff --git a/yarn.lock b/yarn.lock
@@ -57,10 +57,10 @@
     "@artsy/palette" "^2.19.8"
     react "16.3.2"
 
-"@artsy/reaction@^5.10.2":
-  version "5.10.3"
-  resolved "https://registry.yarnpkg.com/@artsy/reaction/-/reaction-5.10.3.tgz#5ef6c77c2fe5548c9fd4a845362903db6528fb2d"
-  integrity sha512-+5Aw2CK+xCIJ/1P2VysnJEFz9yuiZf7MxE2QSUegMBQGTSxL/2A4YGDJcwzk5wiUbNLlpy+XHLkvszcJI7DOBQ==
+"@artsy/reaction@^5.10.4":
+  version "5.10.4"
+  resolved "https://registry.yarnpkg.com/@artsy/reaction/-/reaction-5.10.4.tgz#158426a96f17bc44e7237c284346fd4faaeb0e85"
+  integrity sha512-jm3JvTv3bq79H0lrzmpeYPTpXcD83gPfsj1u4ZuhoABnE5MuGy6g7W0AnAxXv4sswYQ6rUGjdWKMhsnMN7gKwg==
   dependencies:
     "@artsy/palette" "^2.19.9"
     "@artsy/react-responsive-media" "^1.0.5"