Skip to content

Commit af46d61

Browse files
yeshamavaniyeshamavani
authored
Merge pull request #81 from sourcefuse/GH-80
fix(arc-saas): country as a dropdown field
2 parents 5770ebc + 5126eab commit af46d61

File tree

6 files changed

+144
-90
lines changed

6 files changed

+144
-90
lines changed

‎projects/saas-ui/src/app/main/components/tenant-registration/tenant-registration.component.html‎

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -186,32 +186,28 @@ <h2>Tenant Registration</h2>
186186
Maximum length exceeded.
187187
</div>
188188
</div>
189-
189+
<!-- Country Drop down -->
190190
<div class="input-box">
191191
<div class="input-title">
192192
<span>Country <span class="required">*</span></span>
193193
</div>
194-
<div class="input inputTags">
195-
<div class="input-container">
196-
<input
197-
type="text"
198-
placeholder="Enter your Country"
199-
status="“info”"
200-
formControlName="country"
201-
nbInput
202-
/>
203-
</div>
204-
</div>
205-
<div
206-
class="error-msg"
207-
*ngIf="
208-
tenantRegForm.get('country').hasError('pattern') &&
209-
tenantRegForm.get('country').touched
210-
"
211-
>
212-
Country must contain only characters.
194+
<div class="select">
195+
<nb-select
196+
class="dropdown-wrapper"
197+
placeholder="Select Your Country"
198+
size="large"
199+
formControlName="country"
200+
>
201+
<nb-option
202+
*ngFor="let option of countryOptions"
203+
[value]="option.value"
204+
>
205+
{{ option.label }}
206+
</nb-option>
207+
</nb-select>
213208
</div>
214209
</div>
210+
215211
<!-- key -->
216212
<div class="input-box">
217213
<div class="input-title">

‎projects/saas-ui/src/app/main/components/tenant-registration/tenant-registration.component.ts‎

Lines changed: 37 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,31 @@
1-
import { Component } from '@angular/core';
1+
import {Component} from '@angular/core';
22
import {
33
FormGroup,
44
FormBuilder,
55
Validators,
66
AbstractControl,
77
ValidatorFn,
88
} from '@angular/forms';
9-
import { ActivatedRoute, Router } from '@angular/router';
10-
import { NbToastrService } from '@nebular/theme';
11-
import { Location } from '@angular/common';
12-
import { BillingPlanService, OnBoardingService } from '../../../shared/services';
13-
import { AnyObject } from '@project-lib/core/api/backend-filter';
14-
import { TenantLead, TenantLeadWithPaymentMethod } from '../../../shared/models/tenantLead.model';
15-
import { keyValidator } from '@project-lib/core/validators';
9+
import {ActivatedRoute, Router} from '@angular/router';
10+
import {NbToastrService} from '@nebular/theme';
11+
import {Location} from '@angular/common';
12+
import {BillingPlanService, OnBoardingService} from '../../../shared/services';
13+
import {AnyObject} from '@project-lib/core/api/backend-filter';
14+
import {
15+
TenantLead,
16+
TenantLeadWithPaymentMethod,
17+
} from '../../../shared/models/tenantLead.model';
18+
import {keyValidator} from '@project-lib/core/validators';
19+
import {COUNTRIES} from '../../../shared/constants/countries.constant';
1620

