Skip to content

Commit bed6c9c

Browse files
yeshamavaniyeshamavani
authored
Merge pull request #102 from sourcefuse/gh-stripe
feat(arc-saas): integrate stripe in ui
2 parents aa2f5d6 + 12259ee commit bed6c9c

File tree

6 files changed

+353
-392
lines changed

6 files changed

+353
-392
lines changed

‎package-lock.json

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

‎package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,10 @@
3333
"@nebular/theme": "^11.0.0",
3434
"@ngx-translate/core": "^14.0.0",
3535
"@ngx-translate/http-loader": "^7.0.0",
36-
"@types/lodash": "^4.17.10",
36+
"@stripe/stripe-js": "^4.9.0",
37+
"@types/lodash": "^4.14.194",
3738
"ag-grid-angular": "^31.3.1",
38-
"ag-grid-community": "^31.3.4",
39+
"ag-grid-community": "^31.3.1",
3940
"date-fns": "^2.29.3",
4041
"dotenv": "^16.0.3",
4142
"eva-icons": "^1.1.3",

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

Lines changed: 23 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -13,51 +13,32 @@ <h2>Please Complete Your registration</h2>
1313
<!-- key -->
1414
<div class="input-box address-input-box">
1515
<div class="input-title">
16-
<span
17-
>Application Sub domain
18-
<span class="required">*</span></span
19-
>
16+
<span>Application Sub domain
17+
<span class="required">*</span></span>
2018
</div>
2119
<div class="input">
2220
<div class="input-container">
23-
<input
24-
placeholder="Enter Unique Key."
25-
fieldSize="medium"
26-
status="“info”"
27-
formControlName="key"
28-
nbInput
29-
/>
30-
<nb-icon
31-
icon="info-outline"
32-
class="info-icon"
33-
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"
34-
></nb-icon>
21+
<input placeholder="Enter Unique Key." fieldSize="medium" status="“info”" formControlName="key"
22+
nbInput />
23+
<nb-icon icon="info-outline" class="info-icon"
24+
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>
3525
</div>
36-
<div
37-
class="error-msg"
38-
*ngIf="
26+
<div class="error-msg" *ngIf="
3927
addTenantForm.get('key').hasError('required') &&
4028
addTenantForm.get('key').touched
41-
"
42-
>
29+
">
4330
Sub-domain is required.
4431
</div>
45-
<div
46-
class="error-msg"
47-
*ngIf="
32+
<div class="error-msg" *ngIf="
4833
addTenantForm.get('key').hasError('maxlength') &&
4934
addTenantForm.get('key').touched
50-
"
51-
>
35+
">
5236
Maximum length exceeded.
5337
</div>
54-
<div
55-
class="error-msg"
56-
*ngIf="
38+
<div class="error-msg" *ngIf="
5739
addTenantForm.get('key').hasError('pattern') &&
5840
addTenantForm.get('key').touched
59-
"
60-
>
41+
">
6142
Invalid characters used.
6243
</div>
6344
</div>
@@ -69,72 +50,12 @@ <h2>Please Complete Your registration</h2>
6950
<input type="hidden" formControlName="paymentMethod" />
7051

7152
<!-- Payment Details -->
53+
54+
<!-- Payment Details Section -->
7255
<div class="payment-details-container">
7356
<h3>Payment Details</h3>
74-
75-
<div class="input-wrapper">
76-
<div class="input-box">
77-
<div class="input-title">
78-
<span>Card Number <span class="required">*</span></span>
79-
</div>
80-
<div class="input">
81-
<!-- Use formGroupName to access the nested form group -->
82-
<div formGroupName="paymentDetails">
83-
<input
84-
placeholder="Enter 16-digit Card Number"
85-
formControlName="cardNumber"
86-
nbInput
87-
/>
88-
</div>
89-
</div>
90-
</div>
91-
<div class="input-box">
92-
<div class="input-title">
93-
<span>Expiry Month <span class="required">*</span></span>
94-
</div>
95-
<div class="input">
96-
<div formGroupName="paymentDetails">
97-
<input
98-
placeholder="MM"
99-
formControlName="expiryMonth"
100-
type="number"
101-
nbInput
102-
/>
103-
</div>
104-
</div>
105-
</div>
106-
107-
<div class="input-box">
108-
<div class="input-title">
109-
<span>Expiry Year <span class="required">*</span></span>
110-
</div>
111-
<div class="input">
112-
<div formGroupName="paymentDetails">
113-
<input
114-
placeholder="YYYY"
115-
formControlName="expiryYear"
116-
type="number"
117-
nbInput
118-
/>
119-
</div>
120-
</div>
121-
</div>
122-
123-
<div class="input-box">
124-
<div class="input-title">
125-
<span>CVV <span class="required">*</span></span>
126-
</div>
127-
<div class="input">
128-
<div formGroupName="paymentDetails">
129-
<input
130-
placeholder="Enter 3-digit CVV"
131-
formControlName="cvv"
132-
type="password"
133-
nbInput
134-
/>
135-
</div>
136-
</div>
137-
</div>
57+
<div class="stripe-element-container">
58+
<div #cardNumber></div> <!-- Mounting Stripe's card element -->
13859
</div>
13960
</div>
14061

