Skip to content

Commit 01a6716

Browse files
yeshamavaniyeshamavani
authored
Merge pull request #83 from sourcefuse/GH-82
add subscription component for marketplace
2 parents a2f8105 + e5ea6ee commit 01a6716

15 files changed

+909
-2
lines changed

‎package-lock.json

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎projects/saas-ui/src/app/main/styles/grid-styles.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,13 @@
1414
width: 100%;
1515
overflow: auto;
1616
height: calc(100vh - 120px);
17+
border-radius: 15px;
1718
}
1819
.ag-theme-quartz {
1920
width: 100%;
2021
height: 650px;
22+
--ag-font-family: sans-serif;
23+
--ag-font-size: 16px;
2124
}
2225

2326
.regbtn {

‎projects/saas-ui/src/app/on-boarding/commands/add-subscriber-command.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import {
2+
AnyObject,
3+
ApiService,
4+
IAdapter,
5+
PostAPICommand,
6+
} from '@project-lib/core/api';
7+
import {Subscriber} from '../../shared/models';
8+
9+
import {IAnyObject} from '@project-lib/core/i-any-object';
10+
11+
export class AddSubscriberCommand<T> extends PostAPICommand<Subscriber> {
12+
constructor(
13+
apiService: ApiService,
14+
adapter: IAdapter<Subscriber>,
15+
appConfig: IAnyObject,
16+
) {
17+
super(apiService, adapter, `${appConfig.subscribePath}`);
18+
}
19+
}

‎projects/saas-ui/src/app/on-boarding/commands/get-all-tenant-command.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import {
2+
IApiService,
3+
IAdapter,
4+
PostAPICommand,
5+
GetAPICommand,
6+
} from '@project-lib/core/api';
7+
import {IAnyObject} from '@project-lib/core/i-any-object';
8+
9+
export class GetAllTenantKeysCommand<T> extends GetAPICommand<T> {
10+
constructor(
11+
apiService: IApiService,
12+
adapter: IAdapter<T>,
13+
key: string,
14+
appConfig: IAnyObject,
15+
) {
16+
super(
17+
apiService,
18+
adapter,
19+
`${appConfig.baseApiUrl}${appConfig.tenantmgmtServiceUrl}/verify-key/${key}`,
20+
);
21+
}
22+
}

‎projects/saas-ui/src/app/on-boarding/commands/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,5 @@ export * from './get-lead-by-id.command';
44
export * from './get-plan.command';
55
export * from './add-lead-command';
66
export * from './get-lead-command';
7+
export * from './add-subscriber-command';
8+
export * from './get-all-tenant-command';

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

Lines changed: 265 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,265 @@
1+
<nb-card class="h-100 card-row">
2+
<nb-card-body class="m-0">
3+
<div class="main-wrapper add-lead-wrapper">
4+
<div>
5+
<div class="sign-in-title">
6+
<h2 class="title">Marketplace Registration</h2>
7+
<form [formGroup]="marketSubsForm" (ngSubmit)="onSubmit()">
8+
<!-- input fields -->
9+
<div class="input-wrapper">
10+
<div class="input-box">
11+
<div class="input-title">
12+
<span>First Name <span class="required">*</span></span>
13+
</div>
14+
<div class="input">
15+
<div class="input-container">
16+
<input
17+
type="text"
18+
placeholder="Enter First Name"
19+
status="info"
20+
formControlName="firstName"
21+
nbInput
22+
/>
23+
<nb-icon
24+
icon="info-outline"
25+
class="info-icon"
26+
nbTooltip="Please enter your first name. This field is required."
27+
></nb-icon>
28+
</div>
29+
</div>
30+
</div>
31+
32+
<div class="input-box">
33+
<div class="input-title">
34+
<span>Last Name <span class="required">*</span></span>
35+
</div>
36+
<div class="input">
37+
<div class="input-container">
38+
<input
39+
type="text"
40+
placeholder="Enter Last Name"
41+
status="info"
42+
formControlName="lastName"
43+
nbInput
44+
/>
45+
<nb-icon
46+
icon="info-outline"
47+
class="info-icon"
48+
nbTooltip="Please enter your Last name. This field is required."
49+
></nb-icon>
50+
</div>
51+
</div>
52+
</div>
53+
54+
<div class="input-box">
55+
<div class="input-title">
56+
<span>Company Name <span class="required">*</span></span>
57+
</div>
58+
<div class="input">
59+
<div class="input-container">
60+
<input
61+
type="text"
62+
placeholder="Company Name"
63+
status="info"
64+
formControlName="companyName"
65+
nbInput
66+
/>
67+
<nb-icon
68+
icon="info-outline"
69+
class="info-icon"
70+
nbTooltip="Please enter your Company name. This field is required."
71+
></nb-icon>
72+
</div>
73+
</div>
74+
</div>
75+
76+
<!-- email -->
77+
<div class="input-box">
78+
<div class="input-title">
79+
<span>Email <span class="required">*</span></span>
80+
</div>
81+
<div class="input">
82+
<div class="input-container">
83+
<input
84+
type="Email"
85+
placeholder="Email"
86+
status="info"
87+
fieldSize="medium"
88+
formControlName="email"
89+
nbInput
90+
/>
91+
<nb-icon
92+
icon="email-outline"
93+
class="info-icon"
94+
nbTooltip="Please enter your Mail id. This field is required."
95+
></nb-icon>
96+
</div>
97+
</div>
98+
99+
<div
100+
class="error-msg"
101+
*ngIf="
102+
marketSubsForm.get('email').hasError('email') &&
103+
marketSubsForm.get('email').touched
104+
"
105+
>
106+
Invalid email format.
107+
</div>
108+
</div>
109+
110+
<!-- address-->
111+
<div class="input-box address-input-box">
112+
<div class="input-title">
113+
<span>Address</span>
114+
</div>
115+
<div class="input address-input">
116+
<div class="input-container">
117+
<input
118+
type="text"
119+
placeholder="Enter Your Address"
120+
status="info"
121+
formControlName="address"
122+
nbInput
123+
/>
124+
<nb-icon
125+
icon="info-outline"
126+
class="info-icon"
127+
nbTooltip="Please enter your address. This field is required"
128+
></nb-icon>
129+
</div>
130+
</div>
131+
</div>
132+
133+
<div class="input-box">
134+
<div class="input-title">
135+
<span>Zip Code<span class="required">*</span></span>
136+
</div>
137+
<div class="input">
138+
<div class="input-container">
139+
<input
140+
type="text"
141+
placeholder="Enter your Zip Code"
142+
status="info"
143+
formControlName="zip"
144+
nbInput
145+
maxlength="6"
146+
/>
147+
<nb-icon
148+
icon="info-outline"
149+
class="info-icon"
150+
nbTooltip="Please enter zip code."
151+
></nb-icon>
152+
</div>
153+
154+
<div
155+
class="error-msg"
156+
*ngIf="marketSubsForm.get('zip').hasError('pattern')"
157+
>
158+
Zip Code must be numeric only.
159+
</div>
160+
</div>
161+
</div>
162+
163+
<div class="input-box">
164+
<div class="input-title">
165+
<span>Country <span class="required">*</span></span>
166+
</div>
167+
<div class="select">
168+
<nb-select
169+
class="dropdown-wrapper"
170+
placeholder="Select Your Country"
171+
size="large"
172+
formControlName="country"
173+
>
174+
<nb-option
175+
*ngFor="let option of countryOptions"
176+
[value]="option.value"
177+
>
178+
{{ option.label }}
179+
</nb-option>
180+
</nb-select>
181+
</div>
182+
</div>
183+
184+
<div class="input-box address-input-box">
185+
<div class="input-title">
186+
<span>
187+
Application Sub-Domain <span class="required">*</span>
188+
</span>
189+
</div>
190+
191+
<div class="input">
192+
<div class="input-container">
193+
<input
194+
placeholder="Enter the key of your application"
195+
fieldSize="medium"
196+
status="info"
197+
formControlName="key"
198+
nbInput
199+
/>
200+
<nb-icon
201+
icon="info-outline"
202+
class="info-icon"
203+
nbTooltip="Enter a unique key starting with an alphabet. This field is required and has a maximum length of 20 characters. Special characters are not allowed."
204+
></nb-icon>
205+
</div>
206+
207+
<div>
208+
<div
209+
*ngIf="
210+
marketSubsForm.get('key').hasError('keyExists') &&
211+
marketSubsForm.get('key').touched
212+
"
213+
class="error-msg"
214+
>
215+
{{ keyVerificationMessage }}
216+
</div>
217+
218+
<div
219+
*ngIf="
220+
marketSubsForm.get('key').valid &&
221+
marketSubsForm.get('key').touched
222+
"
223+
class="success-msg"
224+
>
225+
<nb-icon
226+
icon="checkmark-circle-2-outline"
227+
class="success-icon"
228+
></nb-icon>
229+
{{ keyVerificationSuccess }}
230+
</div>
231+
<div
232+
*ngIf="
233+
marketSubsForm.get('key').hasError('pattern') &&
234+
marketSubsForm.get('key').touched
235+
"
236+
class="error-msg"
237+
>
238+
Subdomain must start with a letter and can include numbers
239+
and hyphens and has a maximum length of 20.
240+
</div>
241+
</div>
242+
</div>
243+
</div>
244+
245+
<!-- signup button -->
246+
<div class="btn-wrapper">
247+
<div class="btn regbtn">
248+
<button
249+
nbButton
250+
size="medium"
251+
status="danger"
252+
[disabled]="!marketSubsForm.valid"
253+
type="submit"
254+
>
255+
Submit
256+
</button>
257+
</div>
258+
</div>
259+
</div>
260+
</form>
261+
</div>
262+
</div>
263+
</div>
264+
</nb-card-body>
265+
</nb-card>

0 commit comments

Comments
 (0)