(core) In Welcome questionnaire, add 'School' option, ask to enter company or school

Test Plan: Added some checks that company and use_school get recorded. (Live doc will need to be updated before release.)

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D2650

app/client/ui/WelcomePage.ts

@@ -101,6 +101,8 @@ export class WelcomePage extends Disposable {
    */
   private _buildInfoForm(owner: MultiHolder) {
     const allFilled = Observable.create(owner, false);
+    const whereObs = Observable.create(owner, '');
+
     return forms.form({method: "post", action: location.href },
       handleSubmit(),
       (elem) => { setTimeout(() => elem.focus(), 0); },
@@ -108,7 +110,12 @@ export class WelcomePage extends Disposable {
       forms.question(
         forms.text('Where do you plan to use Grist?'),
         forms.checkboxItem([{name: 'use_work'}], 'Work'),
+        forms.checkboxItem([{name: 'use_school'}], 'School'),
         forms.checkboxItem([{name: 'use_personal'}], 'Personal'),
+        forms.textBox({name: 'company'},
+          dom.hide(use => !use(whereObs)),
+          dom.attr('placeholder', (use) => use(whereObs) === 'school' ? 'Your School' : 'Your Company')
+        ),
       ),
       forms.question(
         forms.text('What brings you to Grist?'),
@@ -127,6 +134,7 @@ export class WelcomePage extends Disposable {
       ),
       dom.on('change', (e, form) => {
         allFilled.set(forms.isFormFilled(form, ['use_*', 'reason_*', 'industry', 'role']));
+        whereObs.set(form.use_work.checked ? 'work' : form.use_school.checked ? 'school' : '');
       }),
       cssButtonGroup(
         cssButtonGroup.cls('-right'),

app/client/ui/forms.ts

@@ -15,7 +15,7 @@
  *   );
  */
 import {cssCheckboxSquare, cssLabel} from 'app/client/ui2018/checkbox';
-import {dom, DomElementArg, styled} from 'grainjs';
+import {dom, DomArg, DomElementArg, styled} from 'grainjs';
 
 export {
   form,
@@ -30,7 +30,9 @@ export {
  * array of arguments to the checkbox; the rest goes into the label. E.g.
  *    checkboxItem([{name: 'ok'}], 'Check to approve');
  */
-export function checkboxItem(checkboxArgs: DomElementArg[], ...labelArgs: DomElementArg[]): HTMLElement {
+export function checkboxItem(
+  checkboxArgs: Array<DomArg<HTMLInputElement>>, ...labelArgs: DomElementArg[]
+): HTMLElement {
   return cssCheckboxLabel(
     cssCheckbox({type: 'checkbox'}, ...checkboxArgs),
     ...labelArgs);