Merge pull request #2167 from reactioncommerce/spencer-799-marketplac…

…e-stripe-connect [Marketplace] Spencer 799 marketplace stripe connect
reactioncommerce · Apr 26, 2017 · 29ec3d2 · 29ec3d2
2 parents 79943b5 + 4387e4e
commit 29ec3d2
Show file tree

Hide file tree

Showing 58 changed files with 1,009 additions and 46 deletions.
diff --git a/client/modules/accounts/templates/profile/profile.html b/client/modules/accounts/templates/profile/profile.html
@@ -53,6 +53,18 @@ <h3 class="panel-title" data-i18n="marketplace.becomeSeller">Become a Seller</h3
           </div>
         </div>
       </div>
+
+      <div class="flex-item">
+        <div class="panel panel-default">
+          <div class="panel-heading">
+            <h3 class="panel-title" data-i18n="marketplace.stripeConnectSignup">Start Accepting Payments</h3>
+          </div>
+
+          <div class="panel-content">
+            {{> stripeConnectSignupButton}}
+          </div>
+        </div>
+      </div>
     {{/if}}
   </div>
 

diff --git a/client/modules/core/main.js b/client/modules/core/main.js
@@ -318,7 +318,6 @@ export default {
     return Session.equals("admin/showActionViewDetail", true);
   },
 
-
   setActionView(viewData) {
     if (viewData) {
       let viewStack;

diff --git a/imports/plugins/included/default-theme/client/styles/navbar.less b/imports/plugins/included/default-theme/client/styles/navbar.less
@@ -110,6 +110,21 @@
 }
 
 .rui.navbar .languages .dropdown-menu {
+  min-width: 250px !important;
+}
+
+html:not(.rtl) .rui.navbar .languages .dropdown-menu {
+  left: auto !important;
+  right: 0px;
+}
+
+.rtl .rui.navbar .languages .dropdown-menu {
+  left: 0px;
+  right: auto !important;
+}
+
+.rui.navbar .languages .dropdown-menu,
+.rui.navbar .currencies .dropdown-menu {
   margin-top: 0;
   min-width: 250px !important;
 }

diff --git a/imports/plugins/included/default-theme/client/styles/products/productGrid.less b/imports/plugins/included/default-theme/client/styles/products/productGrid.less
@@ -347,3 +347,11 @@
     right: 0px;
   }
 }
+
+.product-grid-badges {
+  .badge {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+  }
+}
diff --git a/imports/plugins/included/default-theme/client/styles/variables.less b/imports/plugins/included/default-theme/client/styles/variables.less
@@ -1142,7 +1142,6 @@
 @tag-group-border-color: @brand-primary-border-color;
 @tag-group-background-color: @brand-primary-bg-light;
 
-
 //== Dashboard navbar
 @navbar-dashboard-bg: @white;
 @navbar-dashboard-color: @black;

diff --git a/imports/plugins/included/marketplace/client/index.js b/imports/plugins/included/marketplace/client/index.js
@@ -9,3 +9,6 @@ import "./templates/settings/sellerShopSettings.js";
 
 import "./templates/shops/shopSelect.html";
 import "./templates/shops/shopSelect.js";
