Use new Reaction component library components for the SMS settings form

imports/plugins/core/versions/server/migrations/27_change_sms_template_name.js

@@ -0,0 +1,24 @@
+import { Migrations } from "meteor/percolate:migrations";
+import { Packages } from "/lib/collections";
+
+Migrations.add({
+  version: 27,
+  up() {
+    Packages.update({
+      "registry.template": "smsSettings"
+    }, {
+      $set: {
+        "registry.$.template": "SmsSettings"
+      }
+    }, { bypassCollection2: true });
+  },
+  down() {
+    Packages.update({
+      "registry.template": "SmsSettings"
+    }, {
+      $set: {
+        "registry.$.template": "smsSettings"
+      }
+    }, { bypassCollection2: true });
+  }
+});

imports/plugins/core/versions/server/migrations/index.js

@@ -24,3 +24,4 @@ import "./23_drop_tempstore_collections";
 import "./24_publish_all_existing_visible_products";
 import "./25_update_catalog_schema.js";
 import "./26_remove_revision_control";
+import "./27_change_sms_template_name";

imports/plugins/included/sms/client/actions/settings.js

@@ -7,47 +7,29 @@ export default {
   /**
    * Save email settings
    * @param {Object} settings - object of mail provider settings
-   * @param {Function} callback - optional callback
-   * @return {Boolean} returns true if all fields provided and update method called
+   * @return {Promise<undefined>}
    */
-  saveSettings(settings, callback) {
-    const { apiKey, apiToken, smsProvider, smsPhone } = settings;
-
-    if (!apiKey) {
-      Alert(i18next.t("app.error"), i18next.t("admin.alerts.noApiKey"), "error");
-      return callback();
-    }
-    if (!apiToken) {
-      Alert(i18next.t("app.error"), i18next.t("admin.alerts.noApiToken"), "error");
-      return callback();
-    }
-    if (!smsProvider) {
-      Alert(i18next.t("app.error"), i18next.t("admin.alerts.noSmsProvider"), "error");
-      return callback();
-    }
-    if (!smsPhone) {
-      Alert(i18next.t("app.error"), i18next.t("admin.alerts.noSmsPhone"), "error");
-      return callback();
-    }
-
-    const save = () => {
+  saveSettings(settings) {
+    return new Promise((resolve) => {
       Meteor.call("sms/saveSettings", settings, (err) => {
+        resolve();
+
         if (err) {
-          return Alert(
+          Alert(
             i18next.t("app.error"),
             "Your API credentials could not be saved",
             "error"
           );
+          return;
         }
-        return Alert({
+
+        Alert({
           title: i18next.t("app.success"),
           text: i18next.t("admin.alerts.saveSuccess"),
           type: "success",
           timer: 1700
-        }).catch(() => null);
+        });
       });
-    };
-    save();
-    return callback();
+    });
   }
 };

imports/plugins/included/sms/client/components/smsSettings.js

@@ -1,60 +1,85 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
+import { Form } from "reacto-form";
 import { Components } from "@reactioncommerce/reaction-components";
-import { Meteor } from "meteor/meteor";
-import { Reaction } from "/client/api";
+import Field from "@reactioncommerce/components/Field/v1";
+import Select from "@reactioncommerce/components/Select/v1";
+import TextInput from "@reactioncommerce/components/TextInput/v1";
+import ErrorsBlock from "@reactioncommerce/components/ErrorsBlock/v1";
+import Button from "@reactioncommerce/components/Button/v1";
+import Logger from "@reactioncommerce/logger";
+import { i18next } from "/client/api";
+
+const iconComponentStyles = {
+  fontSize: "1em",
+  verticalAlign: "middle"
+};
+
+const iconComponents = {
+  iconClear: (<i className="fa fa-times" style={iconComponentStyles} />),
+  iconError: (<i className="fa fa-exclamation-triangle" style={iconComponentStyles} />),
+  iconValid: (<i className="fa fa-check-circle" style={iconComponentStyles} />)
+};
+
+const smsProviders = [{
+  label: "Twilio", value: "twilio"
+}, {
+  label: "Nexmo", value: "nexmo"
+}];
 
 class SmsSettings extends Component {
-  constructor(props) {
-    super(props);
+  static propTypes = {
+    saveSettings: PropTypes.func.isRequired,
+    settings: PropTypes.shape({
+      apiKey: PropTypes.string,
+      apiToken: PropTypes.string,
+      smsPhone: PropTypes.string,
+      smsProvider: PropTypes.string
+    })
+  };
 
-    this.state = {
-      settings: props.settings || {},
-      isSaving: false
-    };
-    this.handleStateChange = this.handleStateChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.handleSelect = this.handleSelect.bind(this);
-  }
+  static async validator(settings) {
+    const { apiKey, apiToken, smsProvider, smsPhone } = settings;
 
-  handleStateChange(e) {
-    const { settings } = this.state;
-    settings[e.target.name] = e.target.value;
-    this.setState({ settings });
-  }
+    const errors = [];
+    if (!apiKey) {
+      errors.push({ message: i18next.t("admin.alerts.noApiKey"), name: "apiKey" });
+    }
+    if (!apiToken) {
+      errors.push({ message: i18next.t("admin.alerts.noApiToken"), name: "apiToken" });
+    }
+    if (!smsProvider) {
+      errors.push({ message: i18next.t("admin.alerts.noSmsProvider"), name: "smsProvider" });
+    }
+    if (!smsPhone) {
+      errors.push({ message: i18next.t("admin.alerts.noSmsPhone"), name: "smsPhone" });
+    }
 
-  handleSubmit(e) {
-    e.preventDefault();
-    const { saveSettings } = this.props;
-    const { settings } = this.state;
-    this.setState({ isSaving: true });
-    saveSettings(settings, () => this.setState({ isSaving: false }));
+    return errors;
   }
 
-  handleSelect(e) {
-    const { settings } = this.state;
-    settings.smsProvider = e;
-    this.setState({ settings });
+  state = {
+    isSaving: false
   }
 
-  handleProductFieldSave = (productId, fieldName, value) => {
-    let updateValue = value;
-    // special case, slugify handles.
-    if (fieldName === "handle") {
-      updateValue = Reaction.getSlug(value);
-    }
-    Meteor.call("products/updateProductField", productId, fieldName, updateValue);
-  }
+  handleSubmit = (settings) => {
+    const { saveSettings } = this.props;
 
+    this.setState({ isSaving: true });
+    return saveSettings(settings)
+      .then((result) => {
+        this.setState({ isSaving: false });
+        return result;
+      })
+      .catch((error) => {
+        this.setState({ isSaving: false });
+        Logger.error(error);
+      });
+  };
 
   render() {
-    const { settings, isSaving } = this.state;
-
-    const smsProviders = [{
-      label: "Twilio", value: "twilio"
-    }, {
-      label: "Nexmo", value: "nexmo"
-    }];
+    const { settings } = this.props;
+    const { isSaving } = this.state;
 
     return (
       <Components.CardGroup>
@@ -65,69 +90,57 @@ class SmsSettings extends Component {
             title="SMS Provider"
           />
           <Components.CardBody expandable={true}>
-            <form onSubmit={this.handleSubmit}>
-              <Components.Select
-                clearable={false}
-                label="Provider Name"
-                i18nKeyLabel="admin.settings.providerName"
-                placeholder="Select an SMS provider"
-                i18nKeyPlaceholder="admin.settings.selectProvider"
+            <Form
+              logErrorsOnSubmit
+              onSubmit={this.handleSubmit}
+              ref={(ref) => { this.form = ref; }}
+              validator={SmsSettings.validator}
+              value={settings}
+            >
+              <Field
+                label={i18next.t("admin.settings.providerName", { defaultValue: "Provider Name" })}
                 name="smsProvider"
-                onChange={this.handleSelect}
-                options={smsProviders}
-                value={settings.smsProvider || ""}
-              />
+              >
+                <Select
+                  name="smsProvider"
+                  options={smsProviders}
+                  placeholder={i18next.t("admin.settings.selectProvider", { defaultValue: "Select an SMS provider" })}
+                />
+                <ErrorsBlock names={["smsProvider"]} />
+              </Field>
               <hr/>
-              <Components.TextField
-                label="SMS Phone Number"
-                type="text"
-                i18nKeyLabel="admin.settings.phoneNumber"
+              <Field
+                label={i18next.t("admin.settings.phoneNumber", { defaultValue: "SMS Phone Number" })}
                 name="smsPhone"
-                value={settings.smsPhone || ""}
-                onChange={this.handleStateChange}
-              />
-              <Components.TextField
-                label="API Key"
-                type="password"
-                i18nKeyLabel="admin.settings.apiKey"
+              >
+                <TextInput name="smsPhone" {...iconComponents} />
+                <ErrorsBlock names={["smsPhone"]} />
+              </Field>
+              <Field
+                label={i18next.t("admin.settings.apiKey", { defaultValue: "API Key" })}
                 name="apiKey"
-                value={settings.apiKey || ""}
-                onChange={this.handleStateChange}
-              />
-              <Components.TextField
-                label="API Token/Secret"
                 type="password"
-                i18nKeyLabel="admin.settings.apiToken"
+              >
+                <TextInput name="apiKey" {...iconComponents} />
+                <ErrorsBlock names={["apiKey"]} />
+              </Field>
+              <Field
+                label={i18next.t("admin.settings.apiToken", { defaultValue: "API Token/Secret" })}
                 name="apiToken"
-                value={settings.apiToken || ""}
-                onChange={this.handleStateChange}
-              />
-              <Components.Button
-                bezelStyle="solid"
-                status="primary"
-                className="pull-right"
-                type="submit" disabled={isSaving}
+                type="password"
               >
-                {isSaving ?
-                  <i className="fa fa-refresh fa-spin"/>
-                  : <span data-i18n="app.save">Save</span>}
-              </Components.Button>
-            </form>
+                <TextInput name="apiToken" {...iconComponents} />
+                <ErrorsBlock names={["apiToken"]} />
+              </Field>
+              <div className="pull-right">
+                <Button isWaiting={isSaving} onClick={() => this.form.submit()}>{i18next.t("app.save", { defaultValue: "Save" })}</Button>
+              </div>
+            </Form>
           </Components.CardBody>
         </Components.Card>
       </Components.CardGroup>
     );
   }
 }
 
-SmsSettings.propTypes = {
-  saveSettings: PropTypes.func.isRequired,
-  settings: PropTypes.shape({
-    apiKey: PropTypes.string,
-    apiToken: PropTypes.string,
-    smsPhone: PropTypes.string,
-    smsProvider: PropTypes.string
-  })
-};
-
 export default SmsSettings;

imports/plugins/included/sms/client/index.js

@@ -1,4 +1 @@
-import "./templates/smsSettings.html";
-import "./templates/smsSettings.js";
-
 export { default as SmsSettings } from "./containers/smsSettingsContainer";

imports/plugins/included/sms/register.js

@@ -22,7 +22,7 @@ Reaction.registerPackage({
     route: "/dashboard/sms",
     provides: ["settings"],
     container: "dashboard",
-    template: "smsSettings",
+    template: "SmsSettings",
     showForShopTypes: ["primary"]
   }]
 });

imports/plugins/included/sms/server/methods/sms.js

@@ -53,7 +53,7 @@ Meteor.methods({
    * @summary This send the sms to the user
    * @param {String} message - The message to send
    * @param {String} userId - The user to receive the message
-   * @param {String} shopId - The currenct shopId
+   * @param {String} shopId - The current shopId
    * @return {object} returns result
    */
   "sms/send": (message, userId, shopId) => {