fix(arc-saas): changes in design

changes in design

GH-64

Author: Deepika516

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

@@ -239,15 +239,15 @@ <h3>Plan Configuration</h3>
 
           <!-- AddPlan button -->
           <!--  *ngIf="isEditMode" -->
-          <div class="regbtn button-wrapper ">
+          <div class="regbtn button-wrapper">
             <button
-            nbButton
-            size="medium"
-            status="danger"
-            (click)="cancelEdit()"
-          >
-            Cancel
-          </button>
+              nbButton
+              size="medium"
+              status="danger"
+              (click)="cancelEdit()"
+            >
+              Cancel
+            </button>
 
             <button
               nbButton
@@ -257,7 +257,6 @@ <h3>Plan Configuration</h3>
             >
               {{ isEditMode ? 'Save' : 'Add Plan' }}
             </button>
-           
           </div>
         </form>
       </div>

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

@@ -32,43 +32,41 @@
   }
 }
 
-  h3{
-    margin: 0;
-   
-  }
+h3 {
+  margin: 0;
+}
 
-  .plan-wrapper {
-    display: flex;
-    gap: 10px;
-    justify-content: start;
-    flex-wrap: wrap;
-  }
+.plan-wrapper {
+  display: flex;
+  gap: 10px;
+  justify-content: start;
+  flex-wrap: wrap;
+}
 