+
+import "./templates/stripeConnectSignupButton/stripeConnectSignupButton.html";
+import "./templates/stripeConnectSignupButton/stripeConnectSignupButton.js";
diff --git a/...ded/marketplace/client/templates/stripeConnectSignupButton/stripeConnectSignupButton.html b/...ded/marketplace/client/templates/stripeConnectSignupButton/stripeConnectSignupButton.html
@@ -0,0 +1,9 @@
+<template name="stripeConnectSignupButton">
+  <button
+    class="btn {{classes}}"
+    data-event-category="marketplace"
+    data-event-action="button-click-stripe-signup"
+    data-event-label="Stripe Connect Signup button click"
+    data-event-value="clicked"
+    data-i18n="marketplace.stripeConnectSignup">Start Accepting Payments</button>
+</template>
diff --git a/...luded/marketplace/client/templates/stripeConnectSignupButton/stripeConnectSignupButton.js b/...luded/marketplace/client/templates/stripeConnectSignupButton/stripeConnectSignupButton.js
@@ -0,0 +1,47 @@
+import { Meteor } from "meteor/meteor";
+import { Reaction } from "/lib/api";
+
+// TODO: This button should be a React component.
+
+Template.stripeConnectSignupButton.onCreated(function () {
+  this.autorun(() => {
+    // TODO: this should probably be managed by a subscription?
+    // Seems inefficient to do it at the button component level
+    Meteor.subscribe("SellerShops");
+  });
+});
+
+// Button
+Template.stripeConnectSignupButton.helpers({
+  /**
+   * Give it a size and style
+   * @return {String} The classes
+   */
+  classes() {
+    const classes = [
+      (this.type || "btn-info"),
+      (this.size || "")
+    ];
+
+    return classes.join(" ");
+  }
+});
+
+Template.stripeConnectSignupButton.events({
+  "click [data-event-action='button-click-stripe-signup']": function () {
+    const sellerShop = Reaction.getSellerShop();
+
+    const email = sellerShop.emails[0].address;
+    const country = sellerShop.addressBook[0].country;
+    const phoneNumber = sellerShop.addressBook[0].phone;
+    const businessName = sellerShop.addressBook[0].company;
+    const streetAddress = sellerShop.addressBook[0].address1;
+    const city = sellerShop.addressBook[0].city;
+    const state = sellerShop.addressBook[0].state;
+    const zip = sellerShop.addressBook[0].postal;
+
+    const autofillParams = `&stripe_user[email]=${email}&stripe_user[country]=${country}&stripe_user[phone_number]=${phoneNumber}&stripe_user[business_name]=${businessName}&stripe_user[street_address]=${streetAddress}&stripe_user[city]=${city}&stripe_user[state]=${state}&stripe_user[zip]=${zip}`; // eslint-disable-line max-len
+    // TODO: Should client_id be hardcoded in here?
+    window.location.href = "https://connect.stripe.com/oauth/authorize?response_type=code&client_id=ca_32D88BD1qLklliziD7gYQvctJIhWBSQ7&scope=read_write" + autofillParams;
+  }
+});
diff --git a/imports/plugins/included/marketplace/lib/collections/schemas/marketplace.js b/imports/plugins/included/marketplace/lib/collections/schemas/marketplace.js
@@ -1,5 +1,6 @@
 import { SimpleSchema } from "meteor/aldeed:simple-schema";
 import { PackageConfig } from "/lib/collections/schemas/registry";
