Added new element type: ExternalSignature

.gitignore

@@ -1,2 +1,4 @@
-node_modules
+# NPM
+/node_modules/
+*.tgz
 dist

example/SAMPLE_TEMPLATE.js

@@ -105,4 +105,8 @@ Phone: [[MedicalContact.Emergency Contact Phone]]
   **Certifcation:**
   - Certification Title: [[Cert.Title]]
   - Certification Date: [[Cert.Date]]
-}}`;
+}}
+
+# External Signature: "DocuSign"
+[[DocuSign Signatory: ExternalSignature(serviceName: "DocuSign")]]
+`;

package.json

@@ -90,7 +90,7 @@
     "jest-dom": "^3.5.0",
     "node-sass": "^4.12.0",
     "np": "^4.0.2",
-    "openlaw": "^0.2.13",
+    "openlaw": "^0.2.15",
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
     "rimraf": "^2.6.3",

src/ExternalSignature.js

@@ -0,0 +1,140 @@
+// @flow
+
+import * as React from 'react';
+
+import type { ValidityFuncType, ValidateOnKeyUpFuncType } from './types';
+
+type Props = {
+  cleanName: string,
+  description: string,
+  getValidity: ValidityFuncType,
+  inputProps: ?{
+    className?: string,
+    onKeyUp?: (SyntheticKeyboardEvent<HTMLInputElement>) => mixed
+  },
+  name: string,
+  onChange: (string, ?string) => mixed,
+  onKeyUp?: ValidateOnKeyUpFuncType,
+  openLaw: Object,
+  savedValue: string,
+  textLikeInputClass: string,
+};
+
+type State = {
+  email: string,
+  serviceName: string,
+  validationError: boolean,
+};
+
+export class ExternalSignature extends React.PureComponent<Props, State> {
+  // currently used as a helper to send the parent's "on[Event]" props
+  // e.g. if it wants to be sure to do a Collection addition on enter press
+  isDataValid = false;
+
+  state = {
+    email: '',
+    serviceName: '',
+    validationError: false,
+  };
+
+  constructor(props: Props) {
+    super(props);
+
+    const self: any = this;
+    self.onChange = this.onChange.bind(this);
+    self.onKeyUp = this.onKeyUp.bind(this);
+  }
+
+  componentDidMount() {
+    const { getValidity, name, savedValue } = this.props;
+
+    if (savedValue) {
+      const { isError } = getValidity(name, savedValue);
+      const { identity, serviceName } = JSON.parse(savedValue);
+      this.setState({
+        email: (!isError && identity && identity.email ? identity.email: ''),
+        serviceName: serviceName ? serviceName : '',
+      });
+    }
+  }
+
+  onChange(event: SyntheticEvent<HTMLInputElement>) {
+    const eventValue = event.currentTarget.value;
+    const { name, openLaw } = this.props;
+
+    try {
+      if (!eventValue) {
+        this.setState({
+          email: '',
+          validationError: false,
+        }, () => {
+          this.props.onChange(name, undefined);
+
+          this.isDataValid = false;
+        });
+      } else {
+        this.setState({
+          email: eventValue,
+          validationError: false,
+        });
+
+        this.props.onChange(
+          name,
+          openLaw.createExternalSignatureValue('', eventValue, this.state.serviceName),
+        );
+
+        this.isDataValid = true;
+      }
+    } catch (error) {
+      this.isDataValid = false;
+
+      this.setState({
+        email: eventValue,
+        validationError: true,
+      });
+    }
+  }
+
+  onKeyUp(event: SyntheticKeyboardEvent<HTMLInputElement>) {
+    if (this.props.onKeyUp) {
+      this.props.onKeyUp(event, this.isDataValid);
+    }
+
+    if (this.props.inputProps && this.props.inputProps.onKeyUp) {
+      this.props.inputProps.onKeyUp(event);
+    }
+  }
+
+  render() {
+    const { cleanName, description, inputProps, textLikeInputClass } = this.props;
+    const { serviceName, validationError } = this.state;
+    const additionalClassName = validationError ? ' is-error' : '';
+    const inputPropsClassName = (inputProps && inputProps.className) ? ` ${inputProps.className}` : '';
+    const signatureServiceDesc = serviceName ? `Sign with ${serviceName}` : '';
+
+    return (
+      <div className="contract-variable external-signature">
+        <label>
+          <span>{description}</span>
+
+          <input
+            placeholder={description}
+            title={description}
+
+            {...inputProps}
+
+            className={`${textLikeInputClass}${cleanName} ${cleanName}-email${additionalClassName}${inputPropsClassName}`}
+            onChange={this.onChange}
+            onKeyUp={this.onKeyUp}
+            type="email"
+            value={this.state.email}
+          />
+
+          {signatureServiceDesc && (
+            <small>{signatureServiceDesc}</small>
+          )}
+        </label>
+      </div>
+    );
+  }
+}

src/InputRenderer.js

@@ -12,6 +12,7 @@ import { LargeText } from './LargeText';
 import { NumberInput } from './NumberInput';
 import { Text } from './Text';
 import { YesNo } from './YesNo';
+import { ExternalSignature } from './ExternalSignature';
 import { cacheValue } from './utils';
 import type { InputPropsType, ValidateOnKeyUpFuncType } from './types';
 
@@ -37,6 +38,7 @@ const ELEMENT_TYPES = [
   'Number',
   'Text',
   'YesNo',
+  'ExternalSignature',
 ];
 
 // keep React rendering happy with the same Array reference, if not changed.
@@ -176,6 +178,22 @@ export const InputRenderer = (props: RendererProps) => {
         />
       );
 
