Skip to content

Commit bde3d09

Browse files
Deepika516Deepika516
committed
fix(arc-saas): changes in design
changes in design GH-64
1 parent 89373c3 commit bde3d09

File tree

11 files changed

+188
-225
lines changed

11 files changed

+188
-225
lines changed

‎projects/saas-ui/src/app/main/components/add-plan/add-plan.component.html‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -239,15 +239,15 @@ <h3>Plan Configuration</h3>
239239

240240
<!-- AddPlan button -->
241241
<!-- *ngIf="isEditMode" -->
242-
<div class="regbtn button-wrapper ">
242+
<div class="regbtn button-wrapper">
243243
<button
244-
nbButton
245-
size="medium"
246-
status="danger"
247-
(click)="cancelEdit()"
248-
>
249-
Cancel
250-
</button>
244+
nbButton
245+
size="medium"
246+
status="danger"
247+
(click)="cancelEdit()"
248+
>
249+
Cancel
250+
</button>
251251

252252
<button
253253
nbButton
@@ -257,7 +257,6 @@ <h3>Plan Configuration</h3>
257257
>
258258
{{ isEditMode ? 'Save' : 'Add Plan' }}
259259
</button>
260-
261260
</div>
262261
</form>
263262
</div>

‎projects/saas-ui/src/app/main/components/add-plan/add-plan.component.scss‎

Lines changed: 72 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -32,43 +32,41 @@
3232
}
3333
}
3434

35-
h3{
36-
margin: 0;
37-
38-
}
35+
h3 {
36+
margin: 0;
37+
}
3938

40-
.plan-wrapper {
41-
display: flex;
42-
gap: 10px;
43-
justify-content: start;
44-
flex-wrap: wrap;
45-
}
39+
.plan-wrapper {
40+
display: flex;
41+
gap: 10px;
42+
justify-content: start;
43+
flex-wrap: wrap;
44+
}
4645