-  .input-box-wrapper {
-    width: 48%;
-  
-    .input {
-      input {
-        margin: 5px 0;
-        width: 100% !important;
-        max-width: 100%;
-        border-radius: 0;
-        background: #fff;
-        border-color: #cecece;
-      }
-    }
-  
-    .select {
-      width: 100%;
+.input-box-wrapper {
+  width: 48%;
+
+  .input {
+    input {
+      margin: 5px 0;
+      width: 100% !important;
+      max-width: 100%;
+      border-radius: 0;
+      background: #fff;
+      border-color: #cecece;
     }
   }
 
-  .features-wrapper {
-    display: flex;
-    justify-content: space-evenly;
-    align-items: end;
+  .select {
+    width: 100%;
+  }
 }
 
+.features-wrapper {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: end;
+}
 
 .input-box {
   width: 24%;
@@ -102,16 +100,13 @@
   }
 }
 
-
-
 .address-input-box {
   width: 100%;
   border-color: #cecece;
 }
 
 .address-input {
   border-color: #cecece !important;
-   
 }
 .dropdown-wrapper {
   width: 100%;
@@ -147,7 +142,7 @@ ul {
   margin-top: 4px;
 }
 
-.radio-wrapper{
+.radio-wrapper {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -178,22 +173,22 @@ ul {
   font-size: 1.2em;
 }
 
-.details-wrapeer{
-  border: 1px solid #cecece; 
+.details-wrapeer {
+  border: 1px solid #cecece;
   padding: 20px;
   border-radius: 4px;
   margin-bottom: 20px;
 }
 
-.input-box-wrapper{
+.input-box-wrapper {
   .input-title {
     margin-bottom: 5px;
     font-weight: bold;
     font-size: 15px;
   }
 }
 
-.input-title-wrapper{
+.input-title-wrapper {
   margin-bottom: 5px;
   font-weight: bold;
   font-size: 15px;
@@ -202,80 +197,76 @@ ul {
 .info-icon {
   cursor: pointer;
   margin-left: 10px;
-  color: #007bff; 
-  font-size: 18px; 
-  vertical-align: middle; 
+  color: #007bff;
+  font-size: 18px;
+  vertical-align: middle;
 }
 
-
-
-
-
-
 .features-wrapper-testing {
-    margin-top: 20px;
+  margin-top: 20px;
   .features {
     .feature-toggle {
       display: flex;
       align-items: center;
-      margin-bottom: 10px; 
+      margin-bottom: 10px;
       padding: 5px;
       border: 1px solid #cecece;
       border-radius: 5px;
-      
+
       .feature-details {
         display: flex;
         justify-content: space-between;
         width: 100%;
         align-items: center;
 
         .feature-name {
-          flex: 1; 
-          margin-right: 10px; 
+          flex: 1;
+          margin-right: 10px;
         }
 
         .feature-input {
-          flex: 1; 
+          flex: 1;
           display: flex;
-          justify-content: flex-end; 
-          
+          justify-content: flex-end;
+
           nb-toggle,
           input,
           textarea {
-            margin-left: 10px; 
+            margin-left: 10px;
           }
         }
       }
     }
   }
 }
 
+.button-wrapper {
+  display: flex;
+  justify-content: space-between;
+}
 
+.input-container {
+  display: flex;
+  align-items: center;
+  position: relative;
 
-    .input-container {
-      display: flex;
-      align-items: center;
-      position: relative;
-
-      input {
-        width: 100%;
-        padding: 10px;
-        padding-right: 30px; 
-        border: 1px solid #dcdcdc;
-        border-radius: 4px;
-        box-sizing: border-box;
-      }
-
-      .info-icon {
-        position: absolute;
-        right: 20px; 
-        top: 50%;
-        transform: translateY(-50%);
-        cursor: pointer;
-        color: #007bff; 
-        font-size: 18px; 
-        z-index: 1; 
-      }
+  input {
+    width: 100%;
+    padding: 10px;
+    padding-right: 30px;
+    border: 1px solid #dcdcdc;
+    border-radius: 4px;
+    box-sizing: border-box;
+  }
 
-    }
- 
+  .info-icon {
+    position: absolute;
+    right: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+    color: #007bff;
+    font-size: 18px;
+    z-index: 1;
+  }
+}

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

@@ -79,9 +79,9 @@ export class AddPlanComponent implements OnInit {
     this.addPlanForm = this.fb.group({
       // general details
       name: ['', Validators.required],
-      billingCycleId: [null, Validators.required],
+      billingCycleId: [this.defaultBillingCycleId, Validators.required],
       price: [''],
-      currencyId: ['', Validators.required],
+      currencyId: [this.defaultCurrencyId, Validators.required],
       description: [''],
       tier: ['', Validators.required],
       size: [''],
@@ -135,7 +135,8 @@ export class AddPlanComponent implements OnInit {
     domainData.features = featuresGroup ? featuresGroup.value : {};
 
     this.billingplanService.addPlan(generalDetailsData).subscribe(
-      resp => {
+      resp => 
+      {
         this.planId = resp.id;
         const obj: FeatureValues[] = [];
         const planFeatureDetailData = Object.keys(selectedFeatures)
@@ -311,19 +312,17 @@ export class AddPlanComponent implements OnInit {
   //   }
   // }
 
-  cancelEdit(){
+  cancelEdit() {
     this.router.navigate(['/main/plans']);
   }
 
-
   editPlan() {
     if (this.addPlanForm.valid) {
       const domainData = this.addPlanForm.value;
       domainData.price = parseFloat(domainData.price);
 
       const featuresGroup = this.addPlanForm.get('features') as FormGroup;
       const selectedFeatures = featuresGroup
-      
         ? Object.keys(featuresGroup.controls)
             .filter(
               key =>
@@ -428,11 +427,23 @@ export class AddPlanComponent implements OnInit {
   getCurrencyDetails() {
     this.billingplanService.getCurrencyDetails().subscribe(response => {
       this.currencyOptions = response;
+
+      // test
+      if (this.currencyOptions.length > 0) {
+        this.defaultCurrencyId = this.currencyOptions[0].id; 
+        this.addPlanForm.get('currencyId').setValue(this.defaultCurrencyId);
+      }
+    
     });
   }
   getBillingCycleDetails() {
     this.billingplanService.getBillingCycles().subscribe(cycleResp => {
       this.billingOptions = cycleResp;
+// test
+      if (this.billingOptions.length > 0) {
+        this.defaultBillingCycleId = this.billingOptions[0].id; 
+        this.addPlanForm.get('billingCycleId').setValue(this.defaultBillingCycleId);
+      }
     });
   }
   getFeatures() {