Skip to content

(arc-SaaS):removed Loader #115

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

(arc-SaaS):removed Loader #115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
12259ee
feat(arc-saas): integarte stripe
Tyagi-Sunny Nov 28, 2024
5d13e68
fix(arc-saas): removed loader
Deepika516 Nov 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
406 changes: 196 additions & 210 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,10 @@
"@nebular/theme": "^11.0.0",
"@ngx-translate/core": "^14.0.0",
"@ngx-translate/http-loader": "^7.0.0",
"@types/lodash": "^4.17.10",
"@stripe/stripe-js": "^4.9.0",
"@types/lodash": "^4.14.194",
"ag-grid-angular": "^31.3.1",
"ag-grid-community": "^31.3.4",
"ag-grid-community": "^31.3.1",
"date-fns": "^2.29.3",
"dotenv": "^16.0.3",
"eva-icons": "^1.1.3",
Expand Down
6 changes: 2 additions & 4 deletions projects/saas-ui/src/app/main/components/billing-plan/billing-plan.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,8 @@
<nb-card-body>
<h2 class="heading">Billing Details</h2>
<!-- ag-grid -->
<div *ngIf="isLoading" class="loader">
<div class="loading-spinner"></div>
</div>
<div *ngIf="!isLoading">

<div>
<div class="grid">
<ag-grid-angular
class="ag-theme-quartz"
Expand Down
4 changes: 0 additions & 4 deletions projects/saas-ui/src/app/main/components/billing-plan/billing-plan.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ export class BillingPlanComponent extends RouteComponentBaseDirective {
gridApi: GridApi;
gridOptions: GridOptions;
limit = 5;
isLoading: boolean;
colDefs: ColDef[] = [
{field: 'companyName', width: 200, minWidth: 20},
{field: 'userName', width: 200, minWidth: 20},
Expand Down Expand Up @@ -61,19 +60,16 @@ export class BillingPlanComponent extends RouteComponentBaseDirective {
this.gridApi = params.api;
const dataSource: IDatasource = {
getRows: (params: IGetRowsParams) => {
this.isLoading = true;
const page = params.endRow / this.limit;
const paginatedLeads = this.getPaginatedBillPlans(page, this.limit);
const totalLead = this.getTotal();
combineLatest([paginatedLeads, totalLead]).subscribe(
([data, count]) => {
params.successCallback(data, count.count);
this.isLoading = false;
},

err => {
params.failCallback();
this.isLoading = false;
},
);
},
Expand Down
5 changes: 1 addition & 4 deletions projects/saas-ui/src/app/main/components/lead-list/lead-list.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,7 @@
<nb-card accent="danger" class="card-style">
<nb-card-body>
<h2 class="heading">Lead List</h2>
<div *ngIf="isLoading" class="loader">
<div class="loading-spinner"></div>
</div>
<div *ngIf="!isLoading">
<div>
<div class="grid">
<!-- ag-grid -->
<ag-grid-angular
Expand Down
5 changes: 1 addition & 4 deletions projects/saas-ui/src/app/main/components/lead-list/lead-list.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import {HttpClient} from '@angular/common/http';
})
export class LeadListComponent extends RouteComponentBaseDirective {
// defining column names here
isLoading: boolean;

colDefs: ColDef[] = [
{
field: 'firstName',
Expand Down Expand Up @@ -68,19 +68,16 @@ export class LeadListComponent extends RouteComponentBaseDirective {
this.gridApi = params.api;
const dataSource: IDatasource = {
getRows: (params: IGetRowsParams) => {
this.isLoading = true;
const page = params.endRow / this.limit;
const paginatedLeads = this.getPaginatedLeads(page, this.limit);
const totalLead = this.getTotal();
combineLatest([paginatedLeads, totalLead]).subscribe(
([data, count]) => {
params.successCallback(data, count.count);
this.isLoading = false;
},

err => {
params.failCallback();
this.isLoading = false;
},
);
},
Expand Down
5 changes: 1 addition & 4 deletions projects/saas-ui/src/app/main/components/manage-plans/manage-plans.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,8 @@ <h2 class="heading">Manage Plan</h2>
</button>
</div>
</div>
<div *ngIf="isLoading" class="loader">
<div class="loading-spinner"></div>
</div>

<div *ngIf="!isLoading">
<div>
<!-- ag-grid -->
<div class="grid">
<ag-grid-angular
Expand Down
5 changes: 1 addition & 4 deletions projects/saas-ui/src/app/main/components/manage-plans/manage-plans.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export class ManagePlansComponent extends RouteComponentBaseDirective {
gridOptions: GridOptions;
getResp: Plan[];
limit = 5;
isLoading: boolean;

colDefs: ColDef[] = [
{field: 'name', headerName: 'Plan Name', width: 200, minWidth: 20},
{field: 'description', width: 200, minWidth: 20},
Expand Down Expand Up @@ -76,19 +76,16 @@ export class ManagePlansComponent extends RouteComponentBaseDirective {
this.gridApi = params.api;
const dataSource: IDatasource = {
getRows: (params: IGetRowsParams) => {
this.isLoading = true;
const page = params.endRow / this.limit;
const paginatedLeads = this.getPaginatedPlans(page, this.limit);
const totalLead = this.getTotal();
combineLatest([paginatedLeads, totalLead]).subscribe(
([data, count]) => {
params.successCallback(data, count.count);
this.isLoading = false;
},

err => {
params.failCallback();
this.isLoading = false;
},
);
},
Expand Down
6 changes: 2 additions & 4 deletions ...s-ui/src/app/main/components/onboarding-tenant-list/onboarding-tenant-list.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,8 @@ <h2 class="heading">Onboarded Tenant List</h2>
</button>
</div>
</div>
<div *ngIf="isLoading" class="loader">
<div class="loading-spinner"></div>
</div>
<div *ngIf="!isLoading">

<div>
<!-- ag-grid -->
<div class="grid-wrapper">
<div class="grid">
Expand Down
5 changes: 1 addition & 4 deletions ...aas-ui/src/app/main/components/onboarding-tenant-list/onboarding-tenant-list.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export class OnboardingTenantListComponent extends RouteComponentBaseDirective {
params: TenantDetails;
gridOptions: GridOptions;
limit = 10;
isLoading: boolean;

defaultColDef: ColDef = {
flex: 1,
minWidth: 150,
Expand Down Expand Up @@ -154,19 +154,16 @@ export class OnboardingTenantListComponent extends RouteComponentBaseDirective {
this.gridApi = params.api;
const dataSource: IDatasource = {
getRows: (params: IGetRowsParams) => {
this.isLoading = true;
const page = params.endRow / this.limit;
const paginatedLeads = this.getPaginatedTenantDetails(page, this.limit);
const totalLead = this.getTotal();
combineLatest([paginatedLeads, totalLead]).subscribe(
([data, count]) => {
params.successCallback(data, count.count);
this.isLoading = false;
},

err => {
params.failCallback();
this.isLoading = false;
},
);
},
Expand Down
148 changes: 23 additions & 125 deletions projects/saas-ui/src/app/on-boarding/components/add-tenant/add-tenant.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,51 +13,32 @@ <h2>Please Complete Your registration</h2>
<!-- key -->
<div class="input-box address-input-box">
<div class="input-title">
<span
>Application Sub domain
<span class="required">*</span></span
>
<span>Application Sub domain
<span class="required">*</span></span>
</div>
<div class="input">
<div class="input-container">
<input
placeholder="Enter Unique Key."
fieldSize="medium"
status="“info”"
formControlName="key"
nbInput
/>
<nb-icon
icon="info-outline"
class="info-icon"
nbTooltip="Enter a unique key starting with an alphabet. This field is required and has a maximum length of 10 characters. Special characters are not allowed"
></nb-icon>
<input placeholder="Enter Unique Key." fieldSize="medium" status="“info”" formControlName="key"
nbInput />
<nb-icon icon="info-outline" class="info-icon"
nbTooltip="Enter a unique key starting with an alphabet. This field is required and has a maximum length of 10 characters. Special characters are not allowed"></nb-icon>
</div>
<div
class="error-msg"
*ngIf="
<div class="error-msg" *ngIf="
addTenantForm.get('key').hasError('required') &&
addTenantForm.get('key').touched
"
>
">
Sub-domain is required.
</div>
<div
class="error-msg"
*ngIf="
<div class="error-msg" *ngIf="
addTenantForm.get('key').hasError('maxlength') &&
addTenantForm.get('key').touched
"
>
">
Maximum length exceeded.
</div>
<div
class="error-msg"
*ngIf="
<div class="error-msg" *ngIf="
addTenantForm.get('key').hasError('pattern') &&
addTenantForm.get('key').touched
"
>
">
Invalid characters used.
</div>
</div>
Expand All @@ -69,72 +50,12 @@ <h2>Please Complete Your registration</h2>
<input type="hidden" formControlName="paymentMethod" />

<!-- Payment Details -->

<!-- Payment Details Section -->
<div class="payment-details-container">
<h3>Payment Details</h3>

<div class="input-wrapper">
<div class="input-box">
<div class="input-title">
<span>Card Number <span class="required">*</span></span>
</div>
<div class="input">
<!-- Use formGroupName to access the nested form group -->
<div formGroupName="paymentDetails">
<input
placeholder="Enter 16-digit Card Number"
formControlName="cardNumber"
nbInput
/>
</div>
</div>
</div>
<div class="input-box">
<div class="input-title">
<span>Expiry Month <span class="required">*</span></span>
</div>
<div class="input">
<div formGroupName="paymentDetails">
<input
placeholder="MM"
formControlName="expiryMonth"
type="number"
nbInput
/>
</div>
</div>
</div>

<div class="input-box">
<div class="input-title">
<span>Expiry Year <span class="required">*</span></span>
</div>
<div class="input">
<div formGroupName="paymentDetails">
<input
placeholder="YYYY"
formControlName="expiryYear"
type="number"
nbInput
/>
</div>
</div>
</div>

<div class="input-box">
<div class="input-title">
<span>CVV <span class="required">*</span></span>
</div>
<div class="input">
<div formGroupName="paymentDetails">
<input
placeholder="Enter 3-digit CVV"
formControlName="cvv"
type="password"
nbInput
/>
</div>
</div>
</div>
<div class="stripe-element-container">
<div #cardNumber></div> <!-- Mounting Stripe's card element -->
</div>
</div>

Expand All @@ -145,31 +66,18 @@ <h3>Payment Details</h3>
<h3>Subscription Plan</h3>
</div>
<div class="plan-card-wrapper">
<nb-card
class="plan-card-box"
*ngFor="let plan of subscriptionPlans"
>
<nb-card class="plan-card-box" *ngFor="let plan of subscriptionPlans">
<nb-card-header class="plan-card-header">
<h5>{{ plan.name }}</h5>
<nb-icon
class="edit-icon"
icon="file-text-outline"
pack="eva"
size="large"
></nb-icon>
<nb-icon class="edit-icon" icon="file-text-outline" pack="eva" size="large"></nb-icon>
</nb-card-header>
<nb-card-body class="body-wrapper">
<p class="plan-description">{{ plan.description }}</p>
<p class="plan-price" *ngIf="plan.tier || plan.size">
{{ plan.tier }}
<ng-container *ngIf="plan.size">
<nb-tag
class="size-tag-wrapper"
*ngIf="plan.size"
status="basic"
appearance="filled"
text="{{ plan.size }}"
></nb-tag>
<nb-tag class="size-tag-wrapper" *ngIf="plan.size" status="basic" appearance="filled"
text="{{ plan.size }}"></nb-tag>
</ng-container>
</p>
<p class="numeric-plan-price">
Expand All @@ -180,11 +88,7 @@ <h5>{{ plan.name }}</h5>
<nb-card-footer class="plan-card-footer">
<label class="plan-radio">
<!-- Use FormControl directly -->
<input
type="radio"
[formControl]="addTenantForm.get('planId')"
[value]="plan.id"
/>
<input type="radio" [formControl]="addTenantForm.get('planId')" [value]="plan.id" />
<span class="radio-checkmark"></span>
{{ plan.name }}
</label>
Expand All @@ -195,13 +99,7 @@ <h5>{{ plan.name }}</h5>

<!-- signup button -->
<div class="btn regbtn">
<button
nbButton
size="medium"
class="btn-danger"
[disabled]="!addTenantForm.valid"
type="submit"
>
<button nbButton size="medium" class="btn-danger" [disabled]="!addTenantForm.valid" type="submit">
Submit
</button>
</div>
Expand All @@ -211,4 +109,4 @@ <h5>{{ plan.name }}</h5>
</nb-card-body>
</nb-card>
</nb-layout-column>
</nb-layout>
</nb-layout>
Loading