Add common CSS and components

[MAILPOET-2677]

assets/css/src/settings.scss

@@ -0,0 +1,31 @@
+.mailpoet-settings-grid {
+  display: grid;
+  grid-column-gap: 25px;
+  grid-row-gap: 20px;
+  grid-template-columns: 20em 1fr;
+  margin: 25px 20px 10px 0;
+}
+
+.mailpoet-settings-label {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.mailpoet-settings-label-title {
+  color: #23282d;
+  cursor: pointer;
+}
+
+.mailpoet-settings-inputs label {
+  display: inline-block;
+  margin: 2px 5px;
+  min-width: 50px;
+}
+
+.mailpoet-settings-inputs input,
+.mailpoet-settings-inputs select,
+.mailpoet-settings-inputs textarea {
+  display: inline-block;
+  margin: 2px;
+}

assets/js/src/settings/components/index.ts

@@ -0,0 +1,5 @@
+export { default as Tabs } from './tabs';
+export { default as Label } from './label';
+export { default as Inputs } from './inputs';
+export { default as SaveButton } from './save_button';
+export { default as SegmentsSelect } from './segments_select';

assets/js/src/settings/components/inputs.tsx

@@ -0,0 +1,9 @@
+import React, { ReactNode } from 'react';
+
+type Props = {
+  children: ReactNode
+}
+
+export default ({ children }: Props) => (
+  <div className="mailpoet-settings-inputs">{children}</div>
+);

assets/js/src/settings/components/label.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+type Props = {
+  title: string
+  description: string
+  htmlFor: string
+}
+
+export default ({ title, description, htmlFor }: Props) => (
+  <div className="mailpoet-settings-label">
+    <label className="mailpoet-settings-label-title" htmlFor={htmlFor}>{title}</label>
+    <p className="description">{description}</p>
+  </div>
+);

assets/js/src/settings/components/save_button.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+import { useAction, useSelector } from 'settings/store/hooks';
+import { GlobalContext } from 'context';
+
+export default () => {
+  const [clicked, setClicked] = React.useState(false);
+  const isSaving = useSelector('isSaving')();
+  const error = useSelector('getError')();
+  const save = useAction('saveSettings');
+  const { notices } = React.useContext<any>(GlobalContext);
+  const showError = notices.error;
+  const showSuccess = notices.success;
+  React.useEffect(() => {
+    if (clicked && !isSaving) {
+      if (error) showError(error.map((err) => <p>{err}</p>));
+      else showSuccess(<p>{MailPoet.I18n.t('settingsSaved')}</p>);
+    }
+  }, [clicked, error, isSaving, showError, showSuccess]);
+  const onClick = () => {
+    setClicked(true);
+    save();
+  };
+  return (
+    <div>
+      <button type="button" className="button button-primary" disabled={isSaving} onClick={onClick}>{MailPoet.I18n.t('saveSettings')}</button>
+    </div>
+  );
+};

assets/js/src/settings/components/segments_select.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import $ from 'jquery';
+import 'select2';
+
+type Props = {
+  id: string
+  value: string[]
+  setValue: (x: string[]) => any
+}
+
+export default ({ id, value, setValue }: Props) => {
+  React.useLayoutEffect(() => {
+    const idSelector = `#${id}`;
+    $(idSelector).select2();
+    $(idSelector).on('change', (e) => {
+      setValue(Array.from(e.target.selectedOptions).map((x: any) => x.value));
+    });
+    return () => $(idSelector).select2('destroy');
+  }, [id, setValue]);
+  const segments: any[] = (window as any).mailpoet_segments;
+  return (
+    <select id={id} defaultValue={value} multiple>
+      {segments.map((seg) => (
+        <option key={seg.id} value={seg.id}>
+          {`${seg.name} (${seg.subscribers})`}
+        </option>
+      ))}
+    </select>
+  );
+};

views/settings.html

@@ -1,5 +1,9 @@
 <% extends 'layout.html' %>
 
+<% block after_css %>
+<%= stylesheet('settings.css') %>
+<% endblock %>
+
 <% block content %>
   <div id="settings_container"></div>
 
@@ -8,6 +12,7 @@
       var mailpoet_woocommerce_active = <%= json_encode(is_woocommerce_active == true) %>;
       var mailpoet_is_new_user = <%= json_encode(is_new_user == true) %>;
       var mailpoet_settings = <%= json_encode(settings) %>;
+      var mailpoet_segments = <%= json_encode(segments) %>;
     <% endautoescape %>
     var mailpoet_beacon_articles = [
       '57f71d49c697911f2d323486',
@@ -26,6 +31,10 @@
     'wooCommerceTab': __('WooCommerce'),
     'advancedTab': __('Advanced'),
     'keyActivationTab': __('Key Activation'),
+
+    'saveSettings': __('Save settings'),
+    'settingsSaved': __('Settings saved'),
+
     'reinstallConfirmation': __('Are you sure? All of your MailPoet data will be permanently erased (newsletters, statistics, subscribers, etc.).'),
     'announcementHeader': __('Get notified when someone subscribes'),
     'announcementParagraph1': __('It’s been a popular feature request from our users, we hope you get lots of emails about all your new subscribers!'),