1721
export enum PaymentMethod {
1822
Cash = 'cash',
1923
Cheque = 'cheque',
2024
BankTransfer = 'bank_transfer',
2125
Other = 'other',
22-
Custom = 'custom'
26+
Custom = 'custom',
2327
}
28+
2429
@Component({
2530
selector: 'app-tenant-registration',
2631
templateUrl: './tenant-registration.component.html',
@@ -31,6 +36,7 @@ export class TenantRegistrationComponent {
3136
[x: string]: any;
3237
subscriptionPlans: AnyObject[];
3338
leadId = '';
39+
countryOptions = COUNTRIES;
3440

3541
constructor(
3642
private route: ActivatedRoute,
@@ -44,36 +50,46 @@ export class TenantRegistrationComponent {
4450
) {
4551
this.tenantRegForm = this.fb.group(
4652
{
47-
firstName: ['', [Validators.required, Validators.pattern('^[a-zA-Z]+$')]],
48-
lastName: ['', [Validators.required, Validators.pattern('^[a-zA-Z]+$')]],
53+
firstName: [
54+
'',
55+
[Validators.required, Validators.pattern('^[a-zA-Z]+$')],
56+
],
57+
lastName: [
58+
'',
59+
[Validators.required, Validators.pattern('^[a-zA-Z]+$')],
60+
],
4961
name: ['', [Validators.required]], // for company name
5062
email: ['', [Validators.required, Validators.email]],
5163
address: [''],
52-
country: ['', [Validators.required, Validators.pattern('^[a-zA-Z]+$')]],
64+
country: ['', [Validators.required]],
5365
zip: ['', [Validators.pattern('^[0-9]+$'), Validators.maxLength(9)]],
54-
key: ['', [Validators.required, Validators.maxLength(10),
55-
Validators.pattern('^[a-zA-Z][a-zA-Z0-9]*$')]],
66+
key: [
67+
'',
68+
[
69+
Validators.required,
70+
Validators.maxLength(10),
71+
Validators.pattern('^[a-zA-Z][a-zA-Z0-9]*$'),
72+
],
73+
],
5674
domains: [''],
5775
planId: [''],
5876
paymentMethod: ['', Validators.required],
59-
comment: [''] // Add comment control here
77+
comment: [''],
6078
},
61-
{ validators: this.emailDomainMatchValidator },
79+
{validators: this.emailDomainMatchValidator},
6280
);
6381
}
6482

6583
paymentMethods = Object.values(PaymentMethod); // Use Object.values() to get the enum values
6684

67-
68-
69-
emailDomainMatchValidator(group: FormGroup): { [key: string]: boolean } | null {
85+
emailDomainMatchValidator(group: FormGroup): {[key: string]: boolean} | null {
7086
const email = group.get('email').value;
7187
const domain = group.get('domains').value;
7288

7389
if (email && domain) {
7490
const emailDomain = email.substring(email.lastIndexOf('@') + 1);
7591
if (emailDomain !== domain) {
76-
return { domainMismatch: true };
92+
return {domainMismatch: true};
7793
}
7894
}
7995
return null;
@@ -93,7 +109,6 @@ export class TenantRegistrationComponent {
93109
});
94110
}
95111

96-
97112
getRadioOptions() {
98113
this.billingPlanService.getPlanOptions().subscribe(res => {
99114
this.subscriptionPlans = res;
@@ -122,7 +137,7 @@ export class TenantRegistrationComponent {
122137
domains: [userData.domains],
123138
planId: userData.planId,
124139
paymentMethod: userData.paymentMethod,
125-
comment: userData.comment // Add the comment field here
140+
comment: userData.comment, // Add the comment field here
126141
};
127142
this.onBoardingService.registerTenant(user).subscribe(
128143
() => {

‎projects/saas-ui/src/app/on-boarding/components/add-lead/add-lead.component.html‎

Lines changed: 47 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,15 @@ <h3>Signup to ARC-SaaS</h3>
2828
nbTooltip="Please enter your first name. This field is required."
2929
></nb-icon>
3030
</div>
31-
<div class="error-msg"
32-
*ngIf="addLeadForm.get('firstName').hasError('pattern') && addLeadForm.get('firstName').touched">
33-
First Name must contain only characters.
34-
</div>
31+
<div
32+
class="error-msg"
33+
*ngIf="
34+
addLeadForm.get('firstName').hasError('pattern') &&
35+
addLeadForm.get('firstName').touched
36+
"
37+
>
38+
First Name must contain only characters.
39+
</div>
3540
</div>
3641
</div>
3742

@@ -54,10 +59,15 @@ <h3>Signup to ARC-SaaS</h3>
5459
nbTooltip="Please enter your Last name. This field is required."
5560
></nb-icon>
5661
</div>
57-
<div class="error-msg"
58-
*ngIf="addLeadForm.get('lastName').hasError('pattern') && addLeadForm.get('lastName').touched">
59-
Last Name must contain only characters.
60-
</div>
62+
<div
63+
class="error-msg"
64+
*ngIf="
65+
addLeadForm.get('lastName').hasError('pattern') &&
66+
addLeadForm.get('lastName').touched
67+
"
68+
>
69+
Last Name must contain only characters.
70+
</div>
6171
</div>
6272
</div>
6373

@@ -106,15 +116,17 @@ <h3>Signup to ARC-SaaS</h3>
106116
</div>
107117
</div>
108118

109-
<div class="error-msg"
119+
<div
120+
class="error-msg"
110121
*ngIf="
111122
addLeadForm.get('email').hasError('required') &&
112123
addLeadForm.get('email').touched
113124
"
114125
>
115126
Email is required.
116127
</div>
117-
<div class="error-msg"
128+
<div
129+
class="error-msg"
118130
*ngIf="
119131
addLeadForm.get('email').hasError('email') &&
120132
addLeadForm.get('email').touched
@@ -158,52 +170,45 @@ <h3>Signup to ARC-SaaS</h3>
158170
/>
159171
</div>
160172
</div>
161-
<div class="error-msg"
173+
<div
174+
class="error-msg"
162175
*ngIf="
163-
addLeadForm.get('zip').hasError('pattern') &&
164-
addLeadForm.get('zip').touched
176+
addLeadForm.get('zip').hasError('pattern') &&
177+
addLeadForm.get('zip').touched
165178
"
166179
>
167180
Zip code should only contain numbers.
168181
</div>
169182
<div
170-
class="error-msg"
171-
*ngIf="
183+
class="error-msg"
184+
*ngIf="
172185
addLeadForm.get('zip').hasError('maxlength') &&
173186
addLeadForm.get('zip').touched
174-
"
175-
>
176-
Maximum length exceeded.
177-
</div>
187+
"
188+
>
189+
Maximum length exceeded.
190+
</div>
178191
</div>
179192

193+
<!-- Country Drop down -->
180194
<div class="input-box">
181195
<div class="input-title">
182196
<span>Country <span class="required">*</span></span>
183197
</div>
184-
<div class="inputTags">
185-
<div class="input-container">
186-
<input
187-
type="text"
188-
placeholder="Enter your Country"
189-
status="“info”"
190-
formControlName="country"
191-
nbInput
192-
/>
193-
<nb-icon
194-
icon="info-outline"
195-
class="info-icon"
196-
nbTooltip="Please enter your country. This field is required."
197-
></nb-icon>
198-
</div>
199-
<div class="error-msg"
200-
*ngIf="
201-
addLeadForm.get('country').hasError('pattern') &&
202-
addLeadForm.get('country').touched
203-
"
204-
>
205-
Country must contain only characters.
206-
</div>
198+
<div class="select">
199+
<nb-select
200+
class="dropdown-wrapper"
201+
placeholder="Select Your Country"
202+
size="large"
203+
formControlName="country"
204+
>
205+
<nb-option
206+
*ngFor="let option of countryOptions"
207+
[value]="option.value"
208+
>
209+
{{ option.label }}
210+
</nb-option>
211+
</nb-select>
207212
</div>
208213
</div>
209214
</div>

‎projects/saas-ui/src/app/on-boarding/components/add-lead/add-lead.component.scss‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,25 @@
4545
font-weight: bold;
4646
font-size: 14px;
4747
}
48+
.input-box{
49+
.input{
50+
.payment-comment-box{
51+
min-width: 100%;
52+
border: 1px solid #dcdcdc;
53+
}
54+
}
55+
}
56+
57+
58+
59+
60+
nb-select{
61+
.select-button{
62+
height: 46px !important;
63+
margin-top: 5px !important;
64+
}
65+
}
66+
4867

4968
.input-container {
5069
position: relative;
@@ -94,6 +113,19 @@
94113
}
95114
}
96115

116+
.input-wrapper{
117+
.input-box{
118+
.select{
119+
.dropdown-wrapper{
120+
min-width: 100%;
121+
margin-top: 5px;
122+
border: 1px solid #dcdcdc;
123+
border-radius: 3px;
124+
}
125+
}
126+
}
127+
}
128+
97129
.input-box {
98130
.inputTags {
99131
input {

‎projects/saas-ui/src/app/on-boarding/components/add-lead/add-lead.component.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
66
import {OnBoardingService} from '../../../shared/services/on-boarding-service';
77
import {id} from 'date-fns/locale';
88
import {verifyHostBindings} from '@angular/compiler';
9+
import {COUNTRIES} from '../../../shared/constants/countries.constant';
910

1011
@Component({
1112
selector: 'app-add-lead',
@@ -14,6 +15,7 @@ import {verifyHostBindings} from '@angular/compiler';
1415
})
1516
export class AddLeadComponent {
1617
addLeadForm: FormGroup;
18+
countryOptions = COUNTRIES;
1719

1820
constructor(
1921
private route: ActivatedRoute,
@@ -24,14 +26,13 @@ export class AddLeadComponent {
2426
private fb: FormBuilder,
2527
) {
2628
this.addLeadForm = this.fb.group({
27-
firstName: ['', [Validators.required,Validators.pattern('^[a-zA-Z]+$')] ],
28-
lastName: ['', [Validators.required,Validators.pattern('^[a-zA-Z]+$')] ],
29+
firstName: ['', [Validators.required, Validators.pattern('^[a-zA-Z]+$')]],
30+
lastName: ['', [Validators.required, Validators.pattern('^[a-zA-Z]+$')]],
2931
companyName: ['', Validators.required],
3032
email: ['', [Validators.required, Validators.email]],
3133
address: [''],
32-
zip: ['',[Validators.pattern('^[0-9]+$'),Validators.maxLength(9)]],
33-
country: ['', [Validators.required,Validators.pattern('^[a-zA-Z]+$')]],
34-
34+
zip: ['', [Validators.pattern('^[0-9]+$'), Validators.maxLength(9)]],
35+
country: ['', [Validators.required, Validators.pattern('^[a-zA-Z]+$')]],
3536
});
3637
}
3738

@@ -49,7 +50,6 @@ export class AddLeadComponent {
4950
country: userData.country,
5051
},
5152
};
52-
5353
this.onBoardingService.addLead(user).subscribe(
5454
() => {
5555
this.router.navigate(['tenant/add-lead/emailHasBeenSent']);

0 commit comments

Comments
 (0)