1249 Submit project details for new project

 - refactored projects-new-information.hbs
   -  extracted all contact form fields into a new template: projects-new-add-contacts.hbs
 - added boroughs to projects-new-information template using ember powerselect
 - added functions to projects/new..js to handle dropdown actions
 - updated project optionset to include boroughs and imported into optionsets.js

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

@@ -20,7 +20,8 @@
           Planning will contact you with the next steps.
         </p>
       </section>
-      <Packages::Projects::ProjectsNewInformation 
+      <Projects::ProjectsNewInformation
+        @project={{saveableProjectsNewForm.data}}
         @form={{saveableProjectsNewForm}} 
         @boroughOptions={{this.boroughOptions}} 
         @onBoroughChange={{this.handleBoroughChange}} 
@@ -29,15 +30,15 @@
         @selectedApplicantType={{this.selectedApplicantType}}
         @applicantOptions={{this.applicantOptions}}
       />
-      <Packages::Projects::ProjectsNewAddContacts 
+      <Projects::ProjectsNewAddContacts 
         @form={{saveableProjectsNewForm}} />
     </div>
     <div class="cell large-4 sticky-sidebar">
       <saveableProjectsNewForm.PageNav>
         <saveableProjectsNewForm.SubmitButton @isEnabled={{saveableProjectsNewForm.isSubmittable}} data-test-save-button />
       </saveableProjectsNewForm.PageNav>
       <saveableProjectsNewForm.ConfirmationModal @action={{component saveableProjectsNewForm.SubmitButton
-        isEnabled=saveableProjectsNewForm.isSubmittable onClick=this.submitPackage class="no-margin" }}
+        isEnabled=saveableProjectsNewForm.isSubmittable onClick=this.submitProject class="no-margin" }}
         @continueButtonTitle="Continue Editing" data-test-confirm-submit-button={{true}}>
         <h6>Confirm New Project Submission</h6>
         <p class="header-large medium-margin-top small-margin-bottom">

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

@@ -1,12 +1,10 @@
+/* eslint-disable no-console */
 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';
-
+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 = {
@@ -19,12 +17,6 @@ export default class ProjectsNewFormComponent extends Component {
   @service
   store;
 
-  @tracked
-  selectedBorough = null;
-
-  @tracked
-  selectedApplicantType = null;
-
   get boroughOptions() {
     return optionset(['project', 'boroughs', 'list']);
   }
@@ -34,51 +26,29 @@ export default class ProjectsNewFormComponent extends Component {
   }
 
   @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() {
+  async submitProject() {
     const primaryContactInput = {
       first: this.args.package.primaryContactFirstName,
       last: this.args.package.primaryContactLastName,
       email: this.args.package.primaryContactEmail,
       phone: this.args.package.primaryContactPhone,
-      role: 'contact',
     };
 
     const applicantInput = {
       first: this.args.package.applicantFirstName,
       last: this.args.package.applicantLastName,
       email: this.args.package.applicantEmail,
       phone: this.args.package.applicantPhone,
-      role: 'applicant',
     };
 
     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);
 
@@ -95,6 +65,7 @@ export default class ProjectsNewFormComponent extends Component {
         }
         return contact;
       });
+
       const [verifiedPrimaryContact, verifiedApplicant] = await Promise.all(verifiedContactPromises);
 
       const authSessionRaw = localStorage.getItem('ember_simple_auth-session');
@@ -119,18 +90,18 @@ export default class ProjectsNewFormComponent extends Component {
           data: {
             attributes: {
               dcpProjectname: this.args.package.projectName,
-              dcpBorough: this.selectedBorough.code,
-              dcpApplicanttype: this.selectedApplicantType.code,
+              dcpBorough: this.args.package.borough.code,
+              dcpApplicanttype: this.args.package.applicantType.code,
               dcpProjectbrief: '',
               _dcpApplicantadministratorCustomerValue: verifiedPrimaryContact.id,
               _dcpApplicantCustomerValue: verifiedApplicant.id,
-              _dcpLeadplannerValue: verifiedApplicant.id,
             },
           },
         }),
       });
-    } catch (e) {
-      console.log('Save new project package error', e);
+    } catch (error) {
+      console.log('Save new project package error', error.message);
+      console.log('the error', error);
     }
   }
 }

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

@@ -60,6 +60,11 @@
 
   <h3>Applicant</h3>
   <p>The owner, entity, or representative of the project described in this application.</p>
+  <p class="q-help">
+    If using a company or organization, please split the name in the "First Name" and "Last Name" fields. For example,
+    "NYC
+    Planning" would be: <b>First Name:</b> NYC, <b>Last Name:</b> Planning
+  </p>
   <Ui::Question @required={{true}} as |Q|>
     <Q.Label>
       First Name 
@@ -116,4 +121,4 @@
     />
   </Ui::Question>
 </form.Section>
-{{/let}}
+{{/let}}

client/app/components/packages/projects/projects-new-information.hbs → client/app/components/projects/projects-new-information.hbs

@@ -4,7 +4,6 @@
     <Q.Label>
       Project Name
     </Q.Label>
-
     <form.Field 
       @attribute='projectName' 
       @type='text-input' 
@@ -18,17 +17,22 @@
     <Q.Label data-test-projects-new-borough-dropdown>
       Borough
     </Q.Label>
-    <PowerSelect
-      supportsDataTestProperties={{true}}
-      @attribute='borough'
-      @options={{@boroughOptions}}
-      @onChange={{@onBoroughChange}}
-      @selected={{@selectedBorough}} 
-      @searchField='label'
-      data-test-id='project-new-borough-dropdown'
-      @placeholder='select a borough' as |borough| >
-      {{borough.label}}
+    <PowerSelect 
+      supportsDataTestProperties={{true}} 
+      @attribute='borough' 
+      @options={{@boroughOptions}} 
+      @onChange={{fn (mut @project.borough)}}
+      @selected={{@project.borough}}  
+      @searchField='label' 
+      data-test-id='project-new-borough-dropdown' 
+      @placeholder='select a borough' as |borough|>
+       {{borough.label}}
     </PowerSelect>
+    {{#if form.errors.borough}}
+      {{#each form.errors.borough.validation as |message|}}
+        <div class="form-error is-visible" data-test-validation-message="select a borough">{{message}}</div>
+      {{/each}}
+    {{/if}}
   </Ui::Question>
   <Ui::Question @required={{true}} as |Q|>
     <Q.Label data-test-projects-new-applicant-type>
@@ -39,15 +43,22 @@
     </p>
     <PowerSelect
       supportsDataTestProperties={{true}}
-      @attribute='dcpApplicantType'
+      @attribute='applicantType'
       @options={{@applicantOptions}} 
-      @onChange={{@onApplicantTypeSelection}} 
-      @selected={{@selectedApplicantType}}
+      @onChange={{fn (mut @project.applicantType)}}
+      @selected={{@project.applicantType}}
       @searchField='label'
       data-test-id='projects-new-applicant-type'
       @placeholder='select applicant type' as |dcpApplicantType| >
       {{dcpApplicantType.label}}
     </PowerSelect>
+    {{#if form.errors.applicantType}}
+      {{#each form.errors.applicantType.validation as |message|}}
+          <div class="form-error is-visible"    data-test-validation-message="select an Applicant Type"> {{message}}
+        </div>
+      {{/each}}
+    {{/if}}
   </Ui::Question>
 </form.Section>
 {{/let}}
+