send mock data to server

client/.gitignore

@@ -1,12 +1,12 @@
 # See https://help.github.com/ignore-files/ for more about ignoring files.
 
 # compiled output
-/dist/
+**/dist
 /tmp/
 
 # dependencies
 /bower_components/
-/node_modules/
+**/node_modules
 
 # misc
 /.env*

client/app/components/packages/projects/new.hbs

@@ -20,9 +20,18 @@
           Planning will contact you with the next steps.
         </p>
       </section>
-      <Packages::Projects::ProjectsNewInformation @form={{saveableProjectsNewForm}} />
+      <Packages::Projects::ProjectsNewInformation 
+        @form={{saveableProjectsNewForm}} 
+        @boroughOptions={{this.boroughOptions}} 
+        @onBoroughChange={{this.handleBoroughChange}} 
+        @selectedBorough={{this.selectedBorough}} 
+        @onApplicantTypeSelection={{this.handleApplicantTypeChange}}
+        @selectedApplicantType={{this.selectedApplicantType}}
+        @applicantOptions={{this.applicantOptions}}
+      />
+      <Packages::Projects::ProjectsNewAddContacts 
+        @form={{saveableProjectsNewForm}} />
     </div>
-
     <div class="cell large-4 sticky-sidebar">
       <saveableProjectsNewForm.PageNav>
         <saveableProjectsNewForm.SubmitButton @isEnabled={{saveableProjectsNewForm.isSubmittable}} data-test-save-button />

client/app/components/packages/projects/new.js

@@ -1,7 +1,12 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
+import fetch from 'fetch';
 import SubmittableProjectsNewForm from '../../../validations/submittable-projects-new-form';