@@ -145,31 +66,18 @@ <h3>Payment Details</h3>
14566
<h3>Subscription Plan</h3>
14667
</div>
14768
<div class="plan-card-wrapper">
148-
<nb-card
149-
class="plan-card-box"
150-
*ngFor="let plan of subscriptionPlans"
151-
>
69+
<nb-card class="plan-card-box" *ngFor="let plan of subscriptionPlans">
15270
<nb-card-header class="plan-card-header">
15371
<h5>{{ plan.name }}</h5>
154-
<nb-icon
155-
class="edit-icon"
156-
icon="file-text-outline"
157-
pack="eva"
158-
size="large"
159-
></nb-icon>
72+
<nb-icon class="edit-icon" icon="file-text-outline" pack="eva" size="large"></nb-icon>
16073
</nb-card-header>
16174
<nb-card-body class="body-wrapper">
16275
<p class="plan-description">{{ plan.description }}</p>
16376
<p class="plan-price" *ngIf="plan.tier || plan.size">
16477
{{ plan.tier }}
16578
<ng-container *ngIf="plan.size">
166-
<nb-tag
167-
class="size-tag-wrapper"
168-
*ngIf="plan.size"
169-
status="basic"
170-
appearance="filled"
171-
text="{{ plan.size }}"
172-
></nb-tag>
79+
<nb-tag class="size-tag-wrapper" *ngIf="plan.size" status="basic" appearance="filled"
80+
text="{{ plan.size }}"></nb-tag>
17381
</ng-container>
17482
</p>
17583
<p class="numeric-plan-price">
@@ -180,11 +88,7 @@ <h5>{{ plan.name }}</h5>
18088
<nb-card-footer class="plan-card-footer">
18189
<label class="plan-radio">
18290
<!-- Use FormControl directly -->
183-
<input
184-
type="radio"
185-
[formControl]="addTenantForm.get('planId')"
186-
[value]="plan.id"
187-
/>
91+
<input type="radio" [formControl]="addTenantForm.get('planId')" [value]="plan.id" />
18892
<span class="radio-checkmark"></span>
18993
{{ plan.name }}
19094
</label>
@@ -195,13 +99,7 @@ <h5>{{ plan.name }}</h5>
19599

196100
<!-- signup button -->
197101
<div class="btn regbtn">
198-
<button
199-
nbButton
200-
size="medium"
201-
class="btn-danger"
202-
[disabled]="!addTenantForm.valid"
203-
type="submit"
204-
>
102+
<button nbButton size="medium" class="btn-danger" [disabled]="!addTenantForm.valid" type="submit">
205103
Submit
206104
</button>
207105
</div>
@@ -211,4 +109,4 @@ <h5>{{ plan.name }}</h5>
211109
</nb-card-body>
212110
</nb-card>
213111
</nb-layout-column>
214-
</nb-layout>
112+
</nb-layout>

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,40 @@
179179
gap: 20px;
180180
}
181181

182+
.payment-details-container {
183+
margin-top: 1rem;
184+
}
185+
186+
.stripe-element-container {
187+
padding: 0.5rem;
188+
border: 1px solid #ced4da;
189+
border-radius: 4px;
190+
background-color: #f8f9fa;
191+
margin-top: 0.5rem;
192+
193+
// Loading and error states
194+
&.StripeElement--focus {
195+
border-color: #80bdff;
196+
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
197+
}
198+
199+
&.StripeElement--invalid {
200+
border-color: #fa755a;
201+
}
202+
203+
&.StripeElement--webkit-autofill {
204+
background-color: #fefde5 !important;
205+
}
206+
}
207+
208+
h3 {
209+
color: #495057;
210+
font-weight: 600;
211+
font-size: 1.2rem;
212+
margin-bottom: 0.5rem;
213+
}
214+
215+
182216
.address-input-box {
183217
width: 100%;
184218
}

0 commit comments

Comments
 (0)