+import { Shop } from "/lib/collections/schemas/shops.js";
 
 export const MarketplacePackageConfig = new SimpleSchema([
   PackageConfig, {
@@ -15,3 +16,15 @@ export const MarketplacePackageConfig = new SimpleSchema([
     }
   }
 ]);
+
+/**
+ * Seller Shop Schema
+ */
+export const SellerShop = new SimpleSchema([
+  Shop, {
+    stripeConnectSettings: {
+      type: Object,
+      optional: true
+    }
+  }
+]);
diff --git a/imports/plugins/included/payments-stripe-connect/client/index.js b/imports/plugins/included/payments-stripe-connect/client/index.js
@@ -0,0 +1 @@
+import "./settings/settings";
diff --git a/imports/plugins/included/payments-stripe-connect/client/settings/settings.html b/imports/plugins/included/payments-stripe-connect/client/settings/settings.html
@@ -0,0 +1,65 @@
+<template name="stripeConnectSettings">
+    {{#unless packageData.settings.api_key}}
+    <div class="alert alert-info">
+      <span data-i18n="admin.paymentSettings.stripeConnectSettingsDescription">Don't have a Stripe Connect API Client ID?</span>
+      <a href="https://dashboard.stripe.com/account/apikeys" target="_blank">
+        <span data-i18n="admin.paymentSettings.stripeConnectSettingsGetItHere">Get it here.</span>
+      </a>
+    </div>
+    {{/unless}}
+    <div>
+      {{#autoForm collection=Collections.Packages schema=StripeConnectPackageConfig doc=packageData type="update" id="stripe-connect-update-form"}}
+        {{>afQuickField name='settings.api_key'}}
+        {{>afQuickField name='settings.transactionFee.enabled'}}
+        {{>afQuickField name='settings.transactionFee.percentage'}}
+        <button type="submit" class="btn btn-primary pull-right"><span data-i18n="app.saveChanges">Save Changes</span></button>
+      {{/autoForm}}
+    </div>
+
+</template>
+
+
+<template name="stripeConnect">
+  <div class="container-fluid-sm flex">
+    <div class="flex-item">
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          <div class="panel-title">Stripe Connect Checkout</div>
+        </div>
+        <div class="list-group">
+          <div class="list-group-item">
+            {{#if packageData.settings.api_key}}
+              <span>API Client ID: <button type="button" class="btn btn-link" data-event-action="showStripeConnectSettings">**********</button></span>
+            {{else}}
+              <span>API Client ID: <button type="button" class="btn btn-link" data-event-action="showStripeConnectSettings">Configure Now</button></span>
+            {{/if}}
+          </div>
+        </div>
+        <div class="panel-footer">
+          <div class="left"></div>
+          <div class="right">
+
+            <div class="panel-footer-item">
+              {{#if packageData.settings.api_key}}
+                <i class="fa fa-check-circle fa-2x text-success"></i>
+              {{else}}
+                <i class="fa fa-minus-circle fa-2x text-muted"></i>
+              {{/if}}
+            </div>
+
+            <div class="panel-footer-item">
+              <button class="btn btn-default" data-event-action="showStripeConnectSettings">
+                <i class="fa fa-gear"></i>
+              </button>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<template name="stripeConnectRedirect">
+    <span data-i18n=“admin.redirect.stripeConnectWaitingNote>Will auto redirect in a couple seconds or click here.</span>
+</template>
diff --git a/imports/plugins/included/payments-stripe-connect/client/settings/settings.js b/imports/plugins/included/payments-stripe-connect/client/settings/settings.js
@@ -0,0 +1,43 @@
+import { Template } from "meteor/templating";
+import { Reaction, i18next, Router } from "/client/api";
+import { Packages } from "/lib/collections";
+import { StripeConnectPackageConfig } from "../../lib/collections/schemas";
+
+import "./settings.html";
+
+Template.stripeConnectSettings.helpers({
+  StripeConnectPackageConfig() {
+    return StripeConnectPackageConfig;
+  },
+  packageData() {
+    return Packages.findOne({
+      name: "reaction-stripe-connect",
+      shopId: Reaction.getShopId()
+    });
+  }
+});
+
+AutoForm.hooks({
+  "stripe-connect-update-form": {
+    onSuccess: function () {
+      return Alerts.toast(i18next.t("admin.settings.saveSuccess"), "success");
+    },
+    onError: function () {
+      return Alerts.toast(`${i18next.t("admin.settings.saveFailed")} ${error}`, "error");
+    }
+  }
+});
+
+Template.stripeConnectRedirect.onCreated(function () {
+  // TODO: Verify that this works and define steps to reproduce.
+  // grab stripe connects oauth values and redirect the user
+  const authCode = Router.getQueryParam("code");
+
+  Meteor.call("stripeConnect/saveSellerParams", Reaction.getSellerShopId(), authCode, function (err) {
+    if (err) {
+      // TODO: i18n here
+      Alerts.toast("There was an error with saving your seller params from stripe.");
+    }
+    Reaction.Router.go("/");
+  });
+});
diff --git a/imports/plugins/included/payments-stripe-connect/lib/collections/schemas/index.js b/imports/plugins/included/payments-stripe-connect/lib/collections/schemas/index.js
@@ -0,0 +1 @@
+export * from "./stripe-connect";
diff --git a/imports/plugins/included/payments-stripe-connect/lib/collections/schemas/stripe-connect.js b/imports/plugins/included/payments-stripe-connect/lib/collections/schemas/stripe-connect.js
@@ -0,0 +1,24 @@
+import { SimpleSchema } from "meteor/aldeed:simple-schema";
+import { PackageConfig } from "/lib/collections/schemas/registry";
+
+export const StripeConnectPackageConfig = new SimpleSchema([
+  PackageConfig, {
+    "settings.mode": {
+      type: Boolean,
+      defaultValue: false
+    },
+    "settings.api_key": {
+      type: String,
+      label: "API Client ID"
+    },
+    "settings.transactionFee.enabled": {
+      type: Boolean,
+      label: "Enable Fee"
+    },
+    "settings.transactionFee.percentage": {
+      type: Number,
+      label: "Fee Percentage",
+      decimal: true
+    }
+  }
+]);
diff --git a/imports/plugins/included/payments-stripe-connect/register.js b/imports/plugins/included/payments-stripe-connect/register.js
@@ -0,0 +1,43 @@
+/* eslint camelcase: 0 */
+import { Reaction } from "/server/api";
+
+Reaction.registerPackage({
+  label: "Stripe Connect",
+  name: "reaction-stripe-connect",
+  icon: "fa fa-cc-stripe",
+  autoEnable: true,
+  settings: {
+    "mode": false,
+    "api_key": "",
+    "reaction-stripe-connect": {
+      enabled: false
+    },
+    "stripe-redirect-url": "stripe-connect-redirect",
+    "transactionFee": {
+      enabled: false,
+      percentage: 0
+    }
+  },
+  registry: [
+    // Settings panel
+    {
+      label: "Stripe Connect",
+      provides: "paymentSettings",
+      container: "dashboard",
+      template: "stripeConnectSettings"
+    },
+
+    // Payment form for checkout
+    {
+      template: "stripePaymentForm",
+      provides: "paymentMethod",
+      icon: "fa fa-cc-stripe"
+    },
+
+    // Redirect for Stripe Connect Sign-In
+    {
+      template: "stripeConnectRedirect",
+      route: "/stripe-connect-redirect"
+    }
+  ]
+});
diff --git a/imports/plugins/included/payments-stripe-connect/server/i18n/ar.json b/imports/plugins/included/payments-stripe-connect/server/i18n/ar.json
@@ -0,0 +1,24 @@
+[{
+  "language": "Arabic",
+  "i18n": "ar",
+  "ns": "reaction-stripe-connect",
+  "translation": {
+    "reaction-payments": {
+      "admin": {
+        "shortcut": {
+          "stripeConnectLabel": "Stripe Connect"
+        },
+        "dashboard": {
+          "stripeConnectLabel": "Stripe Connect",
+          "stripeConnectDescription": "المدفوعات شريط"
+        },
+        "paymentSettings": {
+          "stripeConnectLabel": "Stripe Connect",
+          "stripeConnectSettingsLabel": "Stripe Connect",
+          "stripeConnectSettingsDescription": "لم يكن لديك معرف العميل الشريط API؟",
+          "stripeConnectSettingsGetItHere": "أحضره هنا"
+        }
+      }
+    }
+  }
+}]
diff --git a/imports/plugins/included/payments-stripe-connect/server/i18n/bg.json b/imports/plugins/included/payments-stripe-connect/server/i18n/bg.json
@@ -0,0 +1,24 @@
+[{
+  "language": "Bulgarian",
+  "i18n": "bg",
+  "ns": "reaction-stripeConnect",
+  "translation": {
+    "reaction-payments": {
+      "admin": {
+        "shortcut": {
+          "stripeConnectLabel": "Stripe Connect"
+        },
+        "dashboard": {
+          "stripeConnectLabel": "Stripe Connect",
+          "stripeConnectDescription": "плащания Stripe Connect"
+        },
+        "paymentSettings": {
+          "stripeConnectLabel": "Stripe Connect",
+          "stripeConnectSettingsLabel": "Stripe Connect",
+          "stripeConnectSettingsDescription": "Не трябва Stripe Connect API Client ID а?",
+          "stripeConnectSettingsGetItHere": "Вземете го от тук"
+        }
+      }
+    }
+  }
+}]