47-
.input-box-wrapper {
48-
width: 48%;
49-
50-
.input {
51-
input {
52-
margin: 5px 0;
53-
width: 100% !important;
54-
max-width: 100%;
55-
border-radius: 0;
56-
background: #fff;
57-
border-color: #cecece;
58-
}
59-
}
60-
61-
.select {
62-
width: 100%;
46+
.input-box-wrapper {
47+
width: 48%;
48+
49+
.input {
50+
input {
51+
margin: 5px 0;
52+
width: 100% !important;
53+
max-width: 100%;
54+
border-radius: 0;
55+
background: #fff;
56+
border-color: #cecece;
6357
}
6458
}
6559

66-
.features-wrapper {
67-
display: flex;
68-
justify-content: space-evenly;
69-
align-items: end;
60+
.select {
61+
width: 100%;
62+
}
7063
}
7164

65+
.features-wrapper {
66+
display: flex;
67+
justify-content: space-evenly;
68+
align-items: end;
69+
}
7270

7371
.input-box {
7472
width: 24%;
@@ -102,16 +100,13 @@
102100
}
103101
}
104102

105-
106-
107103
.address-input-box {
108104
width: 100%;
109105
border-color: #cecece;
110106
}
111107

112108
.address-input {
113109
border-color: #cecece !important;
114-
115110
}
116111
.dropdown-wrapper {
117112
width: 100%;
@@ -147,7 +142,7 @@ ul {
147142
margin-top: 4px;
148143
}
149144

150-
.radio-wrapper{
145+
.radio-wrapper {
151146
display: flex;
152147
justify-content: space-between;
153148
align-items: center;
@@ -178,22 +173,22 @@ ul {
178173
font-size: 1.2em;
179174
}
180175

181-
.details-wrapeer{
182-
border: 1px solid #cecece;
176+
.details-wrapeer {
177+
border: 1px solid #cecece;
183178
padding: 20px;
184179
border-radius: 4px;
185180
margin-bottom: 20px;
186181
}
187182

188-
.input-box-wrapper{
183+
.input-box-wrapper {
189184
.input-title {
190185
margin-bottom: 5px;
191186
font-weight: bold;
192187
font-size: 15px;
193188
}
194189
}
195190

196-
.input-title-wrapper{
191+
.input-title-wrapper {
197192
margin-bottom: 5px;
198193
font-weight: bold;
199194
font-size: 15px;
@@ -202,80 +197,76 @@ ul {
202197
.info-icon {
203198
cursor: pointer;
204199
margin-left: 10px;
205-
color: #007bff;
206-
font-size: 18px;
207-
vertical-align: middle;
200+
color: #007bff;
201+
font-size: 18px;
202+
vertical-align: middle;
208203
}
209204

210-
211-
212-
213-
214-
215205
.features-wrapper-testing {
216-
margin-top: 20px;
206+
margin-top: 20px;
217207
.features {
218208
.feature-toggle {
219209
display: flex;
220210
align-items: center;
221-
margin-bottom: 10px;
211+
margin-bottom: 10px;
222212
padding: 5px;
223213
border: 1px solid #cecece;
224214
border-radius: 5px;
225-
215+
226216
.feature-details {
227217
display: flex;
228218
justify-content: space-between;
229219
width: 100%;
230220
align-items: center;
231221

232222
.feature-name {
233-
flex: 1;
234-
margin-right: 10px;
223+
flex: 1;
224+
margin-right: 10px;
235225
}
236226

237227
.feature-input {
238-
flex: 1;
228+
flex: 1;
239229
display: flex;
240-
justify-content: flex-end;
241-
230+
justify-content: flex-end;
231+
242232
nb-toggle,
243233
input,
244234
textarea {
245-
margin-left: 10px;
235+
margin-left: 10px;
246236
}
247237
}
248238
}
249239
}
250240
}
251241
}
252242

243+
.button-wrapper {
244+
display: flex;
245+
justify-content: space-between;
246+
}
253247

248+
.input-container {
249+
display: flex;
250+
align-items: center;
251+
position: relative;
254252

255-
.input-container {
256-
display: flex;
257-
align-items: center;
258-
position: relative;
259-
260-
input {
261-
width: 100%;
262-
padding: 10px;
263-
padding-right: 30px;
264-
border: 1px solid #dcdcdc;
265-
border-radius: 4px;
266-
box-sizing: border-box;
267-
}
268-
269-
.info-icon {
270-
position: absolute;
271-
right: 20px;
272-
top: 50%;
273-
transform: translateY(-50%);
274-
cursor: pointer;
275-
color: #007bff;
276-
font-size: 18px;
277-
z-index: 1;
278-
}
253+
input {
254+
width: 100%;
255+
padding: 10px;
256+
padding-right: 30px;
257+
border: 1px solid #dcdcdc;
258+
border-radius: 4px;
259+
box-sizing: border-box;
260+
}
279261

280-
}
281-
262+
.info-icon {
263+
position: absolute;
264+
right: 20px;
265+
top: 50%;
266+
transform: translateY(-50%);
267+
cursor: pointer;
268+
color: #007bff;
269+
font-size: 18px;
270+
z-index: 1;
271+
}
272+
}

‎projects/saas-ui/src/app/main/components/add-plan/add-plan.component.ts‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -79,9 +79,9 @@ export class AddPlanComponent implements OnInit {
7979
this.addPlanForm = this.fb.group({
8080
// general details
8181
name: ['', Validators.required],
82-
billingCycleId: [null, Validators.required],
82+
billingCycleId: [this.defaultBillingCycleId, Validators.required],
8383
price: [''],
84-
currencyId: ['', Validators.required],
84+
currencyId: [this.defaultCurrencyId, Validators.required],
8585
description: [''],
8686
tier: ['', Validators.required],
8787
size: [''],
@@ -135,7 +135,8 @@ export class AddPlanComponent implements OnInit {
135135
domainData.features = featuresGroup ? featuresGroup.value : {};
136136

137137
this.billingplanService.addPlan(generalDetailsData).subscribe(
138-
resp => {
138+
resp =>
139+
{
139140
this.planId = resp.id;
140141
const obj: FeatureValues[] = [];
141142
const planFeatureDetailData = Object.keys(selectedFeatures)
@@ -311,19 +312,17 @@ export class AddPlanComponent implements OnInit {
311312
// }
312313
// }
313314

314-
cancelEdit(){
315+
cancelEdit() {
315316
this.router.navigate(['/main/plans']);
316317
}
317318

318-
319319
editPlan() {
320320
if (this.addPlanForm.valid) {
321321
const domainData = this.addPlanForm.value;
322322
domainData.price = parseFloat(domainData.price);
323323

324324
const featuresGroup = this.addPlanForm.get('features') as FormGroup;
325325
const selectedFeatures = featuresGroup
326-
327326
? Object.keys(featuresGroup.controls)
328327
.filter(
329328
key =>
@@ -428,11 +427,23 @@ export class AddPlanComponent implements OnInit {
428427
getCurrencyDetails() {
429428
this.billingplanService.getCurrencyDetails().subscribe(response => {
430429
this.currencyOptions = response;
430+
431+
// test
432+
if (this.currencyOptions.length > 0) {
433+
this.defaultCurrencyId = this.currencyOptions[0].id;
434+
this.addPlanForm.get('currencyId').setValue(this.defaultCurrencyId);
435+
}
436+
431437
});
432438
}
433439
getBillingCycleDetails() {
434440
this.billingplanService.getBillingCycles().subscribe(cycleResp => {
435441
this.billingOptions = cycleResp;
442+
// test
443+
if (this.billingOptions.length > 0) {
444+
this.defaultBillingCycleId = this.billingOptions[0].id;
445+
this.addPlanForm.get('billingCycleId').setValue(this.defaultBillingCycleId);
446+
}
436447
});
437448
}
438449
getFeatures() {

0 commit comments

Comments
 (0)