+    case 'ExternalSignature':
+      return (
+        <ExternalSignature
+          cleanName={cleanName}
+          description={description}
+          getValidity={getValidity}
+          inputProps={inputPropsCached && inputPropsCached.ExternalSignature}
+          name={name}
+          onChange={onChangeFunction}
+          onKeyUp={onKeyUp}
+          openLaw={openLaw}
+          savedValue={savedValue}
+          textLikeInputClass={textLikeInputClass}
+        />
+      );
+
     case 'Image':
       return (
         <ImageInput

src/__tests__/ExternalSignature.test.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import {
+  cleanup,
+  fireEvent,
+  render,
+} from '@testing-library/react';
+import 'jest-dom/extend-expect';
+import { Openlaw } from 'openlaw';
+
+import { ExternalSignature } from '../ExternalSignature';
+import SampleTemplateText from '../../example/SAMPLE_TEMPLATE';
+
+let parameters;
+let compiledTemplate;
+let executionResult;
+let executedVariables;
+
+beforeEach(() => {
+  parameters = {};
+  compiledTemplate = Openlaw.compileTemplate(SampleTemplateText).compiledTemplate;
+  executionResult = Openlaw.execute(compiledTemplate, {}, parameters).executionResult;
+  executedVariables = Openlaw.getExecutedVariables(executionResult, {});
+});
+
+afterEach(cleanup);
+
+test('Can render ExternalSignature', () => {
+  const { getByPlaceholderText } = render(
+    <ExternalSignature
+      cleanName="DocuSign Signatory"
+      description="DocuSign Signatory"
+      getValidity={(name, value) => Openlaw.checkValidity(executedVariables[name], value, executionResult)}
+      name="DocuSign Signatory"
+      onChange={() => {}}
+      onKeyUp={() => {}}
+      openLaw={Openlaw}
+      savedValue=""
+    />
+  );
+
+  getByPlaceholderText(/docusign signatory/i);
+});
+
+test('Can render with savedValue', () => {
+  const { getByDisplayValue, getByPlaceholderText } = render(
+    <ExternalSignature
+      cleanName="DocuSign Signatory"
+      description="DocuSign Signatory"
+      getValidity={(name, value) => {
+        const v = executedVariables.filter(v => Openlaw.getName(v) === name);
+        return Openlaw.checkValidity(v[0], value, executionResult);
+      }}
+      name="DocuSign Signatory"
+      onChange={() => {}}
+      onKeyUp={() => {}}
+      openLaw={Openlaw}
+      savedValue={'{"identity": {"email": "[email protected]"}, "serviceName": "DocuSign"}'}
+    />
+  );
+
+  getByPlaceholderText(/docusign signatory/i);
+  getByDisplayValue(/test@openlaw\.io/i);
+});
+
+test('Can render with savedValue and type another value', () => {
+  const { getByDisplayValue, getByPlaceholderText } = render(
+    <ExternalSignature
+      cleanName="DocuSign Signatory"
+      description="DocuSign Signatory"
+      getValidity={(name, value) => {
+        const v = executedVariables.filter(v => Openlaw.getName(v) === name);
+        return Openlaw.checkValidity(v[0], value, executionResult);
+      }}
+      name="DocuSign Signatory"
+      onChange={() => {}}
+      onKeyUp={() => {}}
+      openLaw={Openlaw}
+      savedValue={'{"identity": {"email": "[email protected]"}, "serviceName": "DocuSign"}'}
+    />
+  );
+
+  getByPlaceholderText(/docusign signatory/i);
+  getByDisplayValue(/test@openlaw\.io/i);
+
+  fireEvent.change(getByDisplayValue(/test@openlaw\.io/i), { target: { value: '[email protected]' } });
+
+  getByDisplayValue(/testB@openlaw\.io/i);
+});
+
+test('Can render without bad savedValue', () => {
+  const { getByDisplayValue, getByPlaceholderText } = render(
+    <ExternalSignature
+      cleanName="DocuSign Signatory"
+      description="DocuSign Signatory"
+      getValidity={(name, value) => {
+        const v = executedVariables.filter(v => Openlaw.getName(v) === name);
+        return Openlaw.checkValidity(v[0], value, executionResult);
+      }}
+      name="DocuSign Signatory"
+      onChange={() => {}}
+      onKeyUp={() => {}}
+      openLaw={Openlaw}
+      savedValue={'{"identity": {"email": "[email protected]"}, "serviceName": "DocuSign"}'}
+    />
+  );
+
+  getByPlaceholderText(/docusign signatory/i);
+  expect(() => getByDisplayValue(/test\.bad@/i)).toThrow();
+});

src/__tests__/OpenLawForm.test.js

@@ -124,6 +124,9 @@ test('Can render with passed inputProps (separate types, e.g. "Address")', () =>
     YesNo: {
       disabled: true,
     },
+    ExternalSignature: {
+      disabled: true,
+    },
   };
 
   render(

src/style.scss

@@ -166,6 +166,12 @@ $button-text: #363636;
       }
     }
 
+    &.external-signature small {
+      margin: 6px 10px 0;
+      display: inline-block;
+      color: #7e7e7e;
+    }
+
     input:disabled,
     select:disabled,
     textarea:disabled,

src/types/index.js

@@ -10,7 +10,8 @@ export type InputTypeEnums =
 	| "LargeText"
 	| "Number"
 	| "Text"
-	| "YesNo";
+	| "YesNo"
+	| "ExternalSignature";
 
 export type InputPropsType = {
 	[InputTypeEnums]: { [key: string]: any },