|
99 | 99 |
|
100 | 100 | <div class="price-box"> |
101 | 101 | <div class="price-slider"> |
102 | | - <h4 class="great">Entities</h4> |
103 | | - <span style="color: #7f8c8d; font-size: 13px;">Users or Units sold in packs of 10</span> |
| 102 | + <h4 class="great"><label for="entity-slider">Entities</label></h4> |
| 103 | + <span id="entity-desc" style="color: #7f8c8d; font-size: 13px;">Users or Units sold in packs of 10</span> |
104 | 104 | <div style="padding: 10px 0;"> |
105 | | - <input type="range" id="entity-slider" class="entity-range" min="20" max="2000" step="10" value="20"> |
| 105 | + <input type="range" id="entity-slider" class="entity-range" min="20" max="2000" step="10" value="20" aria-describedby="entity-desc"> |
106 | 106 | </div> |
107 | 107 | <div class="text-center" style="padding-top: 5px;"> |
108 | | - <input id="amount-input" type="number" min="20" max="2000" step="10" value="20" /> <span>Entities</span> |
| 108 | + <label for="amount-input" class="sr-only">Entity count</label> |
| 109 | + <input id="amount-input" type="number" min="20" max="2000" step="10" value="20" aria-describedby="entity-desc" /> <span>Entities</span> |
109 | 110 | </div> |
110 | 111 | </div> |
111 | 112 |
|
|
115 | 116 | <span class="price-label">Monthly ($):</span> |
116 | 117 | </div> |
117 | 118 | <div class="col-sm-6 text-right"> |
118 | | - <span class="price-display" id="monthly-label">0</span><span class="price-cents">.00</span> |
| 119 | + <span class="price-display" id="monthly-label">0.00</span> |
119 | 120 | </div> |
120 | 121 | </div> |
121 | 122 | <div class="row" style="padding: 10px 0;"> |
122 | 123 | <div class="col-sm-6"> |
123 | 124 | <span class="price-label">Yearly ($):</span> |
124 | 125 | </div> |
125 | 126 | <div class="col-sm-6 text-right"> |
126 | | - <span class="price-display" id="yearly-label">0</span><span class="price-cents">.00</span> |
| 127 | + <span class="price-display" id="yearly-label">0.00</span> |
127 | 128 | </div> |
128 | 129 | </div> |
129 | 130 | <hr class="style"> |
|
194 | 195 | }).done(function (data) { |
195 | 196 | if (data && data.SessionId) { |
196 | 197 | stripe.redirectToCheckout({ sessionId: data.SessionId }).then(function (result) { |
197 | | - swal({ title: "Purchase Error", text: "Error redirecting to Stripe: " + result.error.message, icon: "error", buttons: true, dangerMode: false }); |
| 198 | + if (result.error) { |
| 199 | + swal({ title: "Purchase Error", text: "Error redirecting to Stripe: " + result.error.message, icon: "error", buttons: true, dangerMode: false }); |
| 200 | + } |
198 | 201 | }); |
| 202 | + } else { |
| 203 | + swal({ title: "Checkout Error", text: "Unable to create a checkout session. Please try again.", icon: "error", buttons: true, dangerMode: false }); |
199 | 204 | } |
| 205 | + }).fail(function () { |
| 206 | + swal({ title: "Connection Error", text: "Unable to reach the server. Please check your connection and try again.", icon: "error", buttons: true, dangerMode: false }); |
200 | 207 | }); |
201 | 208 | } else { |
202 | 209 | swal({ title: "Cannot Purchase", text: "Please select more than 10 entities to purchase a plan.", icon: "warning", buttons: true, dangerMode: false }); |
|
220 | 227 | return; |
221 | 228 | } |
222 | 229 |
|
| 230 | + if (!data.PriceId) { |
| 231 | + swal({ title: "Checkout Error", text: "Unable to create a checkout session. Please try again.", icon: "error", buttons: true, dangerMode: false }); |
| 232 | + return; |
| 233 | + } |
| 234 | +
|
223 | 235 | var checkoutSettings = { |
224 | 236 | settings: { successUrl: resgrid.absoluteBaseUrl + '/User/Subscription/PaddleProcessing?planId=' + id }, |
225 | 237 | items: [{ priceId: data.PriceId, quantity: packs }] |
|
230 | 242 | } |
231 | 243 |
|
232 | 244 | Paddle.Checkout.open(checkoutSettings); |
| 245 | + } else { |
| 246 | + swal({ title: "Checkout Error", text: "Unable to create a checkout session. Please try again.", icon: "error", buttons: true, dangerMode: false }); |
233 | 247 | } |
| 248 | + }).fail(function () { |
| 249 | + swal({ title: "Connection Error", text: "Unable to reach the server. Please check your connection and try again.", icon: "error", buttons: true, dangerMode: false }); |
234 | 250 | }); |
235 | 251 | } else { |
236 | 252 | swal({ title: "Cannot Purchase", text: "Please select more than 10 entities to purchase a plan.", icon: "warning", buttons: true, dangerMode: false }); |
|
250 | 266 | { marginalUserSlots: 5, costPerUser: 200.0 }, |
251 | 267 | { marginalUserSlots: 100, costPerUser: 20.0 }, |
252 | 268 | { marginalUserSlots: 1000, costPerUser: 15.0 }, |
253 | | - { marginalUserSlots: 1000, costPerUser: 10.0 }, |
| 269 | + { marginalUserSlots: 5000, costPerUser: 10.0 }, |
254 | 270 | { marginalUserSlots: 999999999, costPerUser: 5.0 } |
255 | 271 | ]; |
256 | 272 |
|
|
276 | 292 | var amount = parseInt(document.getElementById('amount-input').value) || 0; |
277 | 293 |
|
278 | 294 | if (amount > 10) { |
279 | | - document.getElementById('monthly-label').textContent = calculateCostFromUsers(amount, true); |
280 | | - document.getElementById('yearly-label').textContent = calculateCostFromUsers(amount, false); |
| 295 | + document.getElementById('monthly-label').textContent = calculateCostFromUsers(amount, true).toFixed(2); |
| 296 | + document.getElementById('yearly-label').textContent = calculateCostFromUsers(amount, false).toFixed(2); |
281 | 297 | document.getElementById('buyYearlyButton').style.display = ''; |
282 | 298 | document.getElementById('buyMonthlyButton').style.display = ''; |
283 | 299 | } else { |
284 | | - document.getElementById('monthly-label').textContent = '0'; |
285 | | - document.getElementById('yearly-label').textContent = '0'; |
| 300 | + document.getElementById('monthly-label').textContent = '0.00'; |
| 301 | + document.getElementById('yearly-label').textContent = '0.00'; |
286 | 302 | document.getElementById('buyYearlyButton').style.display = 'none'; |
287 | 303 | document.getElementById('buyMonthlyButton').style.display = 'none'; |
288 | 304 | } |
|
0 commit comments