adp-web-components 0.0.13 → 0.0.15
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.
- package/dist/cjs/{loader-baf2418b.js → Loading-20e4ef35.js} +9 -0
- package/dist/cjs/dead-stock-lookup.cjs.entry.js +3 -4
- package/dist/cjs/distributor-lookup.cjs.entry.js +3 -4
- package/dist/cjs/dynamic-claim_6.cjs.entry.js +1046 -0
- package/dist/cjs/dynamic-redeem.cjs.entry.js +5 -5
- package/dist/cjs/form-input.cjs.entry.js +2 -2
- package/dist/cjs/general-inquiry-form.cjs.entry.js +2 -2
- package/dist/cjs/{index-d4b5214c.js → index-97b8da6d.js} +289 -8
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/manufacturer-lookup.cjs.entry.js +3 -4
- package/dist/cjs/shift-components.cjs.js +2 -2
- package/dist/cjs/vehicle-lookup.cjs.entry.js +133 -0
- package/dist/collection/collection-manifest.json +6 -5
- package/dist/collection/components/dynamic-claim/dynamic-claim.css +1 -1
- package/dist/collection/components/dynamic-claim/dynamic-claim.js +2 -2
- package/dist/collection/components/dynamic-redeem/dynamic-redeem.css +1 -1
- package/dist/collection/components/dynamic-redeem/dynamic-redeem.js +3 -3
- package/dist/collection/components/form-input/form-input.js +1 -1
- package/dist/collection/components/general-inquiry-form/general-inquiry-form.js +1 -1
- package/dist/collection/components/paint-thickness/paint-thickness.css +1 -1
- package/dist/collection/components/paint-thickness/paint-thickness.js +3 -3
- package/dist/collection/components/part-lookup/dead-stock-lookup.js +1 -1
- package/dist/collection/components/part-lookup/distributor-lookup.js +1 -1
- package/dist/collection/components/part-lookup/manufacturer-lookup.js +1 -1
- package/dist/collection/components/service-history/service-history.css +1 -1
- package/dist/collection/components/service-history/service-history.js +1 -1
- package/dist/collection/components/vehicle-accessories/vehicle-accessories.css +1 -1
- package/dist/collection/components/vehicle-accessories/vehicle-accessories.js +3 -3
- package/dist/collection/components/vehicle-lookup/vehicle-lookup.css +1 -0
- package/dist/collection/components/vehicle-lookup/vehicle-lookup.js +244 -0
- package/dist/collection/components/vehicle-specification/vehicle-specification.css +1 -1
- package/dist/collection/components/vehicle-specification/vehicle-specification.js +1 -1
- package/dist/collection/components/warranty-details/warranty-details.css +1 -1
- package/dist/collection/components/warranty-details/warranty-details.js +1 -1
- package/dist/collection/global/lib/validate-vin.js +62 -0
- package/dist/components/dead-stock-lookup.js +1 -1
- package/dist/components/distributor-lookup.js +1 -1
- package/dist/components/dynamic-claim.js +1 -1
- package/dist/components/dynamic-redeem.js +1 -1
- package/dist/components/form-input.js +1 -1
- package/dist/components/general-inquiry-form.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/manufacturer-lookup.js +1 -1
- package/dist/components/p-05871c28.js +5 -0
- package/dist/components/p-23551e81.js +5 -0
- package/dist/components/p-325b6857.js +5 -0
- package/dist/components/{p-50f73226.js → p-3bf0339d.js} +1 -1
- package/dist/components/p-514c4736.js +5 -0
- package/dist/components/{p-2b0cc0c6.js → p-8385e385.js} +1 -1
- package/dist/components/p-be0a5ab5.js +5 -0
- package/dist/components/p-c8eef708.js +5 -0
- package/dist/components/p-da533bd7.js +5 -0
- package/dist/components/p-e46b126e.js +5 -0
- package/dist/components/p-f1ffc23d.js +5 -0
- package/dist/components/paint-thickness.js +1 -1
- package/dist/components/service-history.js +1 -1
- package/dist/components/vehicle-accessories.js +1 -1
- package/dist/components/vehicle-lookup.d.ts +11 -0
- package/dist/components/vehicle-lookup.js +5 -0
- package/dist/components/vehicle-specification.js +1 -1
- package/dist/components/warranty-details.js +1 -1
- package/dist/esm/{loader-027b88af.js → Loading-d050617c.js} +9 -1
- package/dist/esm/dead-stock-lookup.entry.js +3 -4
- package/dist/esm/distributor-lookup.entry.js +3 -4
- package/dist/esm/dynamic-claim_6.entry.js +1037 -0
- package/dist/esm/dynamic-redeem.entry.js +5 -5
- package/dist/esm/form-input.entry.js +2 -2
- package/dist/esm/general-inquiry-form.entry.js +2 -2
- package/dist/esm/{index-ef54644b.js → index-ff1dab22.js} +289 -8
- package/dist/esm/loader.js +3 -3
- package/dist/esm/manufacturer-lookup.entry.js +3 -4
- package/dist/esm/shift-components.js +3 -3
- package/dist/esm/vehicle-lookup.entry.js +129 -0
- package/dist/shift-components/{p-894e7518.entry.js → p-15e82b1a.entry.js} +1 -1
- package/dist/shift-components/p-1a727cfd.entry.js +5 -0
- package/dist/shift-components/p-2bb4415e.entry.js +5 -0
- package/dist/shift-components/p-3f3b41b4.entry.js +5 -0
- package/dist/shift-components/{p-8e818568.entry.js → p-4c3f2850.entry.js} +1 -1
- package/dist/shift-components/p-4ca95c3d.entry.js +5 -0
- package/dist/shift-components/p-65939a2f.js +5 -0
- package/dist/shift-components/p-8b198a04.entry.js +5 -0
- package/dist/shift-components/p-d577db71.entry.js +5 -0
- package/dist/shift-components/p-f37b60d5.js +6 -0
- package/dist/shift-components/shift-components.esm.js +1 -1
- package/dist/types/components/vehicle-lookup/vehicle-lookup.d.ts +23 -0
- package/dist/types/components.d.ts +37 -0
- package/dist/types/global/lib/validate-vin.d.ts +1 -0
- package/package.json +1 -1
- package/readme.md +2 -91
- package/dist/cjs/Loading-ee1a2ceb.js +0 -16
- package/dist/cjs/dynamic-claim.cjs.entry.js +0 -306
- package/dist/cjs/image-expansion-a9c9c6f7.js +0 -77
- package/dist/cjs/paint-thickness.cjs.entry.js +0 -118
- package/dist/cjs/service-history.cjs.entry.js +0 -103
- package/dist/cjs/vehicle-accessories.cjs.entry.js +0 -122
- package/dist/cjs/vehicle-specification.cjs.entry.js +0 -98
- package/dist/cjs/vehicleInformation-35c470fc.js +0 -52
- package/dist/cjs/warranty-details.cjs.entry.js +0 -257
- package/dist/components/p-4dc47f5f.js +0 -5
- package/dist/components/p-8375923d.js +0 -5
- package/dist/components/p-a454210b.js +0 -5
- package/dist/esm/Loading-61648252.js +0 -14
- package/dist/esm/dynamic-claim.entry.js +0 -302
- package/dist/esm/image-expansion-08c4bf0d.js +0 -73
- package/dist/esm/paint-thickness.entry.js +0 -114
- package/dist/esm/service-history.entry.js +0 -99
- package/dist/esm/vehicle-accessories.entry.js +0 -118
- package/dist/esm/vehicle-specification.entry.js +0 -94
- package/dist/esm/vehicleInformation-f7290628.js +0 -50
- package/dist/esm/warranty-details.entry.js +0 -253
- package/dist/shift-components/p-65e6ab8e.js +0 -5
- package/dist/shift-components/p-6b21ce2d.entry.js +0 -5
- package/dist/shift-components/p-7d85e912.entry.js +0 -5
- package/dist/shift-components/p-7f258017.entry.js +0 -5
- package/dist/shift-components/p-9653e992.entry.js +0 -5
- package/dist/shift-components/p-a21e2e2e.js +0 -5
- package/dist/shift-components/p-c4fad245.js +0 -5
- package/dist/shift-components/p-ca1e2e5b.entry.js +0 -5
- package/dist/shift-components/p-d1b9cd93.entry.js +0 -5
- package/dist/shift-components/p-d5ff7544.js +0 -5
- package/dist/shift-components/p-d6f40c8d.entry.js +0 -5
- package/dist/shift-components/p-e05acce1.entry.js +0 -5
- package/dist/shift-components/p-e97316d2.js +0 -6
- package/dist/shift-components/p-faa8070a.entry.js +0 -5
- package/dist/shift-components/p-feb3df85.entry.js +0 -5
package/readme.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<img src="./
|
|
1
|
+
<img src="./documentation/shift-software.png" alt="By Shift software" style="max-width: 333px;">
|
|
2
2
|
|
|
3
3
|
<br>
|
|
4
4
|
<br>
|
|
@@ -12,93 +12,4 @@ The **ADP Web Components** project provides reusable web components designed to
|
|
|
12
12
|
|
|
13
13
|
<br>
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
- [Stand Alone Installation (Lazy loading) (Recommended)](#stand-alone-installation)
|
|
18
|
-
- [Bundle Installation](#bundle-installation)
|
|
19
|
-
- [Components List](#components-list)
|
|
20
|
-
|
|
21
|
-
## Stand Alone Installation
|
|
22
|
-
|
|
23
|
-
<div style="border: 1px solid red;border-radius:5px; padding: 10px;font-size: 18px;">
|
|
24
|
-
<b style="color:red;">⚠️ Important:</b> You must use the <b>document.addEventListener('DOMContentLoaded',()=>{})</b> event listener when using standalone components. Because stand alone importing are <b>lazy loaded</b>
|
|
25
|
-
</div>
|
|
26
|
-
|
|
27
|
-
<br>
|
|
28
|
-
|
|
29
|
-
```javascript
|
|
30
|
-
document.addEventListener('DOMContentLoaded', () => {});
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
always up-to-date version:
|
|
34
|
-
|
|
35
|
-
```html
|
|
36
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/adp-web-components@latest/dist/components/dynamic-claim.js"></script>
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
current version version:
|
|
40
|
-
|
|
41
|
-
```html
|
|
42
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/adp-web-components@0.0.6/dist/components/dynamic-claim.js"></script>
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
This will give you access to single component which you imported from the ADP Web Components library.
|
|
46
|
-
|
|
47
|
-
#### Example Usage
|
|
48
|
-
|
|
49
|
-
Full Code [here](./docs/stand-alone-example.html)
|
|
50
|
-
|
|
51
|
-
```html
|
|
52
|
-
<dynamic-claim is-dev="true" base-url="http://localhost:7174/api/secure-vehicle-lookup-test/" id="dynamic-claim"></dynamic-claim>
|
|
53
|
-
|
|
54
|
-
<script>
|
|
55
|
-
document.addEventListener('DOMContentLoaded', () => {
|
|
56
|
-
const dynamicClaim = document.getElementById('dynamic-claim');
|
|
57
|
-
|
|
58
|
-
...
|
|
59
|
-
});
|
|
60
|
-
</script>
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
## Bundle Installation
|
|
64
|
-
|
|
65
|
-
To use the entire component bundle, include the following script in your HTML:
|
|
66
|
-
|
|
67
|
-
always up-to-date version:
|
|
68
|
-
|
|
69
|
-
```html
|
|
70
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/adp-web-components@latest/dist/shift-components/shift-components.esm.js"></script>
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
current version version:
|
|
74
|
-
|
|
75
|
-
```html
|
|
76
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/adp-web-components@0.0.6/dist/shift-components/shift-components.esm.js"></script>
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
This will give you access to all components in the ADP Web Components library.
|
|
80
|
-
|
|
81
|
-
#### Example Usage
|
|
82
|
-
|
|
83
|
-
Full Code [here](./docs/bundle-example.html)
|
|
84
|
-
|
|
85
|
-
```html
|
|
86
|
-
<dynamic-redeem id="dynamic-redeem"></dynamic-redeem>
|
|
87
|
-
<dynamic-claim is-dev="true" base-url="http://localhost:7174/api/secure-vehicle-lookup-test/" id="dynamic-claim"></dynamic-claim>
|
|
88
|
-
|
|
89
|
-
<script>
|
|
90
|
-
const dynamicClaim = document.getElementById('dynamic-claim');
|
|
91
|
-
const dynamicRedeem = document.getElementById('dynamic-redeem');
|
|
92
|
-
|
|
93
|
-
...
|
|
94
|
-
</script>
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
## Components List
|
|
98
|
-
|
|
99
|
-
This is the complete list of the components with their documentation:
|
|
100
|
-
|
|
101
|
-
- [Dynamic Claim](./src/components/dynamic-claim/readme.md)
|
|
102
|
-
- [Dynamic Redeem](./src/components/dynamic-redeem/readme.md)
|
|
103
|
-
|
|
104
|
-
_Built by [Shift Software](https://shift.software/)_
|
|
15
|
+
Full documentation is available at ./documentation and can be served using [MKDocs tool](https://www.mkdocs.org/).
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* Built by ShiftSoftware
|
|
3
|
-
* Copyright (c)
|
|
4
|
-
*/
|
|
5
|
-
'use strict';
|
|
6
|
-
|
|
7
|
-
const index = require('./index-d4b5214c.js');
|
|
8
|
-
const loader = require('./loader-baf2418b.js');
|
|
9
|
-
const cn = require('./cn-f559f9e5.js');
|
|
10
|
-
|
|
11
|
-
function Loading({ isLoading }) {
|
|
12
|
-
return (index.h("div", { class: cn.cn('size-full transition-all z-50 duration-100 flex items-center justify-center pointer-events-none absolute ', { 'opacity-0': !isLoading }) },
|
|
13
|
-
index.h("img", { class: "animate-spin-2s size-[40px]", src: loader.loaderSvg })));
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
exports.Loading = Loading;
|
|
@@ -1,306 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* Built by ShiftSoftware
|
|
3
|
-
* Copyright (c)
|
|
4
|
-
*/
|
|
5
|
-
'use strict';
|
|
6
|
-
|
|
7
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
8
|
-
|
|
9
|
-
const index = require('./index-d4b5214c.js');
|
|
10
|
-
const cn = require('./cn-f559f9e5.js');
|
|
11
|
-
const vehicleInformation = require('./vehicleInformation-35c470fc.js');
|
|
12
|
-
|
|
13
|
-
const expiredSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzBweCIgaGVpZ2h0PSIzMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8ZyBzdHJva2Utd2lkdGg9IjAiIC8+CiAgICA8ZyBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIC8+CiAgICA8Zz4KICAgICAgICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4IiBmaWxsLW9wYWNpdHk9IjAuMjQiIGZpbGw9ImJsYWNrIiBzdHJva2U9ImJsYWNrIiAvPgogICAgICAgIDxwYXRoIGQ9Ik0xNiAxNkw4IDgiIHN0cm9rZS13aWR0aD0iMS4yIiBzdHJva2U9ImJsYWNrIiAvPgogICAgICAgIDxwYXRoIGQ9Ik0xNiA4TDggMTYiIHN0cm9rZS13aWR0aD0iMS4yIiBzdHJva2U9ImJsYWNrIiAvPgogICAgPC9nPgo8L3N2Zz4=';
|
|
14
|
-
|
|
15
|
-
const pendingSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzBweCIgaGVpZ2h0PSIzMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8ZyBzdHJva2Utd2lkdGg9IjAiIC8+CiAgICA8ZyBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIC8+CiAgICA8Zz4KICAgICAgICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4IiBmaWxsLW9wYWNpdHk9IjAuMjQiIGZpbGw9IiNhMWExYTEiIHN0cm9rZT0iI2ExYTFhMSIgLz4KICAgICAgICA8cmVjdCB4PSI5LjUiIHk9IjgiIHdpZHRoPSIyIiBoZWlnaHQ9IjgiIGZpbGw9IiNhMWExYTEiIC8+CiAgICAgICAgPHJlY3QgeD0iMTIuNSIgeT0iOCIgd2lkdGg9IjIiIGhlaWdodD0iOCIgZmlsbD0iI2ExYTFhMSIgLz4KICAgIDwvZz4KPC9zdmc+';
|
|
16
|
-
|
|
17
|
-
const cancelledSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzBweCIgaGVpZ2h0PSIzMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8ZyBzdHJva2Utd2lkdGg9IjAiIC8+CiAgICA8ZyBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIC8+CiAgICA8Zz4KICAgICAgICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4IiBmaWxsLW9wYWNpdHk9IjAuMjQiIGZpbGw9IiNhODAwMDAiIHN0cm9rZT0iI2E4MDAwMCIgLz4KICAgICAgICA8cGF0aCBkPSJNMTggMThMNiA2IiBzdHJva2Utd2lkdGg9IjEuMiIgc3Ryb2tlPSIjYTgwMDAwIiAvPgogICAgPC9nPgo8L3N2Zz4=';
|
|
18
|
-
|
|
19
|
-
const processedSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzBweCIgaGVpZ2h0PSIzMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8ZyBzdHJva2Utd2lkdGg9IjAiIC8+CiAgICA8ZyBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIC8+CiAgICA8Zz4KICAgICAgICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4IiBmaWxsLW9wYWNpdHk9IjAuMjQiIGZpbGw9IiMzMDcxYTkiIHN0cm9rZT0iIzMwNzFhOSIgLz4KICAgICAgICA8cGF0aCBkPSJNOC41IDExTDExLjM5MzkgMTMuODkzOUMxMS40NTI1IDEzLjk1MjUgMTEuNTQ3NSAxMy45NTI1IDExLjYwNjEgMTMuODkzOUwxOS41IDYiIHN0cm9rZT0iIzMwNzFhOSIKICAgICAgICAgICAgc3Ryb2tlLXdpZHRoPSIxLjIiIC8+CiAgICA8L2c+Cjwvc3ZnPg==';
|
|
20
|
-
|
|
21
|
-
const dynamicClaimCss = "*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}/*! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.collapse{visibility:collapse}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.block{display:block}.flex{display:flex}.table{display:table}.hidden{display:none}.flex-shrink{flex-shrink:1}.border-collapse{border-collapse:collapse}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.border{border-width:1px}.outline{outline-style:solid}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}:host{all:initial!important;display:block;flex:1 1 0!important;flex-shrink:0!important;width:100%!important}*{box-sizing:content-box;font-family:Arial;margin:revert;padding:revert}.dynamic-claim-wrapper{background:#fdfdfd;border:1px solid #dcdcdc;border-radius:5px;box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 hsla(0,0%,100%,.1);overflow:hidden;padding:0;position:relative}.dynamic-claim-header{background:#f6f6f6;border:1px solid #ededed;padding:15px 0;text-align:center}.dynamic-claim-header-vin{display:inline-block;transition:.4s}.idle .dynamic-claim-header-vin,.loading .dynamic-claim-header-vin{opacity:0;transform:scale(150%);visibility:hidden}.dynamic-claim-body{display:flex;overflow-x:scroll;padding:100px 30px;transition:scrollbar-color .5s ease}.idle .dynamic-claim-body,.loading .dynamic-claim-body{pointer-events:none}.dynamic-claim-wrapper ::-webkit-scrollbar{height:10px;width:10px}.dynamic-claim-wrapper ::-webkit-scrollbar-track{background:#f6f6f6;border-radius:5px;border-top:1px solid #dcdcdc;border-top-left-radius:0;border-top-right-radius:0}.idle .dynamic-claim-body::-webkit-scrollbar-thumb,.loading .dynamic-claim-body::-webkit-scrollbar-thumb{background:transparent}.dynamic-claim-wrapper ::-webkit-scrollbar-thumb{background:#c5c5c5;border-radius:10px}.dynamic-claim-wrapper ::-webkit-scrollbar-thumb:hover{background:#a1a1a1}.dynamic-claim-progress-lane,.loading-lane{align-items:center;background-color:#f2f2f2;border:1px solid #ddd;border-radius:10px;display:flex;flex:1;flex-direction:row;height:10px;justify-content:space-around;position:relative}.idle .dynamic-claim-progress-lane,.loading .dynamic-claim-progress-lane{background-color:transparent;border:1px solid transparent}.loading-lane{position:absolute;visibility:hidden;width:calc(100% - 60px)}.loading .loading-lane{visibility:visible}.dynamic-claim-progress-bar{background-image:linear-gradient(180deg,#428bca,#3071a9);border:1px solid #ddd;border-radius:10px;height:10px;left:0;position:absolute;transition:all;transition-duration:.5s;transition-timing-function:ease-in-out;width:0;z-index:0}.idle .dynamic-claim-progress-bar,.loading .dynamic-claim-progress-bar{opacity:0;width:0!important}.dynamic-claim-item{align-items:center;display:flex;flex-direction:column;font-size:14px;gap:5px;min-width:250px}.popup-position-ref{bottom:0;display:flex;height:0;justify-content:center;position:absolute;width:0}.popup-container{position:fixed;z-index:100}.dynamic-claim-item-popup-info{background-color:#f9f9f9;border:1px solid #ddd;border-radius:5px;color:#282828;opacity:0;padding:20px;transition:.4s;visibility:hidden;width:auto}.dynamic-claim-item-popup-info-triangle.show,.dynamic-claim-item-popup-info.show{opacity:1;visibility:visible}.dynamic-claim-item-popup-info table{border-collapse:collapse;width:100%}.dynamic-claim-item-popup-info table td,.dynamic-claim-item-popup-info table th{border-bottom:1px solid #ddd;padding:10px 50px 10px 10px;text-align:left;white-space:nowrap}.dynamic-claim-item-popup-info table td{font-weight:400}.dynamic-claim-item-popup-info .claim-button{justify-content:center;margin:15px auto auto;width:80%}.dynamic-claim-item-popup-info-triangle{display:flex;justify-content:center;opacity:0;position:relative;transform:translateY(-9px);transition:.4s;visibility:hidden;width:100%;z-index:101}.dynamic-claim-item-popup-info-triangle-up{border-bottom:10px solid #ddd}.dynamic-claim-item-popup-info-triangle-up,.dynamic-claim-item-popup-info-triangle-up2{border-left:10px solid transparent;border-right:10px solid transparent;height:0;position:absolute;width:0}.dynamic-claim-item-popup-info-triangle-up2{border-bottom:10px solid #f9f9f9;margin-top:1px}.dynamic-claim-item-header{align-items:center;cursor:pointer;display:flex;flex-direction:column;height:3em;line-height:1em;padding:10px 0;position:relative;transition:.4s}.dynamic-claim-item-header.load-animation{animation:item-header-fade-in .65s ease forwards}@keyframes item-header-fade-in{0%{opacity:0;transform:translateY(-5px) scale(70%)}to{opacity:1;transform:translateY(0) scale(100%)}}.dynamic-claim-item-header span{font-weight:700}.dynamic-claim-item-header img{transition:.4s}.dynamic-claim-item-header:hover>img{transform:rotate(1turn) scale(125%)}.idle .dynamic-claim-item-header,.loading .dynamic-claim-item-header{opacity:0;transform:translateY(-5px) scale(70%)}.dynamic-claim-item-footer{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;height:4.5em;line-height:1.5em;margin:0;overflow:hidden;padding:0 20px;text-align:center;text-overflow:ellipsis;transition:.4s}.dynamic-claim-item-footer.load-animation{animation:item-footer-fade-in .65s ease forwards}@keyframes item-footer-fade-in{0%{opacity:0;transform:translateY(5px) scale(70%);visibility:hidden}to{opacity:1;transform:translateY(0) scale(100%);visibility:visible}}.idle .dynamic-claim-item-footer,.loading .dynamic-claim-item-footer{opacity:0;transform:translateY(5px) scale(70%);visibility:hidden}.dynamic-claim-item-circle{background-color:#a1a1a1;border:5px double #ececec;border-radius:50%;height:18px;transition:.4s;width:18px;z-index:1}.dynamic-claim-item-circle.load-animation{animation:item-circle-fade-in .65s ease forwards}@keyframes item-circle-fade-in{0%{opacity:0;transform:scale(150%);visibility:hidden}to{opacity:1;transform:scale(100%);visibility:visible}}.idle .dynamic-claim-item-circle,.loading .dynamic-claim-item-circle{opacity:0;transform:scale(150%);visibility:hidden}.dynamic-claim-item.processed .dynamic-claim-item-circle{background-color:#3071a9}.dynamic-claim-item.processed .dynamic-claim-item-header{color:#3071a9}.dynamic-claim-item.expired .dynamic-claim-item-circle{background-color:#282828}.dynamic-claim-item.expired .dynamic-claim-item-headaer{color:#282828}.dynamic-claim-item.cancelled .dynamic-claim-item-circle{background-color:#a80000}.dynamic-claim-item.cancelled .dynamic-claim-item-header{color:#a80000}.dynamic-claim-item.pending .dynamic-claim-item-circle{background-color:#00a300}.dynamic-claim-item.pending .dynamic-claim-item-header{color:#00a300}.dynamic-claim-loading-slider{border-radius:4px;height:10px;left:0;overflow-x:hidden;position:relative;position:absolute;top:0;width:100%}.dynamic-claim-loading-slider-line{background:#ddd;height:10px;opacity:0;position:absolute;width:150%}.dynamic-claim-loading-slider-subline{background-image:linear-gradient(180deg,#428bca,#3071a9);height:10px;position:absolute}.dynamic-claim-wrapper.loading .dynamic-claim-inc{animation:dynamic-claim-increase 2.5s ease infinite}.dynamic-claim-wrapper.loading .dynamic-claim-dec{animation:dynamic-claim-decrease 2.5s ease 1s infinite}@keyframes dynamic-claim-increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes dynamic-claim-decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}.dynamic-claim-button{align-items:center;border:none;border-radius:5px;color:#fff;cursor:pointer;display:flex;font-weight:700;gap:3px;outline:none;padding:0 10px 0 0;transition:.3s}.dynamic-claim-button svg{transition:.2s}.claim-button{stroke:#27ae60;fill:#27ae60;background-color:transparent;border:1px solid #27ae60;color:#27ae60}.claim-button circle{fill:#2ecc71}.claim-button:hover{stroke:#fff;fill:#fff;background-color:#2ecc71;color:#fff}.claim-button:hover circle{fill:#fff}.claim-button:active{background-color:#27ae60}.claim-button:active svg{transform:scale(125%)}.cancel-button{stroke:#c0392b;fill:#c0392b;background-color:transparent;border:1px solid #c0392b;color:#c0392b}.cancel-button circle{fill:#c0392b;transition:.1s}.cancel-button:hover{stroke:#fff;fill:#fff;background-color:#e74c3c;color:#fff}.cancel-button:hover circle{fill:#fff}.static{position:static}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.m-\\[3px\\]{margin:3px}.my-4{margin-bottom:1rem;margin-top:1rem}.ml-1{margin-left:.25rem}.border-separate{border-collapse:separate}.list-disc{list-style-type:disc}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:.25rem}.pl-10{padding-left:2.5rem}";
|
|
22
|
-
const DynamicClaimStyle0 = dynamicClaimCss;
|
|
23
|
-
|
|
24
|
-
let mockData = {};
|
|
25
|
-
const icons = {
|
|
26
|
-
expired: expiredSvg,
|
|
27
|
-
pending: pendingSvg,
|
|
28
|
-
processed: processedSvg,
|
|
29
|
-
cancelled: cancelledSvg,
|
|
30
|
-
};
|
|
31
|
-
const DynamicClaim = class {
|
|
32
|
-
constructor(hostRef) {
|
|
33
|
-
index.registerInstance(this, hostRef);
|
|
34
|
-
this.pendingItemHighlighted = false;
|
|
35
|
-
this.onMouseLeave = () => {
|
|
36
|
-
clearTimeout(this.timeoutRef);
|
|
37
|
-
this.popupClasses = '';
|
|
38
|
-
this.timeoutRef = setTimeout(() => {
|
|
39
|
-
this.activePopupIndex = null;
|
|
40
|
-
}, 400);
|
|
41
|
-
};
|
|
42
|
-
this.onMouseEnter = (dynamicClaimItemHeader, idx) => {
|
|
43
|
-
clearTimeout(this.timeoutRef);
|
|
44
|
-
this.activePopupIndex = idx;
|
|
45
|
-
this.timeoutRef = setTimeout(() => {
|
|
46
|
-
const positionRef = dynamicClaimItemHeader.querySelector('.popup-position-ref');
|
|
47
|
-
this.popupPositionRef = positionRef;
|
|
48
|
-
this.calculatePopupPos(this.el.shadowRoot);
|
|
49
|
-
this.popupClasses = 'show';
|
|
50
|
-
}, 50);
|
|
51
|
-
};
|
|
52
|
-
this.baseUrl = undefined;
|
|
53
|
-
this.isDev = false;
|
|
54
|
-
this.queryString = '';
|
|
55
|
-
this.isIdle = true;
|
|
56
|
-
this.popupClasses = '';
|
|
57
|
-
this.externalVin = null;
|
|
58
|
-
this.activePopupIndex = null;
|
|
59
|
-
this.vehicleInformation = undefined;
|
|
60
|
-
this.errorMessage = null;
|
|
61
|
-
this.isLoading = false;
|
|
62
|
-
this.loadingStateChange = undefined;
|
|
63
|
-
this.loadedResponse = undefined;
|
|
64
|
-
}
|
|
65
|
-
async componentDidLoad() {
|
|
66
|
-
this.dynamicClaimBody = this.el.shadowRoot.querySelector('.dynamic-claim-body');
|
|
67
|
-
this.dynamicRedeem = this.el.shadowRoot.getElementById('dynamic-redeem');
|
|
68
|
-
this.dynamicClaimProgressBar = this.el.shadowRoot.querySelector('.dynamic-claim-progress-bar');
|
|
69
|
-
}
|
|
70
|
-
async setMockData(newMockData) {
|
|
71
|
-
mockData = newMockData;
|
|
72
|
-
}
|
|
73
|
-
async setData(newData, headers = {}) {
|
|
74
|
-
clearTimeout(this.networkTimeoutRef);
|
|
75
|
-
if (this.abortController)
|
|
76
|
-
this.abortController.abort();
|
|
77
|
-
this.abortController = new AbortController();
|
|
78
|
-
let scopedTimeoutRef;
|
|
79
|
-
const isVinRequest = typeof newData === 'string';
|
|
80
|
-
const vin = isVinRequest ? newData : newData === null || newData === void 0 ? void 0 : newData.vin;
|
|
81
|
-
this.externalVin = vin;
|
|
82
|
-
try {
|
|
83
|
-
if (!vin || vin.trim().length === 0) {
|
|
84
|
-
this.isIdle = true;
|
|
85
|
-
return;
|
|
86
|
-
}
|
|
87
|
-
this.isLoading = true;
|
|
88
|
-
this.isIdle = false;
|
|
89
|
-
await new Promise(r => {
|
|
90
|
-
scopedTimeoutRef = setTimeout(r, 1000);
|
|
91
|
-
this.networkTimeoutRef = scopedTimeoutRef;
|
|
92
|
-
});
|
|
93
|
-
const vehicleResponse = isVinRequest ? await vehicleInformation.getVehicleInformation(this, { scopedTimeoutRef, vin, mockData }, headers) : newData;
|
|
94
|
-
if (this.networkTimeoutRef === scopedTimeoutRef) {
|
|
95
|
-
if (!vehicleResponse)
|
|
96
|
-
throw new Error('Wrong response format');
|
|
97
|
-
if (!Array.isArray(vehicleResponse.serviceItems))
|
|
98
|
-
throw new Error('No Service Available');
|
|
99
|
-
this.vehicleInformation = vehicleResponse;
|
|
100
|
-
}
|
|
101
|
-
this.errorMessage = null;
|
|
102
|
-
this.isLoading = false;
|
|
103
|
-
}
|
|
104
|
-
catch (error) {
|
|
105
|
-
if (error && (error === null || error === void 0 ? void 0 : error.name) === 'AbortError')
|
|
106
|
-
return;
|
|
107
|
-
this.isLoading = false;
|
|
108
|
-
this.vehicleInformation = null;
|
|
109
|
-
this.errorMessage = error.message;
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
async fetchData(requestedVin = this.externalVin, headers = {}) {
|
|
113
|
-
await this.setData(requestedVin, headers);
|
|
114
|
-
}
|
|
115
|
-
onLoadingChange(newValue) {
|
|
116
|
-
if (this.loadingStateChange)
|
|
117
|
-
this.loadingStateChange(newValue);
|
|
118
|
-
this.setLoadingUi(newValue);
|
|
119
|
-
}
|
|
120
|
-
async setLoadingUi(isLoading) {
|
|
121
|
-
if (!isLoading) {
|
|
122
|
-
this.dynamicClaimProgressBar.style.width = '0';
|
|
123
|
-
await new Promise(r => setTimeout(r, 200));
|
|
124
|
-
this.updateProgressBar();
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
updateProgressBar() {
|
|
128
|
-
var _a;
|
|
129
|
-
const serviceItems = ((_a = this.vehicleInformation) === null || _a === void 0 ? void 0 : _a.serviceItems) || [];
|
|
130
|
-
if (serviceItems.filter(x => x.status === 'pending').length === 0) {
|
|
131
|
-
if (serviceItems.length === 0)
|
|
132
|
-
this.dynamicClaimProgressBar.style.width = '0%';
|
|
133
|
-
else
|
|
134
|
-
this.dynamicClaimProgressBar.style.width = '100%';
|
|
135
|
-
this.dynamicClaimBody.scrollTo({
|
|
136
|
-
left: this.dynamicClaimBody.scrollWidth,
|
|
137
|
-
behavior: 'smooth',
|
|
138
|
-
});
|
|
139
|
-
}
|
|
140
|
-
else {
|
|
141
|
-
const firstPendingItem = serviceItems.find(x => x.status === 'pending');
|
|
142
|
-
const firstPendingItemIndex = serviceItems.indexOf(firstPendingItem) + 1;
|
|
143
|
-
const firstPendingItemRef = this.dynamicClaimBody.getElementsByClassName('dynamic-claim-item')[firstPendingItemIndex - 1];
|
|
144
|
-
this.dynamicClaimProgressBar.style.width = (firstPendingItemIndex / serviceItems.length - 1 / (serviceItems.length * 2)) * 100 + '%';
|
|
145
|
-
this.dynamicClaimBody.scrollTo({
|
|
146
|
-
left: firstPendingItemRef.offsetLeft - firstPendingItemRef.clientWidth * 3,
|
|
147
|
-
behavior: 'smooth',
|
|
148
|
-
});
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
resetProgressBar() {
|
|
152
|
-
setTimeout(() => {
|
|
153
|
-
this.updateProgressBar();
|
|
154
|
-
}, 100);
|
|
155
|
-
}
|
|
156
|
-
windowScrollListener(newValue) {
|
|
157
|
-
if (newValue) {
|
|
158
|
-
this.scrollListenerRef = () => this.calculatePopupPos(this.el.shadowRoot);
|
|
159
|
-
window.addEventListener('scroll', this.scrollListenerRef);
|
|
160
|
-
this.dynamicClaimBody.addEventListener('scroll', this.scrollListenerRef);
|
|
161
|
-
}
|
|
162
|
-
else {
|
|
163
|
-
window.removeEventListener('scroll', this.scrollListenerRef);
|
|
164
|
-
this.dynamicClaimBody.removeEventListener('scroll', this.scrollListenerRef);
|
|
165
|
-
}
|
|
166
|
-
}
|
|
167
|
-
calculatePopupPos(root) {
|
|
168
|
-
const popupPositionRef = root.querySelector('.popup-position-ref');
|
|
169
|
-
let { x, y } = popupPositionRef.getBoundingClientRect();
|
|
170
|
-
const popupContainer = popupPositionRef.querySelector('.popup-container');
|
|
171
|
-
const { width } = popupContainer.getBoundingClientRect();
|
|
172
|
-
const popupInfo = popupContainer.querySelector('.dynamic-claim-item-popup-info');
|
|
173
|
-
const windowWidth = window.innerWidth; // Get the viewport's width
|
|
174
|
-
popupContainer.style.top = `${y}px`;
|
|
175
|
-
popupContainer.style.left = `${x - width / 2}px`;
|
|
176
|
-
const offsetFromLeft = x - width / 2; // Distance from left side of the viewport
|
|
177
|
-
const offsetFromRight = windowWidth - (x + width / 2); // Distance from right side of the viewport
|
|
178
|
-
let movingNeeded = 0;
|
|
179
|
-
let horizontalMargin = 16;
|
|
180
|
-
if (offsetFromRight < horizontalMargin)
|
|
181
|
-
movingNeeded = offsetFromRight - horizontalMargin;
|
|
182
|
-
else if (offsetFromLeft < horizontalMargin)
|
|
183
|
-
movingNeeded = Math.abs(offsetFromLeft - horizontalMargin);
|
|
184
|
-
popupInfo.style.transform = `translateX(${movingNeeded}px)`;
|
|
185
|
-
}
|
|
186
|
-
removeLoadAnimationClass(event) {
|
|
187
|
-
const component = event.target;
|
|
188
|
-
component.classList.remove('load-animation');
|
|
189
|
-
}
|
|
190
|
-
async completeClaim() {
|
|
191
|
-
var _a;
|
|
192
|
-
const serviceItems = ((_a = this.vehicleInformation) === null || _a === void 0 ? void 0 : _a.serviceItems) || [];
|
|
193
|
-
const item = this.cachedClaimItem;
|
|
194
|
-
const serviceDataClone = JSON.parse(JSON.stringify(serviceItems));
|
|
195
|
-
const index = serviceItems.indexOf(item);
|
|
196
|
-
const pendingItemsBefore = serviceDataClone.slice(0, index).filter(x => x.status === 'pending');
|
|
197
|
-
serviceDataClone[index].status = 'processed';
|
|
198
|
-
pendingItemsBefore.forEach(function (otherItem) {
|
|
199
|
-
otherItem.status = 'cancelled';
|
|
200
|
-
});
|
|
201
|
-
this.pendingItemHighlighted = false;
|
|
202
|
-
const vehicleDataClone = JSON.parse(JSON.stringify(this.vehicleInformation));
|
|
203
|
-
vehicleDataClone.serviceItems = serviceDataClone;
|
|
204
|
-
this.vehicleInformation = JSON.parse(JSON.stringify(vehicleDataClone));
|
|
205
|
-
}
|
|
206
|
-
claim(item) {
|
|
207
|
-
var _a;
|
|
208
|
-
const serviceItems = ((_a = this.vehicleInformation) === null || _a === void 0 ? void 0 : _a.serviceItems) || [];
|
|
209
|
-
const vinDataClone = JSON.parse(JSON.stringify(serviceItems));
|
|
210
|
-
const index = serviceItems.indexOf(item);
|
|
211
|
-
//Find other items before this item that have status 'pending'
|
|
212
|
-
let pendingItemsBefore = vinDataClone.slice(0, index).filter(x => x.status === 'pending');
|
|
213
|
-
this.cachedClaimItem = item;
|
|
214
|
-
if (item.maximumMileage === null) {
|
|
215
|
-
pendingItemsBefore = [];
|
|
216
|
-
}
|
|
217
|
-
this.onMouseLeave();
|
|
218
|
-
this.openRedeem(item, pendingItemsBefore);
|
|
219
|
-
}
|
|
220
|
-
async handleRedeemScanner() {
|
|
221
|
-
if (this.isDev) {
|
|
222
|
-
this.dynamicRedeem.handleScanner = async (_) => {
|
|
223
|
-
await new Promise(r => setTimeout(r, 500));
|
|
224
|
-
this.dynamicRedeem.quite();
|
|
225
|
-
this.completeClaim();
|
|
226
|
-
this.dynamicRedeem.handleScanner = null;
|
|
227
|
-
};
|
|
228
|
-
}
|
|
229
|
-
else {
|
|
230
|
-
this.dynamicRedeem.handleScanner = async (code) => {
|
|
231
|
-
try {
|
|
232
|
-
const vehicleInformation = this.vehicleInformation;
|
|
233
|
-
const payload = {
|
|
234
|
-
vin: vehicleInformation.vin,
|
|
235
|
-
brandIntegrationID: vehicleInformation.identifiers.brandIntegrationID,
|
|
236
|
-
invoice: code,
|
|
237
|
-
saleInformation: vehicleInformation.saleInformation,
|
|
238
|
-
serviceItem: this.dynamicRedeem.item,
|
|
239
|
-
cancelledServiceItems: this.dynamicRedeem.canceledItems,
|
|
240
|
-
};
|
|
241
|
-
const response = await fetch('/api/vehicle/swift-claim', {
|
|
242
|
-
method: 'POST',
|
|
243
|
-
headers: {
|
|
244
|
-
'Content-Type': 'application/json',
|
|
245
|
-
},
|
|
246
|
-
body: JSON.stringify(payload),
|
|
247
|
-
});
|
|
248
|
-
const data = await response.json();
|
|
249
|
-
if (!data.Success) {
|
|
250
|
-
alert(data.Message);
|
|
251
|
-
this.dynamicRedeem.quite();
|
|
252
|
-
this.dynamicRedeem.handleScanner = null;
|
|
253
|
-
return;
|
|
254
|
-
}
|
|
255
|
-
this.dynamicRedeem.quite();
|
|
256
|
-
this.completeClaim();
|
|
257
|
-
this.dynamicRedeem.handleScanner = null;
|
|
258
|
-
}
|
|
259
|
-
catch (error) {
|
|
260
|
-
console.error(error);
|
|
261
|
-
alert('Request failed please try again later');
|
|
262
|
-
this.dynamicRedeem.quite();
|
|
263
|
-
this.dynamicRedeem.handleScanner = null;
|
|
264
|
-
}
|
|
265
|
-
};
|
|
266
|
-
}
|
|
267
|
-
}
|
|
268
|
-
openRedeem(item, oldItems) {
|
|
269
|
-
var _a, _b, _c, _d, _e;
|
|
270
|
-
const vehicleInformation = this.vehicleInformation;
|
|
271
|
-
this.dynamicRedeem.vin = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.vin;
|
|
272
|
-
this.dynamicRedeem.item = item;
|
|
273
|
-
this.dynamicRedeem.canceledItems = oldItems;
|
|
274
|
-
if (((_a = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.saleInformation) === null || _a === void 0 ? void 0 : _a.broker) !== null && ((_c = (_b = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.saleInformation) === null || _b === void 0 ? void 0 : _b.broker) === null || _c === void 0 ? void 0 : _c.invoiceDate) === null)
|
|
275
|
-
this.dynamicRedeem.unInvoicedByBrokerName = (_e = (_d = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.saleInformation) === null || _d === void 0 ? void 0 : _d.broker) === null || _e === void 0 ? void 0 : _e.brokerName;
|
|
276
|
-
else
|
|
277
|
-
this.dynamicRedeem.unInvoicedByBrokerName = null;
|
|
278
|
-
this.handleRedeemScanner();
|
|
279
|
-
}
|
|
280
|
-
createPopup(item) {
|
|
281
|
-
return (index.h("div", { class: "popup-position-ref" }, index.h("div", { class: "popup-container" }, index.h("div", { class: cn.cn('dynamic-claim-item-popup-info-triangle', this.popupClasses) }, index.h("div", { class: "dynamic-claim-item-popup-info-triangle-up" }), index.h("div", { class: "dynamic-claim-item-popup-info-triangle-up2" })), index.h("div", { class: cn.cn('dynamic-claim-item-popup-info', this.popupClasses) }, index.h("table", null, index.h("tbody", null, index.h("tr", null, index.h("th", null, "Service Type:"), index.h("td", null, item.type.charAt(0).toUpperCase() + item.type.slice(1))), index.h("tr", null, index.h("th", null, "Activation Date"), index.h("td", null, item.activatedAt)), index.h("tr", null, index.h("th", null, "Expiry Date"), index.h("td", null, item.expiresAt)), index.h("tr", null, index.h("th", null, "Claimed At"), index.h("td", null, item.redeemDate)), index.h("tr", null, index.h("th", null, "Redeeming Dealer"), index.h("td", null, item.dealerName)), index.h("tr", null, index.h("th", null, "Invoice Number"), index.h("td", null, item.invoiceNumber)), index.h("tr", null, index.h("th", null, "WIP"), index.h("td", null, item.wip)), index.h("tr", null, index.h("th", null, "Menu Code"), index.h("td", null, item.menuCode)))), item.status === 'pending' && (index.h("button", { onClick: () => this.claim(item), class: "dynamic-claim-button claim-button" }, index.h("svg", { width: "30px", height: "30px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { "stroke-width": "0" }), index.h("g", { "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("g", null, index.h("circle", { cx: "12", cy: "12", r: "8", "fill-opacity": "0.24" }), index.h("path", { d: "M8.5 11L11.3939 13.8939C11.4525 13.9525 11.5475 13.9525 11.6061 13.8939L19.5 6", "stroke-width": "1.2" }))), index.h("span", null, "Claim")))))));
|
|
282
|
-
}
|
|
283
|
-
render() {
|
|
284
|
-
var _a, _b;
|
|
285
|
-
const serviceItems = ((_a = this.vehicleInformation) === null || _a === void 0 ? void 0 : _a.serviceItems) || [];
|
|
286
|
-
return (index.h(index.Host, { key: '15b709f7252b85f308c880576dd4f8ff6a7dc666' }, index.h("dynamic-redeem", { key: '71a57f4626d0f394c2293db5bfccaf477c5c3f1e', id: "dynamic-redeem" }), index.h("div", { key: '3e247cedd1e720c89a30af72f8c9758f7a5642fb', class: cn.cn('dynamic-claim-wrapper', { loading: this.isLoading, idle: this.isIdle }) }, index.h("div", { key: 'd6aea716001e09c9ff3180889afc5daca008b130', class: "dynamic-claim-header" }, index.h("strong", { key: 'f9469ece92c4e189eed94a119d233787d78aa8b1', onAnimationEnd: this.removeLoadAnimationClass, class: "dynamic-claim-header-vin load-animation" }, this.errorMessage && index.h("span", { key: 'b132706208c827613e967186ba98a1314d9aaf08', style: { color: 'red' } }, this.errorMessage), !this.errorMessage && ((_b = this.vehicleInformation) === null || _b === void 0 ? void 0 : _b.vin))), index.h("div", { key: '849960f27d5188e3ab088c5de8d0bebc25723829', class: "dynamic-claim-body" }, index.h("div", { key: 'bdbd37aa75a00973008634299d1768dcbe95843f', class: "loading-lane" }, index.h("div", { key: '6a17f141b034edbcd38b86979431c3ff26614d00', class: "dynamic-claim-loading-slider" }, index.h("div", { key: '34597a589f5dab07e60959ba09d39876901f2ee1', class: "dynamic-claim-loading-slider-line" }), index.h("div", { key: '4a2483d4997fff60631cd01302d272665e2d2736', class: "dynamic-claim-loading-slider-subline dynamic-claim-inc" }), index.h("div", { key: 'c05466961bfcfd2580f670c57178492f31729f52', class: "dynamic-claim-loading-slider-subline dynamic-claim-dec" }))), index.h("div", { key: 'ac968ede27ec14df080f8c17758e071cfa272d2d', class: "dynamic-claim-progress-lane" }, serviceItems.map((item, idx) => {
|
|
287
|
-
let statusClass = '';
|
|
288
|
-
if (item.status === 'pending') {
|
|
289
|
-
if (serviceItems.findIndex(i => i.status === 'pending') === idx)
|
|
290
|
-
statusClass = item.status;
|
|
291
|
-
}
|
|
292
|
-
else
|
|
293
|
-
statusClass = item.status;
|
|
294
|
-
return (index.h("div", { key: item.name, class: cn.cn('dynamic-claim-item', statusClass), onMouseLeave: this.onMouseLeave }, index.h("div", { onAnimationEnd: this.removeLoadAnimationClass, class: "dynamic-claim-item-header load-animation", onMouseEnter: event => this.onMouseEnter(event.target, idx) }, index.h("img", { src: icons[item.status], alt: "status icon" }), index.h("span", null, item.status.charAt(0).toUpperCase() + item.status.slice(1)), this.activePopupIndex === idx && this.createPopup(item)), index.h("div", { onAnimationEnd: this.removeLoadAnimationClass, class: "dynamic-claim-item-circle load-animation" }), index.h("p", { onAnimationEnd: this.removeLoadAnimationClass, class: "dynamic-claim-item-footer load-animation" }, item.name)));
|
|
295
|
-
}), index.h("div", { key: '720ee8e73001f6c4304f9e0af8212e37fc69e74a', class: "dynamic-claim-progress-bar" }))))));
|
|
296
|
-
}
|
|
297
|
-
get el() { return index.getElement(this); }
|
|
298
|
-
static get watchers() { return {
|
|
299
|
-
"isLoading": ["onLoadingChange"],
|
|
300
|
-
"vehicleInformation": ["resetProgressBar"],
|
|
301
|
-
"popupClasses": ["windowScrollListener"]
|
|
302
|
-
}; }
|
|
303
|
-
};
|
|
304
|
-
DynamicClaim.style = DynamicClaimStyle0;
|
|
305
|
-
|
|
306
|
-
exports.dynamic_claim = DynamicClaim;
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* Built by ShiftSoftware
|
|
3
|
-
* Copyright (c)
|
|
4
|
-
*/
|
|
5
|
-
'use strict';
|
|
6
|
-
|
|
7
|
-
const eyeSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIgogICAgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWV5ZSI+CiAgICA8cGF0aCBkPSJNMi4wNjIgMTIuMzQ4YTEgMSAwIDAgMSAwLS42OTYgMTAuNzUgMTAuNzUgMCAwIDEgMTkuODc2IDAgMSAxIDAgMCAxIDAgLjY5NiAxMC43NSAxMC43NSAwIDAgMS0xOS44NzYgMCIgLz4KICAgIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiIC8+Cjwvc3ZnPg==';
|
|
8
|
-
|
|
9
|
-
function openImageViewer(context, target, imageSrc) {
|
|
10
|
-
if (context.expandedImage === imageSrc)
|
|
11
|
-
return;
|
|
12
|
-
context.originalImage = target;
|
|
13
|
-
const expandedImageRef = context.el.shadowRoot.getElementById('expanded-image');
|
|
14
|
-
expandedImageRef.src = target.src;
|
|
15
|
-
document.addEventListener('keydown', context.closeImageListener);
|
|
16
|
-
const rect = target.getBoundingClientRect();
|
|
17
|
-
document.body.style.overflow = 'hidden';
|
|
18
|
-
Object.assign(expandedImageRef.style, {
|
|
19
|
-
top: `${rect.top}px`,
|
|
20
|
-
pointerEvents: 'auto',
|
|
21
|
-
left: `${rect.left}px`,
|
|
22
|
-
transitionDuration: '0s',
|
|
23
|
-
width: `${rect.width}px`,
|
|
24
|
-
height: `${rect.height}px`,
|
|
25
|
-
});
|
|
26
|
-
setTimeout(() => {
|
|
27
|
-
const naturalWidth = target.naturalWidth;
|
|
28
|
-
const naturalHeight = target.naturalHeight;
|
|
29
|
-
const maxWidth = window.innerWidth - 160;
|
|
30
|
-
const maxHeight = window.innerHeight - 32;
|
|
31
|
-
const aspectRatio = naturalWidth / naturalHeight;
|
|
32
|
-
let width, height;
|
|
33
|
-
if (maxWidth / aspectRatio <= maxHeight) {
|
|
34
|
-
width = maxWidth;
|
|
35
|
-
height = maxWidth / aspectRatio;
|
|
36
|
-
}
|
|
37
|
-
else {
|
|
38
|
-
height = maxHeight;
|
|
39
|
-
width = maxHeight * aspectRatio;
|
|
40
|
-
}
|
|
41
|
-
expandedImageRef.style.transitionDuration = '0.3s';
|
|
42
|
-
Object.assign(expandedImageRef.style, {
|
|
43
|
-
opacity: '1',
|
|
44
|
-
width: `${width}px`,
|
|
45
|
-
height: `${height}px`,
|
|
46
|
-
top: `${(window.innerHeight - height) / 2}px`,
|
|
47
|
-
left: `${(window.innerWidth - width) / 2}px`,
|
|
48
|
-
});
|
|
49
|
-
context.expandedImage = imageSrc;
|
|
50
|
-
}, 200);
|
|
51
|
-
}
|
|
52
|
-
function closeImageViewer(context, event) {
|
|
53
|
-
if (event && event.key !== 'Escape')
|
|
54
|
-
return;
|
|
55
|
-
document.removeEventListener('keydown', context.closeImageListener);
|
|
56
|
-
const expandedImageRef = context.el.shadowRoot.getElementById('expanded-image');
|
|
57
|
-
const rect = context.originalImage.getBoundingClientRect();
|
|
58
|
-
Object.assign(expandedImageRef.style, {
|
|
59
|
-
top: `${rect.top}px`,
|
|
60
|
-
pointerEvents: 'none',
|
|
61
|
-
left: `${rect.left}px`,
|
|
62
|
-
width: `${rect.width}px`,
|
|
63
|
-
height: `${rect.height}px`,
|
|
64
|
-
transitionDuration: '0.3s',
|
|
65
|
-
});
|
|
66
|
-
setTimeout(() => {
|
|
67
|
-
expandedImageRef.src = '';
|
|
68
|
-
expandedImageRef.style.opacity = '0';
|
|
69
|
-
expandedImageRef.style.transitionDuration = '0s';
|
|
70
|
-
}, 300);
|
|
71
|
-
document.body.style.overflow = '';
|
|
72
|
-
context.expandedImage = null;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
exports.closeImageViewer = closeImageViewer;
|
|
76
|
-
exports.eyeSvg = eyeSvg;
|
|
77
|
-
exports.openImageViewer = openImageViewer;
|