+import { optionset } from '../../../helpers/optionset';
+import config from '../../../config/environment';
+
 
 export default class ProjectsNewFormComponent extends Component {
   validations = {
@@ -14,6 +19,42 @@ export default class ProjectsNewFormComponent extends Component {
   @service
   store;
 
+  @tracked
+  selectedBorough = null;
+
+  @tracked
+  selectedApplicantType = null;
+
+  get boroughOptions() {
+    return optionset(['project', 'boroughs', 'list']);
+  }
+
+  get applicantOptions() {
+    return optionset(['applicant', 'dcpApplicantType', 'list']);
+  }
+
+  @action
+  handleBoroughChange(selectedBorough) {
+    console.log('Selected borough:', selectedBorough);
+
+    this.selectedBorough = selectedBorough;
+
+    if (this.args.form) {
+      this.args.form.set('borough', selectedBorough);
+    }
+  }
+
+  @action
+  handleApplicantTypeChange(selectedApplicantType) {
+    console.log('Selected Applicant Type:', selectedApplicantType);
+
+    this.selectedApplicantType = selectedApplicantType;
+
+    if (this.args.form) {
+      this.args.form.set('dcpApplicantType', selectedApplicantType);
+    }
+  }
+
   @action
   async submitPackage() {
     const primaryContactInput = {
@@ -34,12 +75,10 @@ export default class ProjectsNewFormComponent extends Component {
 
     const contactInputs = [primaryContactInput, applicantInput];
     try {
-      const contactPromises = contactInputs
-        .map((contact) => this.store.queryRecord('contact',
-          {
-            email: contact.email,
-            includeAllStatusCodes: true,
-          }));
+      const contactPromises = contactInputs.map((contact) => this.store.queryRecord('contact', {
+        email: contact.email,
+        includeAllStatusCodes: true,
+      }));
 
       const contacts = await Promise.all(contactPromises);
 
@@ -56,9 +95,42 @@ export default class ProjectsNewFormComponent extends Component {
         }
         return contact;
       });
-      await Promise.all(verifiedContactPromises);
-    } catch {
-      console.log('Save new project package error');
+      const [verifiedPrimaryContact, verifiedApplicant] = await Promise.all(verifiedContactPromises);
+
+      const authSessionRaw = localStorage.getItem('ember_simple_auth-session');
+
+      if (authSessionRaw === null) {
+        throw new Error('unauthorized');
+      }
+      const authSession = JSON.parse(authSessionRaw);
+      const { authenticated: { access_token: accessToken } } = authSession;
+      if (accessToken === undefined) {
+        throw new Error('unauthorized');
+      }
+
+      await fetch(`${config.host}/projects`, {
+        method: 'POST',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${accessToken}`,
+        },
+        body: JSON.stringify({
+          data: {
+            attributes: {
+              dcpProjectname: this.args.package.projectName,
+              dcpBorough: this.selectedBorough.code,
+              dcpApplicanttype: this.selectedApplicantType.code,
+              dcpProjectbrief: '',
+              _dcpApplicantadministratorCustomerValue: verifiedPrimaryContact.id,
+              _dcpApplicantCustomerValue: verifiedApplicant.id,
+              _dcpLeadplannerValue: verifiedApplicant.id,
+            },
+          },
+        }),
+      });
+    } catch (e) {
+      console.log('Save new project package error', e);
     }
   }
 }

client/app/components/packages/projects/projects-new-add-contacts.hbs

@@ -0,0 +1,119 @@
+{{#let @form as |form|}}
+<form.Section @title="Contact Information">
+  <h3>Primary Contact</h3>
+  <p>This contact is the person who will respond to public inquiries regarding the application.</p>
+  <Ui::Question @required={{true}} as |Q|>
+    <Q.Label>
+      First Name 
+    </Q.Label>
+
+    <form.Field 
+      @attribute="primaryContactFirstName"
+      @type="text-input"
+      id={{Q.questionId}}
+      @showCounter={{true}}
+      @maxlength="50"
+    />
+  </Ui::Question>
+  <Ui::Question @required={{true}} as |Q|>
+    <Q.Label>
+      Last Name 
+    </Q.Label>
+
+    <form.Field 
+      @attribute="primaryContactLastName"
+      @type="text-input"
+      id={{Q.questionId}}
+      @showCounter={{true}}
+      @maxlength="50"
+    />
+  </Ui::Question>
+  <Ui::Question @required={{true}} as |Q|>
+    <Q.Label>
+      Email
+    </Q.Label>
+
+    <form.Field 
+      @attribute="primaryContactEmail" 
+      @type="text-input" 
+      id={{Q.questionId}} 
+      @showCounter={{true}}
+      @maxlength="50"
+    />
+  </Ui::Question>
+  <Ui::Question @required={{false}} as |Q|>
+    <Q.Label>
+      Phone
+    </Q.Label>
+    <p class="q-help">
+      No dashes, parentheses, or special characters.
+    </p>
+
+    <form.Field 
+      @attribute="primaryContactPhone" 
+      @type="text-input" 
+      id={{Q.questionId}} 
+      @showCounter={{true}}
+      @maxlength="10"
+    />
+  </Ui::Question>
+
+  <h3>Applicant</h3>
+  <p>The owner, entity, or representative of the project described in this application.</p>
+  <Ui::Question @required={{true}} as |Q|>
+    <Q.Label>
+      First Name 
+    </Q.Label>
+
+    <form.Field 
+      @attribute="applicantFirstName"
+      @type="text-input"
+      id={{Q.questionId}}
+      @showCounter={{true}}
+      @maxlength="50"
+    />
+  </Ui::Question>
+  <Ui::Question @required={{true}} as |Q|>
+    <Q.Label>
+      Last Name 
+    </Q.Label>
+
+    <form.Field 
+      @attribute="applicantLastName"
+      @type="text-input"
+      id={{Q.questionId}}
+      @showCounter={{true}}
+      @maxlength="50"
+    />
+  </Ui::Question>
+  <Ui::Question @required={{true}} as |Q|>
+    <Q.Label>
+      Email
+    </Q.Label>
+
+    <form.Field 
+      @attribute="applicantEmail" 
+      @type="text-input" 
+      id={{Q.questionId}} 
+      @showCounter={{true}}
+      @maxlength="50"
+    />
+  </Ui::Question>
+  <Ui::Question @required={{false}} as |Q|>
+    <Q.Label>
+      Phone
+    </Q.Label>
+    <p class="q-help">
+      No dashes, parentheses, or special characters.
+    </p>
+
+    <form.Field 
+      @attribute="applicantPhone" 
+      @type="text-input" 
+      id={{Q.questionId}} 
+      @showCounter={{true}}
+      @maxlength="10"
+    />
+  </Ui::Question>
+</form.Section>
+{{/let}}