Rewrite example payment settings pane to react #1817 (#1848)

* Have base to be release20

* Nitpick change on index

imports/plugins/included/payments-example/client/index.js

@@ -1,2 +1,2 @@
 import "./checkout/example";
-import "./settings/example";
+import "./settings/templates/example";

imports/plugins/included/payments-example/client/settings/components/exampleSettingsForm.js

@@ -0,0 +1,41 @@
+import React, { Component, PropTypes } from "react";
+import { FieldGroup, Translation } from "/imports/plugins/core/ui/client/components";
+
+class ExampleSettingsForm extends Component {
+  render() {
+    const { packageData } = this.props;
+
+    return (
+      <div>
+        { !packageData.settings.apiKey &&
+          <div className="alert alert-info">
+            <Translation defaultValue="Example Credentials" i18nKey="admin.paymentSettings.exampleCredentials"/>
+          </div>
+        }
+
+        <form onSubmit={this.props.onSubmit}>
+          <FieldGroup
+            label="API Key"
+            name="apiKey"
+            type="text"
+            onChange={this.props.onChange}
+          />
+
+          <button className="btn btn-primary pull-right" type="submit">
+            <Translation defaultValue="Save Changes" i18nKey="app.saveChanges"/>
+          </button>
+        </form>
+
+      </div>
+    );
+  }
+}
+
+ExampleSettingsForm.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  packageData: PropTypes.object
+};
+
+export default ExampleSettingsForm;
+

imports/plugins/included/payments-example/client/settings/components/index.js

@@ -0,0 +1 @@
+export { default as ExampleSettingsForm } from "./exampleSettingsForm.js";

imports/plugins/included/payments-example/client/settings/containers/exampleSettingsFormContainer.js

@@ -0,0 +1,80 @@
+import React, { Component, PropTypes } from "react";
+import { Meteor } from "meteor/meteor";
+import { composeWithTracker } from "/lib/api/compose";
+import { Packages } from "/lib/collections";
+import { Loading } from "/imports/plugins/core/ui/client/components";
+import { TranslationProvider } from "/imports/plugins/core/ui/client/providers";
+import { Reaction, i18next } from "/client/api";
+import { ExampleSettingsForm } from "../components";
+
+class ExampleSettingsFormContainer extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      apiKey: ""
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.saveUpdate = this.saveUpdate.bind(this);
+  }
+
+  handleChange(e) {
+    e.preventDefault();
+    this.setState({ apiKey: e.target.value });
+  }
+
+  handleSubmit(e) {
+    e.preventDefault();
+
+    const packageId = this.props.packageData._id;
+    const settingsKey = this.props.packageData.registry[0].settingsKey;
+    const apiKey = this.state.apiKey;
+
+    const fields = [{
+      property: "apiKey",
+      value: apiKey
+    }];
+
+    this.saveUpdate(fields, packageId, settingsKey);
+  }
+
+  saveUpdate(fields, id, settingsKey) {
+    Meteor.call("registry/update", id, settingsKey, fields, (err) => {
+      if (err) {
+        return Alerts.toast(i18next.t("admin.settings.saveFailed"), "error");
+      }
+      return Alerts.toast(i18next.t("admin.settings.saveSuccess"), "success");
+    });
+  }
+
+  render() {
+    return (
+      <TranslationProvider>
+        <ExampleSettingsForm
+          onChange={this.handleChange}
+          onSubmit={this.handleSubmit}
+          packageData={this.props.packageData}
+        />
+      </TranslationProvider>
+    );
+  }
+}
+
+ExampleSettingsFormContainer.propTypes = {
+  packageData: PropTypes.object
+};
+
+const composer = ({}, onData) => {
+  const subscription = Meteor.subscribe("Packages");
+  if (subscription.ready()) {
+    const packageData = Packages.findOne({
+      name: "example-paymentmethod",
+      shopId: Reaction.getShopId()
+    });
+    onData(null, { packageData });
+  }
+};
+
+export default composeWithTracker(composer, Loading)(ExampleSettingsFormContainer);

imports/plugins/included/payments-example/client/settings/containers/index.js

@@ -0,0 +1 @@
+export { default as ExampleSettingsFormContainer } from "./exampleSettingsFormContainer";

imports/plugins/included/payments-example/client/settings/templates/example.html

@@ -0,0 +1,5 @@
+<template name="exampleSettings">
+  <div>
+    {{> React ExampleSettings}}
+  </div>
+</template>

imports/plugins/included/payments-example/client/settings/templates/example.js

@@ -0,0 +1,11 @@
+import { ExampleSettingsFormContainer } from "../containers";
+import { Template } from "meteor/templating";
+import "./example.html";
+
+Template.exampleSettings.helpers({
+  ExampleSettings() {
+    return {
+      component: ExampleSettingsFormContainer
+    };
+  }
+});