Add common CSS and components

[MAILPOET-2677]

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>
+  );
+};