Merge pull request #8 from tintinthong/opportunity-contact-form-enhancement

Opportunity contact form enhancement

Author: tintinthong

packages/drafts-realm/OpportunityForm/37f6334a-02be-48db-a675-20409f8d5507.json

@@ -9,8 +9,8 @@
         "totalAmount": 123131
       },
       "description": "This opportunity involves a partnership with Cardstack Malaysia to provide our Cloud Storage solution, which addresses their need for scalable, secure, and cost-effective data storage. This deal has the potential to significantly enhance their data management and accessibility.",
-      "stage": "Closed Won",
-      "percentage": 100.7,
+      "stage": "Negotiation",
+      "percentage": 75,
       "forecastCategory": "Best Case",
       "title": null,
       "thumbnailURL": null

packages/drafts-realm/address-info.gts

@@ -206,7 +206,6 @@ class Edit extends Component<typeof AddressInfo> {
 
   @action
   updateCity(type: CitySignature) {
-    console.log(type);
     this.selectedCityType = type;
     this.args.model.city = type.name;
   }
@@ -363,7 +362,6 @@ class Edit extends Component<typeof AddressInfo> {
         padding: 2rem 1rem;
         display: grid;
         gap: var(--boxel-sp-sm);
-        grid-template-columns: 1fr;
         background-color: #eeeeee50;
       }
       .select {
@@ -439,12 +437,6 @@ class Edit extends Component<typeof AddressInfo> {
       .option-item:hover {
         background-color: #e5e7eb;
       }
-
-      @media (min-width: 768px) {
-        .card-container {
-          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-        }
-      }
     </style>
   </template>
 }

packages/drafts-realm/contact-form.gts

@@ -4,12 +4,7 @@ import { AddressInfo } from './address-info';
 import { CardDef, field, contains } from 'https://cardstack.com/base/card-api';
 import { Component } from 'https://cardstack.com/base/card-api';
 import StringField from 'https://cardstack.com/base/string';
-import {
-  FieldContainer,
-  CardContainer,
-  IconButton,
-} from '@cardstack/boxel-ui/components';
-import { Sparkle } from '@cardstack/boxel-ui/icons';
+import { FieldContainer, CardContainer } from '@cardstack/boxel-ui/components';
 
 class Isolated extends Component<typeof ContactForm> {
   get hasTitleField() {
@@ -19,21 +14,12 @@ class Isolated extends Component<typeof ContactForm> {
   <template>
     <div class='decorative-header'></div>
 
-    <CardContainer @displayBoundaries={{false}} class='card-container'>
+    <CardContainer @displayBoundaries={{false}} class='container'>
       {{#if this.hasTitleField}}
         <h2><@fields.title /></h2>
       {{/if}}
 
       <div class='card-form-display'>
-        <IconButton
-          @icon={{Sparkle}}
-          @width='22px'
-          @height='22px'
-          @variant='undefined'
-          class='icon-profile'
-          aria-label='Profile'
-        />
-
         <div class='contact-form-details'>
 
           <div class='field-input'>
@@ -77,26 +63,23 @@ class Isolated extends Component<typeof ContactForm> {
         font-size: 2.2rem;
         margin: 0;
       }
-      .card-container {
+      .container {
         width: 100%;
         padding: 1rem;
         display: grid;
         margin: auto;
         gap: var(--boxel-sp-lg);
       }
-
       .card-form-display {
         position: relative;
       }
-
       .icon-profile {
         position: absolute;
         top: 1px;
         right: 1px;
         width: 50px;
         height: 50px;
       }
-
       .contact-form-details {
         border: 1px solid var(--boxel-300);
         border-radius: var(--boxel-border-radius-xl);
@@ -118,11 +101,9 @@ class Isolated extends Component<typeof ContactForm> {
         flex-wrap: wrap;
         min-width: 280px;
       }
-
       .field-input > label {
         font-weight: 700;
       }
-
       .decorative-header {
         background-image: url(https://i.imgur.com/PQuDAEo.jpg);
         height: var(--boxel-sp-xl);
@@ -135,12 +116,10 @@ class Isolated extends Component<typeof ContactForm> {
         margin: 0px;
         text-align: center;
       }
-
       @media (min-width: 767px) {
         .contact-form-details {
           gap: var(--boxel-sp-lg);
         }
-
         .field-input {
           display: flex;
           gap: var(--boxel-sp);
@@ -155,23 +134,15 @@ class Isolated extends Component<typeof ContactForm> {
 
 class View extends Component<typeof ContactForm> {
   <template>
-    <CardContainer @displayBoundaries={{true}} class='card-container'>
-      <IconButton
-        @icon={{Sparkle}}
-        @width='22px'
-        @height='22px'
-        @variant='undefined'
-        class='icon-profile'
-        aria-label='Profile'
-      />
+    <CardContainer @displayBoundaries={{true}} class='container'>
       <div class='content'>
         <label>User</label>
         <h2><@fields.name /></h2>
       </div>
     </CardContainer>
 
     <style>
-      .card-container {
+      .container {
         padding: var(--boxel-sp-lg);
         display: grid;
         gap: var(--boxel-sp);
@@ -196,7 +167,7 @@ class View extends Component<typeof ContactForm> {
 
 class Edit extends Component<typeof ContactForm> {
   <template>
-    <CardContainer @displayBoundaries={{true}} class='card-container'>
+    <CardContainer @displayBoundaries={{true}} class='container'>
       <FieldContainer
         @tag='label'
         @label='Title'
@@ -207,7 +178,9 @@ class Edit extends Component<typeof ContactForm> {
         <@fields.name />
       </FieldContainer>
 
-      <@fields.email />
+      <FieldContainer @tag='label' @label='Email' @vertical={{true}}>
+        <@fields.email />
+      </FieldContainer>
 
       <FieldContainer @tag='label' @label='Phone' @vertical={{true}}>
         <@fields.phone />
@@ -228,7 +201,7 @@ class Edit extends Component<typeof ContactForm> {
     </CardContainer>
 
     <style>
-      .card-container {
+      .container {
         padding: var(--boxel-sp-lg);
         display: grid;
         gap: var(--boxel-sp);
@@ -241,26 +214,21 @@ export class ContactForm extends CardDef {
   @field title = contains(StringField, {
     description: `Contact Form Title`,
   });
-
   @field name = contains(UserName, {
     description: `User's Full Name`,
   });
-
   @field email = contains(UserEmail, {
     description: `User's Email`,
   });
-
   @field phone = contains(StringField, {
     description: `User's phone number`,
   });
-
   @field fax = contains(StringField, {
     description: `User's Fax Number`,
   });
   @field department = contains(StringField, {
     description: `User's Department`,
   });
-
   @field addressInfo = contains(AddressInfo, {
     description: `User's AddressInfo`,
   });

packages/drafts-realm/opportunity-form.gts

@@ -22,6 +22,7 @@ import NumberField from '../base/number';
 
 interface CategorySignature {
   name: string;
+  percentage?: number;
 }
 
 const formatNumber = (val: number) => {
@@ -34,7 +35,7 @@ const formatNumber = (val: number) => {
 
 /* Amount */
 class EditSecForAmount extends Component<typeof AmountField> {
-  @tracked currencyOptions = ['Select', 'RM', 'USD'];
+  @tracked currencyOptions = ['Select', 'RM'];
   get selectedCurrency() {
     return this.args.model.currency || this.currencyOptions[0] || 'Select';
   }
@@ -276,17 +277,18 @@ class EditSecForOpportunityForm extends Component<typeof OpportunityForm> {
   }
 
   @tracked stageCategoryOptions = [
-    { name: 'None' },
-    { name: 'Qualification' },
-    { name: 'Needs Analysis' },
-    { name: 'Proposal' },
-    { name: 'Negotiation' },
-    { name: 'Closed Won' },
-    { name: 'Closed Lost' },
-  ] as Array<CategorySignature>;
-
-  @action updateStageCategory(type: { name: string }) {
+    { name: 'None', percentage: 0 },
+    { name: 'Qualification', percentage: 10 },
+    { name: 'Needs Analysis', percentage: 25 },
+    { name: 'Proposal', percentage: 50 },
+    { name: 'Negotiation', percentage: 75 },
+    { name: 'Closed Won', percentage: 100 },
+    { name: 'Closed Lost', percentage: 100 },
+  ] as unknown as Array<CategorySignature>;
+
+  @action updateStageCategory(type: { name: string; percentage: number }) {
     this.args.model.stage = type.name;
+    this.args.model.percentage = type.percentage;
   }
 
   /* Percentage */

packages/drafts-realm/user-email.gts

@@ -11,7 +11,7 @@ import {
   StringField,
 } from 'https://cardstack.com/base/card-api';
 import { Component } from 'https://cardstack.com/base/card-api';
-import { BoxelInput, FieldContainer } from '@cardstack/boxel-ui/components';
+import { BoxelInput } from '@cardstack/boxel-ui/components';
 import { TextInputValidator } from '../base/text-input-validator';
 
 function isValidEmail(email: string): boolean {
@@ -74,24 +74,12 @@ class View extends Component<typeof UserEmail> {
 
 class Edit extends Component<typeof UserEmail> {
   <template>
-    <FieldContainer @tag='label' @label='Email' @vertical={{true}}>
-      <BoxelInput
-        @value={{this.textInputValidator.asString}}
-        @onInput={{this.textInputValidator.onInput}}
-        @errorMessage={{this.textInputValidator.errorMessage}}
-        @state={{if this.textInputValidator.isInvalid 'invalid' 'none'}}
-      />
-    </FieldContainer>
-
-    <style>
-      .card-container {
-        padding: 2rem 1rem;
-        display: grid;
-        gap: var(--boxel-sp-sm);
-        grid-template-columns: 1fr;
-        background-color: #eeeeee50;
-      }
-    </style>
+    <BoxelInput
+      @value={{this.textInputValidator.asString}}
+      @onInput={{this.textInputValidator.onInput}}
+      @errorMessage={{this.textInputValidator.errorMessage}}
+      @state={{if this.textInputValidator.isInvalid 'invalid' 'none'}}
+    />
   </template>
 
   textInputValidator: TextInputValidator<string> = new TextInputValidator(

packages/drafts-realm/user-name.gts

@@ -34,13 +34,16 @@ class View extends Component<typeof UserName> {
 }
 
 class Edit extends Component<typeof UserName> {
-  @tracked selectedSalutationType = {
-    name: this.args.model.salutation || 'Select',
-  };
-
-  @tracked placeholder = this.args.model.salutation || 'Select';
+  get selectedSalutationCategory() {
+    return {
+      name:
+        this.args.model.salutation ||
+        this.salutationCategory[0].name ||
+        'Select',
+    };
+  }
 
-  @tracked salutationType = [
+  @tracked salutationCategory = [
     { name: 'None' },
     { name: 'Mr.' },
     { name: 'Ms.' },
@@ -50,19 +53,17 @@ class Edit extends Component<typeof UserName> {
     { name: 'Mx.' },
   ] as Array<Salutation>;
 
-  @action updateSalutationType(type: { name: string }) {
-    this.selectedSalutationType = type;
+  @action updateSalutationCategory(type: { name: string }) {
     this.args.model.salutation = type.name;
   }
 
   <template>
-    <CardContainer @displayBoundaries={{true}} class='card-container'>
+    <CardContainer @displayBoundaries={{true}} class='container'>
       <FieldContainer @tag='label' @label='Salutation' @vertical={{true}}>
         <BoxelSelect
-          @placeholder={{this.placeholder}}
-          @selected={{this.selectedSalutationType}}
-          @onChange={{this.updateSalutationType}}
-          @options={{this.salutationType}}
+          @selected={{this.selectedSalutationCategory}}
+          @onChange={{this.updateSalutationCategory}}
+          @options={{this.salutationCategory}}
           class='select'
           as |item|
         >
@@ -82,23 +83,16 @@ class Edit extends Component<typeof UserName> {
     </CardContainer>
 
     <style>
-      .card-container {
+      .container {
         padding: 2rem 1rem;
         display: grid;
         gap: var(--boxel-sp-sm);
-        grid-template-columns: 1fr;
         background-color: #eeeeee50;
       }
       .select {
         padding: var(--boxel-sp-xs);
         background-color: white;
       }
-
-      @media (min-width: 768px) {
-        .card-container {
-          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-        }
-      }
     </style>
   </template>
 }