WIP

src/components/flow/actions/requestoptin/RequestOptIn.tsx

@@ -0,0 +1,8 @@
+import { RequestOptIn } from 'flowTypes';
+import * as React from 'react';
+
+const RequestOptInComp: React.SFC<RequestOptIn> = (action: RequestOptIn): JSX.Element => {
+  return <div className="optin">{action.optin.name}</div>;
+};
+
+export default RequestOptInComp;

src/components/flow/actions/requestoptin/RequestOptInForm.tsx

@@ -0,0 +1,109 @@
+import { react as bindCallbacks } from 'auto-bind';
+import Dialog, { ButtonSet } from 'components/dialog/Dialog';
+import { ActionFormProps } from 'components/flow/props';
+import AssetSelector from 'components/form/assetselector/AssetSelector';
+import TypeList from 'components/nodeeditor/TypeList';
+import { fakePropType } from 'config/ConfigProvider';
+import * as React from 'react';
+import { Asset } from 'store/flowContext';
+import { FormState, mergeForm } from 'store/nodeEditor';
+import { shouldRequireIf, validate } from 'store/validators';
+
+import i18n from 'config/i18n';
+import { Trans } from 'react-i18next';
+import { renderIssues } from '../helpers';
+import { initializeForm, stateToAction } from './helpers';
+
+export interface RequestOptInFormState extends FormState {
+  optin: any;
+}
+
+export const controlLabelSpecId = 'label';
+
+export default class AddLabelsForm extends React.PureComponent<
+  ActionFormProps,
+  RequestOptInFormState
+> {
+  public static contextTypes = {
+    assetService: fakePropType
+  };
+
+  constructor(props: ActionFormProps) {
+    super(props);
+
+    this.state = initializeForm(this.props.nodeSettings);
+    bindCallbacks(this, {
+      include: [/^on/, /^handle/]
+    });
+  }
+
+  public handleSave(): void {
+    const valid = this.handleOptInChanged(this.state.optin.value!, true);
+
+    if (valid) {
+      const newAction = stateToAction(this.props.nodeSettings, this.state);
+      this.props.updateAction(newAction);
+      this.props.onClose(false);
+    }
+  }
+
+  public handleOptInChanged(selected: Asset[], submitting: boolean = false): boolean {
+    const updates: Partial<RequestOptInFormState> = {
+      optin: validate(i18n.t('forms.title', 'Name'), selected, [shouldRequireIf(submitting)])
+    };
+
+    const updated = mergeForm(this.state, updates);
+    this.setState(updated);
+    return updated.valid;
+  }
+
+  private getButtons(): ButtonSet {
+    return {
+      primary: { name: i18n.t('buttons.ok', 'Ok'), onClick: this.handleSave },
+      secondary: {
+        name: i18n.t('buttons.cancel', 'Cancel'),
+        onClick: () => this.props.onClose(true)
+      }
+    };
+  }
+
+  public handleCreateAssetFromInput(input: string): any {
+    return { name: input };
+  }
+
+  public handleOptInCreated(optin: Asset): void {
+    // update our store with our new group
+    this.props.addAsset('optins', optin);
+
+    this.handleOptInChanged(this.state.optin.value);
+  }
+
+  public render(): JSX.Element {
+    const typeConfig = this.props.typeConfig;
+    return (
+      <Dialog title={typeConfig.name} headerClass={typeConfig.type} buttons={this.getButtons()}>
+        <TypeList __className="" initialType={typeConfig} onChange={this.props.onTypeChange} />
+        <p data-spec={controlLabelSpecId}>
+          <Trans i18nKey="forms.request_optin_summary">Select the Opt-In to request</Trans>
+        </p>
+
+        <AssetSelector
+          name={i18n.t('forms.request_optin.title', 'Request Opt-In')}
+          placeholder={i18n.t(
+            'enter_to_create_optin',
+            'Enter the name of an existing Opt-In or create a new one'
+          )}
+          assets={this.props.assetStore.optins}
+          entry={this.state.optin}
+          searchable={true}
+          expressions={true}
+          onChange={this.handleOptInChanged}
+          createPrefix={i18n.t('create_optin', 'Create Opt-In') + ': '}
+          createAssetFromInput={this.handleCreateAssetFromInput}
+          onAssetCreated={this.handleOptInCreated}
+        />
+        {renderIssues(this.props)}
+      </Dialog>
+    );
+  }
+}

