tango-app-api-payment-subscription 3.0.14-dev → 3.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,654 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <style type="text/css">
5
+ .invoicemodel,
6
+ .invoicemodel * {
7
+ box-sizing: border-box;
8
+ }
9
+ .invoicemodel {
10
+ background: var(--others-white, #ffffff);
11
+ border-radius: 12px;
12
+ padding: 32px 32px 40px 32px;
13
+ display: flex;
14
+ flex-direction: column;
15
+ gap: 32px;
16
+ align-items: flex-start;
17
+ justify-content: flex-start;
18
+ position: relative;
19
+ overflow: hidden;
20
+ }
21
+ .text {
22
+ display: flex;
23
+ flex-direction: column;
24
+ gap: 16px;
25
+ align-items: flex-start;
26
+ justify-content: flex-start;
27
+ align-self: stretch;
28
+ flex-shrink: 0;
29
+ position: relative;
30
+ }
31
+ .header {
32
+ color: var(--greyscale-900, #121a26);
33
+ text-align: left;
34
+ font-family: var(
35
+ --text-xl-semibold-font-family,
36
+ "Inter-SemiBold",
37
+ sans-serif
38
+ );
39
+ font-size: var(--text-xl-semibold-font-size, 20px);
40
+ line-height: var(--text-xl-semibold-line-height, 30px);
41
+ font-weight: var(--text-xl-semibold-font-weight, 600);
42
+ position: relative;
43
+ align-self: stretch;
44
+ }
45
+ .subheading {
46
+ color: var(--greyscale-700, #384860);
47
+ text-align: left;
48
+ font-family: var(--text-md-medium-font-family, "Inter-Medium", sans-serif);
49
+ font-size: var(--text-md-medium-font-size, 16px);
50
+ line-height: var(--text-md-medium-line-height, 24px);
51
+ font-weight: var(--text-md-medium-font-weight, 500);
52
+ position: relative;
53
+ align-self: stretch;
54
+ }
55
+ .order-detail {
56
+ display: flex;
57
+ flex-direction: column;
58
+ gap: 24px;
59
+ align-items: flex-start;
60
+ justify-content: flex-start;
61
+ align-self: stretch;
62
+ flex-shrink: 0;
63
+ position: relative;
64
+ }
65
+ .text2 {
66
+ display: flex;
67
+ flex-direction: column;
68
+ gap: 8px;
69
+ align-items: flex-start;
70
+ justify-content: flex-start;
71
+ align-self: stretch;
72
+ flex-shrink: 0;
73
+ position: relative;
74
+ }
75
+ .invoicedetails {
76
+ color: var(--greyscale-900, #121a26);
77
+ text-align: left;
78
+ font-family: var(
79
+ --text-md-semibold-font-family,
80
+ "Inter-SemiBold",
81
+ sans-serif
82
+ );
83
+ font-size: var(--text-md-semibold-font-size, 16px);
84
+ line-height: var(--text-md-semibold-line-height, 24px);
85
+ font-weight: var(--text-md-semibold-font-weight, 600);
86
+ position: relative;
87
+ align-self: stretch;
88
+ }
89
+ .body4 {
90
+ text-align: left;
91
+ font-family: var(--text-md-medium-font-family, "Inter-Medium", sans-serif);
92
+ font-size: var(--text-md-medium-font-size, 16px);
93
+ line-height: var(--text-md-medium-line-height, 24px);
94
+ font-weight: var(--text-md-medium-font-weight, 500);
95
+ position: relative;
96
+ align-self: stretch;
97
+ }
98
+ .body-4-span {
99
+ color: var(--greyscale-700, #384860);
100
+ font-family: var(--text-md-medium-font-family, "Inter-Medium", sans-serif);
101
+ font-size: var(--text-md-medium-font-size, 16px);
102
+ line-height: var(--text-md-medium-line-height, 24px);
103
+ font-weight: var(--text-md-medium-font-weight, 500);
104
+ }
105
+ .body-4-span2 {
106
+ color: var(--primary-base, #2969ff);
107
+ font-family: var(--text-md-medium-font-family, "Inter-Medium", sans-serif);
108
+ font-size: var(--text-md-medium-font-size, 16px);
109
+ line-height: var(--text-md-medium-line-height, 24px);
110
+ font-weight: var(--text-md-medium-font-weight, 500);
111
+ }
112
+ .invoicedetailsframe {
113
+ display: flex;
114
+ flex-direction: column;
115
+ gap: 8px;
116
+ align-items: flex-start;
117
+ justify-content: flex-start;
118
+ align-self: stretch;
119
+ flex-shrink: 0;
120
+ position: relative;
121
+ }
122
+ .invoicedetailscontent {
123
+ background: var(--white, #ffffff);
124
+ display: flex;
125
+ flex-direction: row;
126
+ gap: 0px;
127
+ align-items: flex-start;
128
+ justify-content: flex-start;
129
+ align-self: stretch;
130
+ flex-shrink: 0;
131
+ position: relative;
132
+ }
133
+ .column {
134
+ display: flex;
135
+ flex-direction: column;
136
+ gap: 0px;
137
+ align-items: flex-start;
138
+ justify-content: flex-start;
139
+ align-self: stretch;
140
+ flex: 1;
141
+ position: relative;
142
+ }
143
+ .table-header-cell {
144
+ background: var(--gray-50, #f9fafb);
145
+ border-style: solid;
146
+ border-color: var(--gray-200, #eaecf0);
147
+ border-width: 0px 0px 1px 0px;
148
+ padding: 12px 24px 12px 24px;
149
+ display: flex;
150
+ flex-direction: row;
151
+ gap: 12px;
152
+ align-items: center;
153
+ justify-content: flex-start;
154
+ align-self: stretch;
155
+ flex-shrink: 0;
156
+ height: 44px;
157
+ position: relative;
158
+ }
159
+ .table-header {
160
+ display: flex;
161
+ flex-direction: row;
162
+ gap: 4px;
163
+ align-items: center;
164
+ justify-content: flex-start;
165
+ flex-shrink: 0;
166
+ position: relative;
167
+ }
168
+ .text3 {
169
+ color: var(--gray-500, #667085);
170
+ text-align: left;
171
+ font-family: var(--text-md-medium-font-family, "Inter-Medium", sans-serif);
172
+ font-size: var(--text-md-medium-font-size, 16px);
173
+ line-height: var(--text-md-medium-line-height, 24px);
174
+ font-weight: var(--text-md-medium-font-weight, 500);
175
+ position: relative;
176
+ }
177
+ .table-cell {
178
+ border-style: solid;
179
+ border-color: var(--gray-200, #eaecf0);
180
+ border-width: 0px 0px 1px 0px;
181
+ padding: 16px 24px 16px 24px;
182
+ display: flex;
183
+ flex-direction: row;
184
+ gap: 0px;
185
+ align-items: center;
186
+ justify-content: flex-start;
187
+ align-self: stretch;
188
+ flex-shrink: 0;
189
+ height: 72px;
190
+ position: relative;
191
+ }
192
+ .text4 {
193
+ color: var(--gray-600, #475467);
194
+ text-align: left;
195
+ font-family: var(--text-md-medium-font-family, "Inter-Medium", sans-serif);
196
+ font-size: var(--text-md-medium-font-size, 16px);
197
+ line-height: var(--text-md-medium-line-height, 24px);
198
+ font-weight: var(--text-md-medium-font-weight, 500);
199
+ position: relative;
200
+ }
201
+ .table-header2 {
202
+ display: flex;
203
+ flex-direction: row;
204
+ gap: 4px;
205
+ align-items: center;
206
+ justify-content: flex-start;
207
+ flex: 1;
208
+ position: relative;
209
+ }
210
+ .text5 {
211
+ color: var(--gray-500, #667085);
212
+ text-align: right;
213
+ font-family: var(--text-md-medium-font-family, "Inter-Medium", sans-serif);
214
+ font-size: var(--text-md-medium-font-size, 16px);
215
+ line-height: var(--text-md-medium-line-height, 24px);
216
+ font-weight: var(--text-md-medium-font-weight, 500);
217
+ position: relative;
218
+ flex: 1;
219
+ }
220
+ .text6 {
221
+ color: var(--gray-600, #475467);
222
+ text-align: right;
223
+ font-family: var(--text-md-medium-font-family, "Inter-Medium", sans-serif);
224
+ font-size: var(--text-md-medium-font-size, 16px);
225
+ line-height: var(--text-md-medium-line-height, 24px);
226
+ font-weight: var(--text-md-medium-font-weight, 500);
227
+ position: relative;
228
+ flex: 1;
229
+ }
230
+ .table-header3 {
231
+ display: flex;
232
+ flex-direction: row;
233
+ gap: 4px;
234
+ align-items: center;
235
+ justify-content: flex-end;
236
+ flex: 1;
237
+ position: relative;
238
+ }
239
+ .billingvalueframe {
240
+ display: flex;
241
+ flex-direction: column;
242
+ gap: 12px;
243
+ align-items: flex-start;
244
+ justify-content: flex-start;
245
+ align-self: stretch;
246
+ flex-shrink: 0;
247
+ position: relative;
248
+ }
249
+ .subtotal {
250
+ display: flex;
251
+ flex-direction: row;
252
+ gap: 84px;
253
+ align-items: flex-start;
254
+ justify-content: flex-start;
255
+ align-self: stretch;
256
+ flex-shrink: 0;
257
+ position: relative;
258
+ }
259
+ .framestartvalue {
260
+ padding: 0px 24px 0px 24px;
261
+ display: flex;
262
+ flex-direction: row;
263
+ gap: 10px;
264
+ align-items: flex-start;
265
+ justify-content: flex-start;
266
+ flex: 1;
267
+ position: relative;
268
+ }
269
+ .text7 {
270
+ color: var(--gray-500, #667085);
271
+ text-align: left;
272
+ font-family: var(
273
+ --text-md-semibold-font-family,
274
+ "Inter-SemiBold",
275
+ sans-serif
276
+ );
277
+ font-size: var(--text-md-semibold-font-size, 16px);
278
+ line-height: var(--text-md-semibold-line-height, 24px);
279
+ font-weight: var(--text-md-semibold-font-weight, 600);
280
+ position: relative;
281
+ flex: 1;
282
+ }
283
+ .frame-endvalue {
284
+ padding: 0px 23px 0px 23px;
285
+ display: flex;
286
+ flex-direction: row;
287
+ gap: 10px;
288
+ align-items: flex-start;
289
+ justify-content: flex-start;
290
+ flex: 1;
291
+ position: relative;
292
+ }
293
+ .text8 {
294
+ color: var(--gray-500, #667085);
295
+ text-align: right;
296
+ font-family: var(
297
+ --text-md-semibold-font-family,
298
+ "Inter-SemiBold",
299
+ sans-serif
300
+ );
301
+ font-size: var(--text-md-semibold-font-size, 16px);
302
+ line-height: var(--text-md-semibold-line-height, 24px);
303
+ font-weight: var(--text-md-semibold-font-weight, 600);
304
+ position: relative;
305
+ flex: 1;
306
+ }
307
+ .IGST {
308
+ display: flex;
309
+ flex-direction: row;
310
+ gap: 84px;
311
+ align-items: flex-start;
312
+ justify-content: flex-start;
313
+ align-self: stretch;
314
+ flex-shrink: 0;
315
+ position: relative;
316
+ }
317
+ .Total {
318
+ display: flex;
319
+ flex-direction: row;
320
+ gap: 84px;
321
+ align-items: flex-start;
322
+ justify-content: flex-start;
323
+ align-self: stretch;
324
+ flex-shrink: 0;
325
+ position: relative;
326
+ }
327
+ .Discount {
328
+ display: flex;
329
+ flex-direction: row;
330
+ gap: 84px;
331
+ align-items: flex-start;
332
+ justify-content: flex-start;
333
+ align-self: stretch;
334
+ flex-shrink: 0;
335
+ position: relative;
336
+ }
337
+ .divider {
338
+ background: var(--gray-25, #fcfcfd);
339
+ display: flex;
340
+ flex-direction: row;
341
+ gap: 0px;
342
+ align-items: flex-start;
343
+ justify-content: center;
344
+ align-self: stretch;
345
+ flex-shrink: 0;
346
+ position: relative;
347
+ }
348
+ .container {
349
+ padding: 0px 32px 0px 32px;
350
+ display: flex;
351
+ flex-direction: column;
352
+ gap: 32px;
353
+ align-items: flex-start;
354
+ justify-content: flex-start;
355
+ flex: 1;
356
+ height: auto;
357
+ position: relative;
358
+ overflow: visible;
359
+ }
360
+ .finalvalue {
361
+ display: flex;
362
+ flex-direction: row;
363
+ gap: 84px;
364
+ align-items: flex-start;
365
+ justify-content: flex-start;
366
+ align-self: stretch;
367
+ flex-shrink: 0;
368
+ position: relative;
369
+ }
370
+ .line {
371
+ border-style: solid;
372
+ border-color: var(--greyscale-200, #e2e8f0);
373
+ border-width: 1px 0 0 0;
374
+ align-self: stretch;
375
+ flex-shrink: 0;
376
+ height: 0px;
377
+ position: relative;
378
+ transform-origin: 0 0;
379
+ transform: rotate(0deg) scale(1, 1);
380
+ }
381
+ .paymentframe {
382
+ display: flex;
383
+ flex-direction: column;
384
+ gap: 12px;
385
+ align-items: flex-start;
386
+ justify-content: flex-start;
387
+ align-self: stretch;
388
+ flex-shrink: 0;
389
+ position: relative;
390
+ }
391
+ .bank-details {
392
+ color: var(--gray-900, #101828);
393
+ text-align: left;
394
+ font-family: var(
395
+ --text-md-semibold-font-family,
396
+ "Inter-SemiBold",
397
+ sans-serif
398
+ );
399
+ font-size: var(--text-md-semibold-font-size, 16px);
400
+ line-height: var(--text-md-semibold-line-height, 24px);
401
+ font-weight: var(--text-md-semibold-font-weight, 600);
402
+ position: relative;
403
+ }
404
+ .account-details {
405
+ display: flex;
406
+ flex-direction: column;
407
+ gap: 12px;
408
+ align-items: flex-start;
409
+ justify-content: flex-start;
410
+ flex-shrink: 0;
411
+ position: relative;
412
+ }
413
+ .details1 {
414
+ display: flex;
415
+ flex-direction: column;
416
+ gap: 0px;
417
+ align-items: flex-start;
418
+ justify-content: flex-start;
419
+ flex-shrink: 0;
420
+ position: relative;
421
+ }
422
+ .account-number {
423
+ color: var(--gray-500, #667085);
424
+ text-align: left;
425
+ font-family: var(--text-md-medium-font-family, "Inter-Medium", sans-serif);
426
+ font-size: var(--text-md-medium-font-size, 16px);
427
+ line-height: var(--text-md-medium-line-height, 24px);
428
+ font-weight: var(--text-md-medium-font-weight, 500);
429
+ position: relative;
430
+ }
431
+ ._12457687989577 {
432
+ color: var(--gray-800, #1d2939);
433
+ text-align: left;
434
+ font-family: var(
435
+ --text-md-semibold-font-family,
436
+ "Inter-SemiBold",
437
+ sans-serif
438
+ );
439
+ font-size: var(--text-md-semibold-font-size, 16px);
440
+ line-height: var(--text-md-semibold-line-height, 24px);
441
+ font-weight: var(--text-md-semibold-font-weight, 600);
442
+ position: relative;
443
+ width: 210px;
444
+ }
445
+ .details2 {
446
+ display: flex;
447
+ flex-direction: column;
448
+ gap: 0px;
449
+ align-items: flex-start;
450
+ justify-content: flex-start;
451
+ flex-shrink: 0;
452
+ position: relative;
453
+ }
454
+ .ifsc-code {
455
+ color: var(--gray-500, #667085);
456
+ text-align: left;
457
+ font-family: var(--text-md-medium-font-family, "Inter-Medium", sans-serif);
458
+ font-size: var(--text-md-medium-font-size, 16px);
459
+ line-height: var(--text-md-medium-line-height, 24px);
460
+ font-weight: var(--text-md-medium-font-weight, 500);
461
+ position: relative;
462
+ }
463
+ .sbi-0208 {
464
+ color: var(--gray-800, #1d2939);
465
+ text-align: left;
466
+ font-family: var(
467
+ --text-md-semibold-font-family,
468
+ "Inter-SemiBold",
469
+ sans-serif
470
+ );
471
+ font-size: var(--text-md-semibold-font-size, 16px);
472
+ line-height: var(--text-md-semibold-line-height, 24px);
473
+ font-weight: var(--text-md-semibold-font-weight, 600);
474
+ position: relative;
475
+ }
476
+ .text9 {
477
+ display: flex;
478
+ flex-direction: column;
479
+ gap: 12px;
480
+ align-items: flex-start;
481
+ justify-content: flex-start;
482
+ align-self: stretch;
483
+ flex-shrink: 0;
484
+ position: relative;
485
+ }
486
+ .button {
487
+ border-radius: 8px;
488
+ display: flex;
489
+ flex-direction: row;
490
+ gap: 0px;
491
+ align-items: flex-start;
492
+ justify-content: flex-start;
493
+ align-self: stretch;
494
+ flex-shrink: 0;
495
+ position: relative;
496
+ }
497
+ .button-base {
498
+ background: var(--primary-600, #00a3ff);
499
+ border-radius: 8px;
500
+ border-style: solid;
501
+ border-color: var(--primary-600, #00a3ff);
502
+ border-width: 1px;
503
+ padding: 16px 28px 16px 28px;
504
+ display: flex;
505
+ flex-direction: row;
506
+ gap: 8px;
507
+ align-items: center;
508
+ justify-content: center;
509
+ flex: 1;
510
+ position: relative;
511
+ box-shadow: var(
512
+ --shadow-xs-box-shadow,
513
+ 0px 1px 2px 0px rgba(16, 24, 40, 0.05)
514
+ );
515
+ overflow: hidden;
516
+ }
517
+ .text10 {
518
+ color: var(--white, #ffffff);
519
+ text-align: left;
520
+ font-family: "Inter-SemiBold", sans-serif;
521
+ font-size: 18px;
522
+ line-height: 28px;
523
+ font-weight: 600;
524
+ position: relative;
525
+ }
526
+ </style>
527
+
528
+ </head>
529
+
530
+ <body>
531
+ <div class="invoicemodel">
532
+ <div class="text">
533
+ <div class="header">Invoice Raised</div>
534
+ <div class="subheading">
535
+ Thank you for choosing us. We hope you had the best experience while using
536
+ Tango platform.
537
+ <br />
538
+ A new invoice LK4803-0005 is raised for your quarterly cycle and is due
539
+ for payments
540
+ </div>
541
+ </div>
542
+ <div class="order-detail">
543
+ <div class="text2">
544
+ <div class="invoicedetails">Invoice Details</div>
545
+ <div class="body4">
546
+ <span>
547
+ <span class="body-4-span">No. Invoice:</span>
548
+ <span class="body-4-span2">{{data.invoice}}</span>
549
+ </span>
550
+ </div>
551
+ <div class="invoicedetailsframe">
552
+ <table style="max-width: 600px;border:none" border="0" cellpadding="0" cellspacing="0" width="100%">
553
+ <tr style="border:none;height:40px;margin-top:10px;text-align:left">
554
+ <th style="width:300px;">Description</th>
555
+ <th style="width:120px;">Price</th>
556
+ <th style="width:120px;">Stores</th>
557
+ <th style="width:120px;">Total Amount</th>
558
+ </tr>
559
+ {{#each data.products}}
560
+ <tr style="border:none;margin-top:10px;">
561
+ <td>{{product.product}}</td>
562
+ <td>{{../data.currencyType}} {{basePrice}}</td>
563
+ <td>{{count}}</td>
564
+ <td>{{../data.currencyType}} {{price}}</td>
565
+ </tr>
566
+ {{/each}}
567
+ <tr style="border:1px solid grey;">
568
+ <td></td>
569
+ <td></td>
570
+ <td></td>
571
+ <td></td>
572
+ </tr>
573
+ <tr style="border:none;border-top: 5px solid #eaecf0;margin-top:10px;">
574
+ <td>Sub Total</td>
575
+ <td></td>
576
+ <td></td>
577
+ <td>{{data.currencyType}} {{data.amount}}</td>
578
+ </tr>
579
+ <tr style="border:none;margin-top:10px;">
580
+ <td>IGST</td>
581
+ <td></td>
582
+ <td></td>
583
+ <td>0%</td>
584
+ </tr>
585
+ <tr style="border:none;margin-top:10px;">
586
+ <td>Total</td>
587
+ <td></td>
588
+ <td></td>
589
+ <td>{{data.currencyType}} {{data.total}}</td>
590
+ </tr>
591
+ <tr style="border:none;margin-top:10px;">
592
+ <td>Discount</td>
593
+ <td></td>
594
+ <td></td>
595
+ <td>{{data.discount}}</td>
596
+ </tr>
597
+ <tr style="border:1px solid grey;">
598
+ <td></td>
599
+ <td></td>
600
+ <td></td>
601
+ <td></td>
602
+ </tr>
603
+ <tr style="border:none;border-top: 5px solid #eaecf0;margin-top:10px;">
604
+ <td>Final Value</td>
605
+ <td></td>
606
+ <td></td>
607
+ <td>{{data.currencyType}} {{data.total}}</td>
608
+ </tr>
609
+ </table>
610
+ </div>
611
+ </div>
612
+ <div class="text2">
613
+ <div class="subheading">
614
+ Please complete the payment at the earliest for the continuation of our
615
+ services
616
+ </div>
617
+ <div class="paymentframe">
618
+ <div class="bank-details">Bank Details</div>
619
+ <div class="account-details">
620
+ <div class="details1">
621
+ <div class="account-number">Account Number</div>
622
+ <div class="_12457687989577">12457687989577</div>
623
+ </div>
624
+ <div class="details2">
625
+ <div class="ifsc-code">IFSC Code</div>
626
+ <div class="sbi-0208">SBI0208</div>
627
+ </div>
628
+ </div>
629
+ </div>
630
+ </div>
631
+ <div class="text9">
632
+ <div class="subheading">
633
+ Currently, we do not support RBL to RBL Internal Fund Transfer (IIFT)
634
+ transactions on above account number.
635
+ </div>
636
+ <div class="subheading">
637
+ Cheque deposits are not available for the above account number.
638
+ </div>
639
+ <div class="subheading">
640
+ You can also pay using Credit Card / Debit Card / Net Banking / UPI.
641
+ </div>
642
+ </div>
643
+ <div class="button">
644
+ <div class="button-base">
645
+ <div class="text10">PAY NOW</div>
646
+ </div>
647
+ </div>
648
+ </div>
649
+ </div>
650
+
651
+ </body>
652
+
653
+ </html>
654
+