src/components/flow/actions/requestoptin/helpers.ts

@@ -0,0 +1,32 @@
+import { getActionUUID } from 'components/flow/actions/helpers';
+import { Types } from 'config/interfaces';
+import { RequestOptIn } from 'flowTypes';
+import { NodeEditorSettings } from 'store/nodeEditor';
+import { RequestOptInFormState } from './RequestOptInForm';
+
+export const initializeForm = (settings: NodeEditorSettings): RequestOptInFormState => {
+  if (settings.originalAction && settings.originalAction.type === Types.request_optin) {
+    const action = settings.originalAction as RequestOptIn;
+    return {
+      optin: { value: action.optin },
+      valid: true
+    };
+  }
+
+  return {
+    optin: { value: null },
+    valid: false
+  };
+};
+
+export const stateToAction = (
+  settings: NodeEditorSettings,
+  formState: RequestOptInFormState
+): RequestOptIn => {
+  const result = {
+    type: Types.request_optin,
+    optin: formState.optin.value[0],
+    uuid: getActionUUID(settings, Types.add_input_labels)
+  };
+  return result;
+};

src/components/shared.module.scss

@@ -18,6 +18,7 @@
     border-top-right-radius: 3px;
     padding: 10px;
     color: $red;
+
     .icon {
       display: inline-block;
       vertical-align: middle;
@@ -38,6 +39,7 @@
 
 .issue_help {
   cursor: pointer;
+
   &:hover {
     color: lighten($red, 3%);
     text-decoration: underline;
@@ -70,7 +72,8 @@
 
 .msg,
 .say_msg,
-.send_msg {
+.send_msg,
+.request_optin {
   background: $blue;
 }
 
@@ -103,13 +106,11 @@
   $color_1: tomato;
   $color_2: lighten(tomato, 3%);
 
-  background-image: repeating-linear-gradient(
-    120deg,
-    $color_1,
-    $color_1 6px,
-    $color_2 6px,
-    $color_2 18px
-  ) !important;
+  background-image: repeating-linear-gradient(120deg,
+      $color_1,
+      $color_1 6px,
+      $color_2 6px,
+      $color_2 18px) !important;
 }
 
 .missing_asset {
@@ -144,6 +145,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+
   .node_group {
     padding-right: 5px;
   }
@@ -159,4 +161,4 @@
 
 .alert {
   background: $red;
-}
+}

src/config/interfaces.ts

@@ -56,6 +56,7 @@ export enum Types {
   wait_for_video = 'wait_for_video',
   wait_for_location = 'wait_for_location',
   wait_for_image = 'wait_for_image',
+  request_optin = 'request_optin',
   missing = 'missing',
   say_msg = 'say_msg',
   play_audio = 'play_audio'
@@ -103,7 +104,8 @@ export enum FeatureFilter {
   HAS_CLASSIFIER = 'classifier',
   HAS_TICKETER = 'ticketer',
   HAS_FACEBOOK = 'facebook',
-  HAS_LOCATIONS = 'locations'
+  HAS_LOCATIONS = 'locations',
+  HAS_OPTINS = 'optins'
 }
 
 export interface FlowTypeVisibility {

src/config/typeConfigs.ts

@@ -63,6 +63,8 @@ import i18n from 'config/i18n';
 import SchemeRouterForm from 'components/flow/routers/scheme/SchemeRouterForm';
 import TicketRouterForm from 'components/flow/routers/ticket/TicketRouterForm';
 import OpenTicketComp from 'components/flow/actions/openticket/OpenTicket';
+import RequestOptInForm from 'components/flow/actions/requestoptin/RequestOptInForm';
+import RequestOptInComp from 'components/flow/actions/requestoptin/RequestOptIn';
 
 const dedupeTypeConfigs = (typeConfigs: Type[]) => {
   const map: any = {};
@@ -164,12 +166,12 @@ export const SCHEMES: Scheme[] = [
   {
     scheme: 'vk',
     name: i18n.t('schemes.vk.name', 'VK'),
-    path: i18n.t('schemes.vk.path', 'VK ID'),
+    path: i18n.t('schemes.vk.path', 'VK ID')
   },
   {
     scheme: 'discord',
     name: i18n.t('schemes.discord.name', 'Discord'),
-    path: i18n.t('schemes.discord.path', 'Discord ID'),
+    path: i18n.t('schemes.discord.path', 'Discord ID')
   },
   {
     scheme: 'webchat',
@@ -180,7 +182,7 @@ export const SCHEMES: Scheme[] = [
   {
     scheme: 'rocketchat',
     name: i18n.t('schemes.rocketchat.name', 'RocketChat'),
-    path: i18n.t('schemes.rocketchat.path', 'RocketChat ID'),
+    path: i18n.t('schemes.rocketchat.path', 'RocketChat ID')
   },
   {
     scheme: 'ext',
@@ -514,6 +516,14 @@ export const typeConfigList: Type[] = [
     localization: RouterLocalizationForm,
     localizeableKeys: ['exits'],
     form: SchemeRouterForm
+  },
+  {
+    type: Types.request_optin,
+    name: i18n.t('actions.request_optin.name', 'Request Opt-In'),
+    description: i18n.t('actions.request_optin.description', 'Send an Opt-In request'),
+    form: RequestOptInForm,
+    component: RequestOptInComp,
+    filter: FeatureFilter.HAS_OPTINS
   }
   // {type: 'random', name: 'Random Split', description: 'Split them up randomly', form: RandomRouterForm}
 ];

src/external/index.ts

@@ -311,6 +311,11 @@ export const createAssetStore = (endpoints: Endpoints): Promise<AssetStore> => {
         type: AssetType.Label,
         items: {}
       },
+      optins: {
+        endpoint: getURL(endpoints.optins),
+        type: AssetType.OptIn,
+        items: {}
+      },
       results: {
         type: AssetType.Result,
         items: {}

src/flowTypes.ts

@@ -34,6 +34,7 @@ export interface Endpoints {
   revisions: string;
   activity: string;
   labels: string;
+  optins: string;
   channels: string;
   classifiers: string;
   ticketers: string;
@@ -59,6 +60,7 @@ export interface FlowEditorConfig {
   path?: string;
   headers?: any;
   brand: string;
+
   onLoad?: () => void;
   onActivityClicked?: (uuid: string) => void;
   onChangeLanguage?: (code: string, name: string) => void;
@@ -292,6 +294,11 @@ export interface Label {
   name_match?: string;
 }
 
+export interface OptIn {
+  uuid: string;
+  name: string;
+}
+
 export interface Flow {
   uuid: string;
   name: string;
@@ -395,6 +402,13 @@ export interface AddLabels extends Action {
   labels: Label[];
 }
 
+export interface RequestOptIn extends Action {
+  optin: {
+    uuid: string;
+    name: string;
+  };
+}
+
 export interface AddURN extends Action {
   scheme: string;
   path: string;

src/store/flowContext.ts

@@ -72,6 +72,7 @@ export enum AssetType {
   Label = 'label',
   Language = 'language',
   NameMatch = 'name_match',
+  OptIn = 'optin',
   Remove = 'remove',
   Resthook = 'resthook',
   Result = 'result',