Merge pull request #53 from Safelite/feature/Digital/SSR-130
Feature/digital/ssr 130
This commit is contained in:
Kulbhushan Kaushik
GitHub
commit
3e8b70372d
47 changed files with 1189 additions and 0 deletions
18
src/assets/img/tints/Glass-BlueShade-BlueTint.svg
Normal file
18
src/assets/img/tints/Glass-BlueShade-BlueTint.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="url(#paint0_linear_841_8976)" stroke="black"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_841_8976" x1="51.9586" y1="33.0102" x2="51.9586" y2="6.98049" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#CADCDD"/>
|
||||
<stop offset="0.2653" stop-color="#C8DBDC"/>
|
||||
<stop offset="0.3972" stop-color="#C0D6D7"/>
|
||||
<stop offset="0.4996" stop-color="#B3CDD0"/>
|
||||
<stop offset="0.5869" stop-color="#A0C1C5"/>
|
||||
<stop offset="0.6645" stop-color="#88B1B8"/>
|
||||
<stop offset="0.7353" stop-color="#6A9EA7"/>
|
||||
<stop offset="0.8009" stop-color="#468793"/>
|
||||
<stop offset="0.8607" stop-color="#1E6D7C"/>
|
||||
<stop offset="0.8993" stop-color="#005A6B"/>
|
||||
<stop offset="1" stop-color="#005A6B"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1 KiB |
18
src/assets/img/tints/Glass-BlueShade-BrownTint.svg
Normal file
18
src/assets/img/tints/Glass-BlueShade-BrownTint.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="url(#paint0_linear_841_9006)" stroke="black"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_841_9006" x1="51.9586" y1="33.0065" x2="51.9586" y2="6.97682" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D0CDC2"/>
|
||||
<stop offset="0.2632" stop-color="#CECCC1"/>
|
||||
<stop offset="0.394" stop-color="#C6C8BE"/>
|
||||
<stop offset="0.4956" stop-color="#B9C0B8"/>
|
||||
<stop offset="0.5823" stop-color="#A6B6B1"/>
|
||||
<stop offset="0.6593" stop-color="#8EA8A6"/>
|
||||
<stop offset="0.7295" stop-color="#70989A"/>
|
||||
<stop offset="0.7947" stop-color="#4C848B"/>
|
||||
<stop offset="0.854" stop-color="#246E7A"/>
|
||||
<stop offset="0.8993" stop-color="#005A6B"/>
|
||||
<stop offset="1" stop-color="#005A6B"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1 KiB |
19
src/assets/img/tints/Glass-BlueShade-GrayTint.svg
Normal file
19
src/assets/img/tints/Glass-BlueShade-GrayTint.svg
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="url(#paint0_linear_841_8763)" stroke="black"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_841_8763" x1="51.9586" y1="33.0065" x2="51.9586" y2="6.97682" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#E7E7E8"/>
|
||||
<stop offset="0.2559" stop-color="#E5E6E7"/>
|
||||
<stop offset="0.383" stop-color="#DDE1E3"/>
|
||||
<stop offset="0.4818" stop-color="#D0D9DC"/>
|
||||
<stop offset="0.5659" stop-color="#BDCDD1"/>
|
||||
<stop offset="0.6409" stop-color="#A5BFC4"/>
|
||||
<stop offset="0.7091" stop-color="#87ACB4"/>
|
||||
<stop offset="0.7724" stop-color="#6397A1"/>
|
||||
<stop offset="0.8318" stop-color="#3A7D8A"/>
|
||||
<stop offset="0.8859" stop-color="#0C6272"/>
|
||||
<stop offset="0.8993" stop-color="#005A6B"/>
|
||||
<stop offset="1" stop-color="#005A6B"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1 KiB |
18
src/assets/img/tints/Glass-BlueShade-GreenTint.svg
Normal file
18
src/assets/img/tints/Glass-BlueShade-GreenTint.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="url(#paint0_linear_841_8750)" stroke="black"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_841_8750" x1="51.9586" y1="33.0219" x2="51.9586" y2="6.99218" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#CBE9DD"/>
|
||||
<stop offset="0.265" stop-color="#C9E7DC"/>
|
||||
<stop offset="0.3966" stop-color="#C1E2D7"/>
|
||||
<stop offset="0.4989" stop-color="#B4D9D0"/>
|
||||
<stop offset="0.5861" stop-color="#A1CCC6"/>
|
||||
<stop offset="0.6636" stop-color="#89BAB8"/>
|
||||
<stop offset="0.7343" stop-color="#6BA5A7"/>
|
||||
<stop offset="0.7998" stop-color="#478C93"/>
|
||||
<stop offset="0.8595" stop-color="#1F707D"/>
|
||||
<stop offset="0.8993" stop-color="#005A6B"/>
|
||||
<stop offset="1" stop-color="#005A6B"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1 KiB |
19
src/assets/img/tints/Glass-BlueShade-NoTint.svg
Normal file
19
src/assets/img/tints/Glass-BlueShade-NoTint.svg
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="url(#paint0_linear_841_8908)" stroke="black"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_841_8908" x1="51.9812" y1="33.0046" x2="51.9812" y2="6.97492" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="0.2491" stop-color="#FDFEFE"/>
|
||||
<stop offset="0.3729" stop-color="#F5F9F9"/>
|
||||
<stop offset="0.4691" stop-color="#E8F0F2"/>
|
||||
<stop offset="0.551" stop-color="#D5E4E7"/>
|
||||
<stop offset="0.6239" stop-color="#BDD4D9"/>
|
||||
<stop offset="0.6904" stop-color="#9FC1C7"/>
|
||||
<stop offset="0.752" stop-color="#7BAAB3"/>
|
||||
<stop offset="0.8099" stop-color="#528F9A"/>
|
||||
<stop offset="0.8626" stop-color="#247280"/>
|
||||
<stop offset="0.8993" stop-color="#005A6B"/>
|
||||
<stop offset="1" stop-color="#005A6B"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1 KiB |
18
src/assets/img/tints/Glass-BrownShade-BrownTint.svg
Normal file
18
src/assets/img/tints/Glass-BrownShade-BrownTint.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="url(#paint0_linear_841_8984)" stroke="black"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_841_8984" x1="51.9519" y1="33.0065" x2="51.9519" y2="6.97682" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D0CDC2"/>
|
||||
<stop offset="0.2738" stop-color="#CECBC0"/>
|
||||
<stop offset="0.4097" stop-color="#C9C6B8"/>
|
||||
<stop offset="0.5154" stop-color="#C0BCAB"/>
|
||||
<stop offset="0.6055" stop-color="#B3AD98"/>
|
||||
<stop offset="0.6856" stop-color="#A39B80"/>
|
||||
<stop offset="0.7586" stop-color="#8E8462"/>
|
||||
<stop offset="0.8262" stop-color="#766A3E"/>
|
||||
<stop offset="0.8879" stop-color="#5B4B16"/>
|
||||
<stop offset="0.8993" stop-color="#55450E"/>
|
||||
<stop offset="1" stop-color="#55450E"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1 KiB |
17
src/assets/img/tints/Glass-GrayShade-BlueTint.svg
Normal file
17
src/assets/img/tints/Glass-GrayShade-BlueTint.svg
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="url(#paint0_linear_841_8980)" stroke="black"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_841_8980" x1="51.9552" y1="33.0102" x2="51.9552" y2="6.98049" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#CADCDD"/>
|
||||
<stop offset="0.2908" stop-color="#C8DADB"/>
|
||||
<stop offset="0.4353" stop-color="#C1D2D3"/>
|
||||
<stop offset="0.5475" stop-color="#B6C5C6"/>
|
||||
<stop offset="0.6432" stop-color="#A5B2B3"/>
|
||||
<stop offset="0.7282" stop-color="#909A9B"/>
|
||||
<stop offset="0.8057" stop-color="#767C7D"/>
|
||||
<stop offset="0.8761" stop-color="#58595A"/>
|
||||
<stop offset="0.8993" stop-color="#4C4C4D"/>
|
||||
<stop offset="1" stop-color="#4C4C4D"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 981 B |
17
src/assets/img/tints/Glass-GrayShade-BrownTint.svg
Normal file
17
src/assets/img/tints/Glass-GrayShade-BrownTint.svg
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="url(#paint0_linear_841_9018)" stroke="black"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_841_9018" x1="51.9552" y1="33.0065" x2="51.9552" y2="6.97682" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D0CDC2"/>
|
||||
<stop offset="0.2978" stop-color="#CECBC0"/>
|
||||
<stop offset="0.4457" stop-color="#C6C3B9"/>
|
||||
<stop offset="0.5606" stop-color="#B9B6AE"/>
|
||||
<stop offset="0.6585" stop-color="#A6A49D"/>
|
||||
<stop offset="0.7456" stop-color="#8E8C87"/>
|
||||
<stop offset="0.8237" stop-color="#71706D"/>
|
||||
<stop offset="0.8959" stop-color="#4E4E4F"/>
|
||||
<stop offset="0.8993" stop-color="#4C4C4D"/>
|
||||
<stop offset="1" stop-color="#4C4C4D"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 981 B |
17
src/assets/img/tints/Glass-GrayShade-GrayTint.svg
Normal file
17
src/assets/img/tints/Glass-GrayShade-GrayTint.svg
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="url(#paint0_linear_841_8978)" stroke="black"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_841_8978" x1="51.9552" y1="33.0065" x2="51.9552" y2="6.97682" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#E7E7E8"/>
|
||||
<stop offset="0.2851" stop-color="#E5E5E6"/>
|
||||
<stop offset="0.4267" stop-color="#DDDDDE"/>
|
||||
<stop offset="0.5368" stop-color="#D0D0D1"/>
|
||||
<stop offset="0.6305" stop-color="#BDBDBE"/>
|
||||
<stop offset="0.7139" stop-color="#A5A5A6"/>
|
||||
<stop offset="0.7899" stop-color="#878788"/>
|
||||
<stop offset="0.8589" stop-color="#646465"/>
|
||||
<stop offset="0.8993" stop-color="#4C4C4D"/>
|
||||
<stop offset="1" stop-color="#4C4C4D"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 981 B |
17
src/assets/img/tints/Glass-GrayShade-GreenTint.svg
Normal file
17
src/assets/img/tints/Glass-GrayShade-GreenTint.svg
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="url(#paint0_linear_841_8932)" stroke="black"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_841_8932" x1="51.9552" y1="33.0219" x2="51.9552" y2="6.99218" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#CBE9DD"/>
|
||||
<stop offset="0.2841" stop-color="#C9E7DB"/>
|
||||
<stop offset="0.4252" stop-color="#C3DFD4"/>
|
||||
<stop offset="0.5349" stop-color="#B8D2C8"/>
|
||||
<stop offset="0.6283" stop-color="#A9BFB7"/>
|
||||
<stop offset="0.7114" stop-color="#96A7A0"/>
|
||||
<stop offset="0.7871" stop-color="#7D8985"/>
|
||||
<stop offset="0.8559" stop-color="#616665"/>
|
||||
<stop offset="0.8993" stop-color="#4C4C4D"/>
|
||||
<stop offset="1" stop-color="#4C4C4D"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 981 B |
20
src/assets/img/tints/Glass-GreenShade-BlueTint.svg
Normal file
20
src/assets/img/tints/Glass-GreenShade-BlueTint.svg
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="#CEE7DB"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="url(#paint0_linear_841_8920)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" stroke="black"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_841_8920" x1="51.9618" y1="33.0102" x2="51.9618" y2="6.98049" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#CADCDD"/>
|
||||
<stop offset="0.2653" stop-color="#C8DBDB"/>
|
||||
<stop offset="0.3972" stop-color="#C0D6D5"/>
|
||||
<stop offset="0.4996" stop-color="#B3CFCB"/>
|
||||
<stop offset="0.5869" stop-color="#A0C4BD"/>
|
||||
<stop offset="0.6645" stop-color="#88B6AA"/>
|
||||
<stop offset="0.7353" stop-color="#6AA593"/>
|
||||
<stop offset="0.8009" stop-color="#469177"/>
|
||||
<stop offset="0.8607" stop-color="#1E7A58"/>
|
||||
<stop offset="0.8993" stop-color="#006941"/>
|
||||
<stop offset="1" stop-color="#006941"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
18
src/assets/img/tints/Glass-GreenShade-BrownTint.svg
Normal file
18
src/assets/img/tints/Glass-GreenShade-BrownTint.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="url(#paint0_linear_841_8982)" stroke="black"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_841_8982" x1="51.9814" y1="33.0065" x2="51.9814" y2="6.97682" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D0CDC2"/>
|
||||
<stop offset="0.2632" stop-color="#CECCC1"/>
|
||||
<stop offset="0.394" stop-color="#C6C8BC"/>
|
||||
<stop offset="0.4956" stop-color="#B9C2B4"/>
|
||||
<stop offset="0.5823" stop-color="#A6B9A8"/>
|
||||
<stop offset="0.6593" stop-color="#8EAD99"/>
|
||||
<stop offset="0.7295" stop-color="#709F86"/>
|
||||
<stop offset="0.7947" stop-color="#4C8E70"/>
|
||||
<stop offset="0.854" stop-color="#247A57"/>
|
||||
<stop offset="0.8993" stop-color="#006941"/>
|
||||
<stop offset="1" stop-color="#006941"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1 KiB |
18
src/assets/img/tints/Glass-GreenShade-GreenTint.svg
Normal file
18
src/assets/img/tints/Glass-GreenShade-GreenTint.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="url(#paint0_linear_841_8896)" stroke="black"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_841_8896" x1="51.9618" y1="33.0219" x2="51.9618" y2="6.99218" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#CBE9DD"/>
|
||||
<stop offset="0.265" stop-color="#C9E8DB"/>
|
||||
<stop offset="0.3966" stop-color="#C1E3D5"/>
|
||||
<stop offset="0.4989" stop-color="#B4DACB"/>
|
||||
<stop offset="0.5861" stop-color="#A1CFBD"/>
|
||||
<stop offset="0.6636" stop-color="#89BFAA"/>
|
||||
<stop offset="0.7343" stop-color="#6BAC93"/>
|
||||
<stop offset="0.7998" stop-color="#479678"/>
|
||||
<stop offset="0.8595" stop-color="#1F7D59"/>
|
||||
<stop offset="0.8993" stop-color="#006941"/>
|
||||
<stop offset="1" stop-color="#006941"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1 KiB |
3
src/assets/img/tints/Glass-NoShade-BlueTint.svg
Normal file
3
src/assets/img/tints/Glass-NoShade-BlueTint.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="#CBDDDE" stroke="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 370 B |
3
src/assets/img/tints/Glass-NoShade-BrownTint.svg
Normal file
3
src/assets/img/tints/Glass-NoShade-BrownTint.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="#D1CEC3" stroke="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 370 B |
3
src/assets/img/tints/Glass-NoShade-DarkBrownTint.svg
Normal file
3
src/assets/img/tints/Glass-NoShade-DarkBrownTint.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="#5D564C" stroke="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 370 B |
3
src/assets/img/tints/Glass-NoShade-DaryGrayTint.svg
Normal file
3
src/assets/img/tints/Glass-NoShade-DaryGrayTint.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="#D3D3D3" stroke="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 370 B |
3
src/assets/img/tints/Glass-NoShade-GrayTint.svg
Normal file
3
src/assets/img/tints/Glass-NoShade-GrayTint.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="#E9E9EB" stroke="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 370 B |
3
src/assets/img/tints/Glass-NoShade-GreenTint.svg
Normal file
3
src/assets/img/tints/Glass-NoShade-GreenTint.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="#CBE9DD" stroke="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 370 B |
3
src/assets/img/tints/Glass-NoShade-NoTint.svg
Normal file
3
src/assets/img/tints/Glass-NoShade-NoTint.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="white" stroke="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 368 B |
3
src/assets/img/tints/Glass-NoShade-Privacy.svg
Normal file
3
src/assets/img/tints/Glass-NoShade-Privacy.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.25 33H25.7083C24.2188 33 23 31.7812 23 30.2917V9.70833C23 8.21874 24.2188 7 25.7083 7H78.25C79.7396 7 80.9583 8.21874 80.9583 9.70833V30.2917C80.9583 31.7812 79.7396 33 78.25 33Z" fill="#626167" stroke="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 370 B |
18
src/assets/img/tints/Windshield-BlueShade-BlueTint.svg
Normal file
18
src/assets/img/tints/Windshield-BlueShade-BlueTint.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="url(#paint0_linear_841_8966)" stroke="black"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_841_8966" x1="51.9716" y1="34.0522" x2="51.9716" y2="5.97896" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#CADCDD"/>
|
||||
<stop offset="0.2653" stop-color="#C8DBDC"/>
|
||||
<stop offset="0.3972" stop-color="#C0D6D7"/>
|
||||
<stop offset="0.4996" stop-color="#B3CDD0"/>
|
||||
<stop offset="0.5869" stop-color="#A0C1C5"/>
|
||||
<stop offset="0.6645" stop-color="#88B1B8"/>
|
||||
<stop offset="0.7353" stop-color="#6A9EA7"/>
|
||||
<stop offset="0.8009" stop-color="#468793"/>
|
||||
<stop offset="0.8607" stop-color="#1E6D7C"/>
|
||||
<stop offset="0.8993" stop-color="#005A6B"/>
|
||||
<stop offset="1" stop-color="#005A6B"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
18
src/assets/img/tints/Windshield-BlueShade-BrownTint.svg
Normal file
18
src/assets/img/tints/Windshield-BlueShade-BrownTint.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="url(#paint0_linear_841_9004)" stroke="black"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_841_9004" x1="51.9716" y1="34.0483" x2="51.9716" y2="5.975" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D0CDC2"/>
|
||||
<stop offset="0.2632" stop-color="#CECCC1"/>
|
||||
<stop offset="0.394" stop-color="#C6C8BE"/>
|
||||
<stop offset="0.4956" stop-color="#B9C0B8"/>
|
||||
<stop offset="0.5823" stop-color="#A6B6B1"/>
|
||||
<stop offset="0.6593" stop-color="#8EA8A6"/>
|
||||
<stop offset="0.7295" stop-color="#70989A"/>
|
||||
<stop offset="0.7947" stop-color="#4C848B"/>
|
||||
<stop offset="0.854" stop-color="#246E7A"/>
|
||||
<stop offset="0.8993" stop-color="#005A6B"/>
|
||||
<stop offset="1" stop-color="#005A6B"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
19
src/assets/img/tints/Windshield-BlueShade-GrayTint.svg
Normal file
19
src/assets/img/tints/Windshield-BlueShade-GrayTint.svg
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="url(#paint0_linear_825_8758)" stroke="black"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_825_8758" x1="51.9716" y1="34.0483" x2="51.9716" y2="5.975" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#E7E7E8"/>
|
||||
<stop offset="0.2559" stop-color="#E5E6E7"/>
|
||||
<stop offset="0.383" stop-color="#DDE1E3"/>
|
||||
<stop offset="0.4818" stop-color="#D0D9DC"/>
|
||||
<stop offset="0.5659" stop-color="#BDCDD1"/>
|
||||
<stop offset="0.6409" stop-color="#A5BFC4"/>
|
||||
<stop offset="0.7091" stop-color="#87ACB4"/>
|
||||
<stop offset="0.7724" stop-color="#6397A1"/>
|
||||
<stop offset="0.8318" stop-color="#3A7D8A"/>
|
||||
<stop offset="0.8859" stop-color="#0C6272"/>
|
||||
<stop offset="0.8993" stop-color="#005A6B"/>
|
||||
<stop offset="1" stop-color="#005A6B"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
17
src/assets/img/tints/Windshield-BlueShade-GreenTint.svg
Normal file
17
src/assets/img/tints/Windshield-BlueShade-GreenTint.svg
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.99" fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="url(#paint0_linear_206_8118)" stroke="black"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_206_8118" x1="51.9712" y1="34.0648" x2="51.9712" y2="5.99159" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#CEDEE7"/>
|
||||
<stop offset="0.265" stop-color="#C9E7DC"/>
|
||||
<stop offset="0.3966" stop-color="#C1E2D7"/>
|
||||
<stop offset="0.4989" stop-color="#B4D9D0"/>
|
||||
<stop offset="0.5861" stop-color="#A1CCC6"/>
|
||||
<stop offset="0.6636" stop-color="#89BAB8"/>
|
||||
<stop offset="0.7343" stop-color="#6BA5A7"/>
|
||||
<stop offset="0.7998" stop-color="#478C93"/>
|
||||
<stop offset="0.8993" stop-color="#125B7E"/>
|
||||
<stop offset="1" stop-color="#125B7E"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
19
src/assets/img/tints/Windshield-BlueShade-NoTint.svg
Normal file
19
src/assets/img/tints/Windshield-BlueShade-NoTint.svg
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="url(#paint0_linear_841_8906)" stroke="black"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_841_8906" x1="52.0028" y1="34.0462" x2="52.0028" y2="5.97295" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="0.2491" stop-color="#FDFEFE"/>
|
||||
<stop offset="0.3729" stop-color="#F5F9F9"/>
|
||||
<stop offset="0.4691" stop-color="#E8F0F2"/>
|
||||
<stop offset="0.551" stop-color="#D5E4E7"/>
|
||||
<stop offset="0.6239" stop-color="#BDD4D9"/>
|
||||
<stop offset="0.6904" stop-color="#9FC1C7"/>
|
||||
<stop offset="0.752" stop-color="#7BAAB3"/>
|
||||
<stop offset="0.8099" stop-color="#528F9A"/>
|
||||
<stop offset="0.8626" stop-color="#247280"/>
|
||||
<stop offset="0.8993" stop-color="#005A6B"/>
|
||||
<stop offset="1" stop-color="#005A6B"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
18
src/assets/img/tints/Windshield-BrownShade-BrownTint.svg
Normal file
18
src/assets/img/tints/Windshield-BrownShade-BrownTint.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="url(#paint0_linear_841_8974)" stroke="black"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_841_8974" x1="51.9623" y1="34.0483" x2="51.9623" y2="5.975" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D0CDC2"/>
|
||||
<stop offset="0.2738" stop-color="#CECBC0"/>
|
||||
<stop offset="0.4097" stop-color="#C9C6B8"/>
|
||||
<stop offset="0.5154" stop-color="#C0BCAB"/>
|
||||
<stop offset="0.6055" stop-color="#B3AD98"/>
|
||||
<stop offset="0.6856" stop-color="#A39B80"/>
|
||||
<stop offset="0.7586" stop-color="#8E8462"/>
|
||||
<stop offset="0.8262" stop-color="#766A3E"/>
|
||||
<stop offset="0.8879" stop-color="#5B4B16"/>
|
||||
<stop offset="0.8993" stop-color="#55450E"/>
|
||||
<stop offset="1" stop-color="#55450E"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
17
src/assets/img/tints/Windshield-GrayShade-BlueTint.svg
Normal file
17
src/assets/img/tints/Windshield-GrayShade-BlueTint.svg
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="url(#paint0_linear_841_8970)" stroke="black"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_841_8970" x1="51.9669" y1="34.0522" x2="51.9669" y2="5.97896" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#CADCDD"/>
|
||||
<stop offset="0.2908" stop-color="#C8DADB"/>
|
||||
<stop offset="0.4353" stop-color="#C1D2D3"/>
|
||||
<stop offset="0.5475" stop-color="#B6C5C6"/>
|
||||
<stop offset="0.6432" stop-color="#A5B2B3"/>
|
||||
<stop offset="0.7282" stop-color="#909A9B"/>
|
||||
<stop offset="0.8057" stop-color="#767C7D"/>
|
||||
<stop offset="0.8761" stop-color="#58595A"/>
|
||||
<stop offset="0.8993" stop-color="#4C4C4D"/>
|
||||
<stop offset="1" stop-color="#4C4C4D"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
17
src/assets/img/tints/Windshield-GrayShade-BrownTint.svg
Normal file
17
src/assets/img/tints/Windshield-GrayShade-BrownTint.svg
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="url(#paint0_linear_841_9016)" stroke="black"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_841_9016" x1="51.9669" y1="34.0483" x2="51.9669" y2="5.975" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D0CDC2"/>
|
||||
<stop offset="0.2978" stop-color="#CECBC0"/>
|
||||
<stop offset="0.4457" stop-color="#C6C3B9"/>
|
||||
<stop offset="0.5606" stop-color="#B9B6AE"/>
|
||||
<stop offset="0.6585" stop-color="#A6A49D"/>
|
||||
<stop offset="0.7456" stop-color="#8E8C87"/>
|
||||
<stop offset="0.8237" stop-color="#71706D"/>
|
||||
<stop offset="0.8959" stop-color="#4E4E4F"/>
|
||||
<stop offset="0.8993" stop-color="#4C4C4D"/>
|
||||
<stop offset="1" stop-color="#4C4C4D"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
17
src/assets/img/tints/Windshield-GrayShade-GrayTint.svg
Normal file
17
src/assets/img/tints/Windshield-GrayShade-GrayTint.svg
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="url(#paint0_linear_841_8968)" stroke="black"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_841_8968" x1="51.9669" y1="34.0483" x2="51.9669" y2="5.975" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#E7E7E8"/>
|
||||
<stop offset="0.2851" stop-color="#E5E5E6"/>
|
||||
<stop offset="0.4267" stop-color="#DDDDDE"/>
|
||||
<stop offset="0.5368" stop-color="#D0D0D1"/>
|
||||
<stop offset="0.6305" stop-color="#BDBDBE"/>
|
||||
<stop offset="0.7139" stop-color="#A5A5A6"/>
|
||||
<stop offset="0.7899" stop-color="#878788"/>
|
||||
<stop offset="0.8589" stop-color="#646465"/>
|
||||
<stop offset="0.8993" stop-color="#4C4C4D"/>
|
||||
<stop offset="1" stop-color="#4C4C4D"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
17
src/assets/img/tints/Windshield-GrayShade-GreenTint.svg
Normal file
17
src/assets/img/tints/Windshield-GrayShade-GreenTint.svg
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="url(#paint0_linear_841_8930)" stroke="black"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_841_8930" x1="51.9669" y1="34.0648" x2="51.9669" y2="5.99157" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#CBE9DD"/>
|
||||
<stop offset="0.2841" stop-color="#C9E7DB"/>
|
||||
<stop offset="0.4252" stop-color="#C3DFD4"/>
|
||||
<stop offset="0.5349" stop-color="#B8D2C8"/>
|
||||
<stop offset="0.6283" stop-color="#A9BFB7"/>
|
||||
<stop offset="0.7114" stop-color="#96A7A0"/>
|
||||
<stop offset="0.7871" stop-color="#7D8985"/>
|
||||
<stop offset="0.8559" stop-color="#616665"/>
|
||||
<stop offset="0.8993" stop-color="#4C4C4D"/>
|
||||
<stop offset="1" stop-color="#4C4C4D"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
18
src/assets/img/tints/Windshield-GreenShade-BlueTint.svg
Normal file
18
src/assets/img/tints/Windshield-GreenShade-BlueTint.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="url(#paint0_linear_841_8918)" stroke="black"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_841_8918" x1="51.976" y1="34.0522" x2="51.976" y2="5.97896" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#CADCDD"/>
|
||||
<stop offset="0.2653" stop-color="#C8DBDB"/>
|
||||
<stop offset="0.3972" stop-color="#C0D6D5"/>
|
||||
<stop offset="0.4996" stop-color="#B3CFCB"/>
|
||||
<stop offset="0.5869" stop-color="#A0C4BD"/>
|
||||
<stop offset="0.6645" stop-color="#88B6AA"/>
|
||||
<stop offset="0.7353" stop-color="#6AA593"/>
|
||||
<stop offset="0.8009" stop-color="#469177"/>
|
||||
<stop offset="0.8607" stop-color="#1E7A58"/>
|
||||
<stop offset="0.8993" stop-color="#006941"/>
|
||||
<stop offset="1" stop-color="#006941"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
18
src/assets/img/tints/Windshield-GreenShade-BrownTint.svg
Normal file
18
src/assets/img/tints/Windshield-GreenShade-BrownTint.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="url(#paint0_linear_841_8972)" stroke="black"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_841_8972" x1="52.0031" y1="34.0483" x2="52.0031" y2="5.975" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D0CDC2"/>
|
||||
<stop offset="0.2632" stop-color="#CECCC1"/>
|
||||
<stop offset="0.394" stop-color="#C6C8BC"/>
|
||||
<stop offset="0.4956" stop-color="#B9C2B4"/>
|
||||
<stop offset="0.5823" stop-color="#A6B9A8"/>
|
||||
<stop offset="0.6593" stop-color="#8EAD99"/>
|
||||
<stop offset="0.7295" stop-color="#709F86"/>
|
||||
<stop offset="0.7947" stop-color="#4C8E70"/>
|
||||
<stop offset="0.854" stop-color="#247A57"/>
|
||||
<stop offset="0.8993" stop-color="#006941"/>
|
||||
<stop offset="1" stop-color="#006941"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
18
src/assets/img/tints/Windshield-GreenShade-GreenTint.svg
Normal file
18
src/assets/img/tints/Windshield-GreenShade-GreenTint.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="url(#paint0_linear_841_8894)" stroke="black"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_841_8894" x1="51.976" y1="34.0648" x2="51.976" y2="5.99157" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#CBE9DD"/>
|
||||
<stop offset="0.265" stop-color="#C9E8DB"/>
|
||||
<stop offset="0.3966" stop-color="#C1E3D5"/>
|
||||
<stop offset="0.4989" stop-color="#B4DACB"/>
|
||||
<stop offset="0.5861" stop-color="#A1CFBD"/>
|
||||
<stop offset="0.6636" stop-color="#89BFAA"/>
|
||||
<stop offset="0.7343" stop-color="#6BAC93"/>
|
||||
<stop offset="0.7998" stop-color="#479678"/>
|
||||
<stop offset="0.8595" stop-color="#1F7D59"/>
|
||||
<stop offset="0.8993" stop-color="#006941"/>
|
||||
<stop offset="1" stop-color="#006941"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
3
src/assets/img/tints/Windshield-NoShade-BlueTint.svg
Normal file
3
src/assets/img/tints/Windshield-NoShade-BlueTint.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="#CBDDDE" stroke="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 662 B |
3
src/assets/img/tints/Windshield-NoShade-BrownTint.svg
Normal file
3
src/assets/img/tints/Windshield-NoShade-BrownTint.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="#D1CEC3" stroke="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 662 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="#5D564C" stroke="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 662 B |
3
src/assets/img/tints/Windshield-NoShade-DarkGrayTint.svg
Normal file
3
src/assets/img/tints/Windshield-NoShade-DarkGrayTint.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="#D3D3D3" stroke="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 662 B |
3
src/assets/img/tints/Windshield-NoShade-GrayTint.svg
Normal file
3
src/assets/img/tints/Windshield-NoShade-GrayTint.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="#E9E9EB" stroke="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 662 B |
3
src/assets/img/tints/Windshield-NoShade-GreenTint.svg
Normal file
3
src/assets/img/tints/Windshield-NoShade-GreenTint.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="#CBE9DD" stroke="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 662 B |
3
src/assets/img/tints/Windshield-NoShade-NoTint.svg
Normal file
3
src/assets/img/tints/Windshield-NoShade-NoTint.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="white" stroke="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 660 B |
3
src/assets/img/tints/Windshield-NoShade-Privacy.svg
Normal file
3
src/assets/img/tints/Windshield-NoShade-Privacy.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="104" height="40" viewBox="0 0 104 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M51.9768 32.4623C54.8365 32.4623 73.392 32.1997 87.6574 34.0091C90.1732 34.3302 91.889 32.1711 91.9744 30.7698C92.5182 22.8924 84.227 12.0979 84.227 12.0979C84.227 12.0979 81.7113 8.18778 75.6493 7.42988C75.6493 7.42988 61.3546 6 52.0061 6C43.2576 6 28.3617 7.42988 28.3617 7.42988C22.3009 8.18778 19.7851 12.0967 19.7851 12.0967C19.7851 12.0967 11.3793 22.9222 12.0366 30.7698C12.1232 31.9371 13.8378 34.3302 16.3536 34.0091C30.5641 32.1997 49.1184 32.4623 51.9768 32.4623Z" fill="#626167" stroke="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 662 B |
56
src/constants/dynamictext-mapper.js
Normal file
56
src/constants/dynamictext-mapper.js
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
// Used to support custom (non-state) related dynamic text.
|
||||
// Example: {custom:glassName}, each key in the array is the value after custom:, like 'glassname'
|
||||
// Please use lowercase only so that we don't have to worry about case sensitivity.
|
||||
|
||||
const customMappings = {
|
||||
formattedglassname: [
|
||||
{ key: "Windshield Single", transformedValue: "windshield" },
|
||||
{ key: "Windshield Driver", transformedValue: "driver side split windshield" },
|
||||
{ key: "Windshield Passenger", transformedValue: "passenger side split windshield" },
|
||||
{ key: "Rear Stationary", transformedValue: "rear window" },
|
||||
{ key: "Rear Slider", transformedValue: "rear window" },
|
||||
{ key: "Driver Front", transformedValue: "driver side front door" },
|
||||
{ key: "Driver Back", transformedValue: "driver side back door" },
|
||||
{ key: "Driver Vent", transformedValue: "driver side vent glass" },
|
||||
{ key: "Driver Quarter", transformedValue: "driver side quarter panel" },
|
||||
{ key: "Driver SideDoor", transformedValue: "driver side sliding door" },
|
||||
{ key: "Passenger Front", transformedValue: "passenger side front door" },
|
||||
{ key: "Passenger Back", transformedValue: "passenger side back door" },
|
||||
{ key: "Passenger Vent", transformedValue: "passenger side vent glass" },
|
||||
{ key: "Passenger Quarter", transformedValue: "passenger side quarter panel" },
|
||||
{ key: "Passenger SlideDoor", transformedValue: "passenger side sliding door" },
|
||||
],
|
||||
};
|
||||
|
||||
// Gets an instance of a string where the dynamic portion of the text {custom:KeyName}
|
||||
// is replaced by a value from the above map.
|
||||
// If the value isn't found, return the original dynamic string without replacement
|
||||
export function getCustomTransformValue(dynamicString, key) {
|
||||
// Get array key from the dynamic string
|
||||
const regexExp = new RegExp("{(.*?):(.*?)}", "g");
|
||||
const matches = [...dynamicString.matchAll(regexExp)];
|
||||
|
||||
if (matches.length === 0) {
|
||||
return dynamicString;
|
||||
}
|
||||
|
||||
const arrayKey = matches[0][2];
|
||||
|
||||
// Get the array of possible values based on the key name.
|
||||
const transformArray = customMappings[arrayKey.toLowerCase()];
|
||||
|
||||
if (transformArray === undefined) {
|
||||
return dynamicString;
|
||||
}
|
||||
|
||||
// Get the value where the name matches the key name, there should only be one so find() is used.
|
||||
const mapObject = transformArray.find((map) => map.key.toLowerCase() === key.toLowerCase());
|
||||
|
||||
if (mapObject === undefined) {
|
||||
return dynamicString;
|
||||
}
|
||||
|
||||
const finalString = dynamicString.replace(`{custom:${arrayKey}}`, mapObject.transformedValue);
|
||||
|
||||
return finalString;
|
||||
}
|
||||
94
src/constants/tint-mapper.js
Normal file
94
src/constants/tint-mapper.js
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
// TintMap with array keys by location, lowercase to avoid as much string mismatching as possible.
|
||||
// Src assumes you have a @/assets/img/tints/, making the final value @/assets/img/tints/{Src} in the markup.
|
||||
// See vehicle-parts for implementation example.
|
||||
const tintMap = {
|
||||
other: [
|
||||
// Blue Shade
|
||||
{ name: "blue tint, blue shade", src: "Glass-BlueShade-BlueTint.svg" },
|
||||
{ name: "brown tint, blue shade", src: "Glass-BlueShade-BrownTint.svg" },
|
||||
{ name: "gray tint, blue shade", src: "Glass-BlueShade-GrayTint.svg" },
|
||||
{ name: "green tint, blue shade", src: "Glass-BlueShade-GreenTint.svg" },
|
||||
{ name: "clear, blue shade", src: "Glass-BlueShade-NoTint.svg" },
|
||||
|
||||
// Brown Shade
|
||||
{ name: "brown tint, brown shade", src: "Glass-BrownShade-BrownTint.svg" },
|
||||
|
||||
// Gray Shade
|
||||
{ name: "blue tint, gray shade", src: "Glass-GrayShade-BlueTint.svg" },
|
||||
{ name: "brown tint, gray shade", src: "Glass-GrayShade-BrownTint.svg" },
|
||||
{ name: "gray tint, gray shade", src: "Glass-GrayShade-GrayTint.svg" },
|
||||
{ name: "green tint, gray shade", src: "Glass-GrayShade-GreenTint.svg" },
|
||||
|
||||
// Green Shade
|
||||
{ name: "blue tint, green shade", src: "Glass-GreenShade-BlueTint.svg" },
|
||||
{ name: "brown tint, green shade", src: "Glass-GreenShade-BrownTint.svg" },
|
||||
{ name: "green tint, green shade", src: "Glass-GreenShade-GreenTint.svg" },
|
||||
|
||||
// Tints Only
|
||||
{ name: "blue tint privacy", src: "Glass-NoShade-BlueTint.svg" },
|
||||
{ name: "bronze tint", src: "Glass-NoShade-BrownTint.svg" },
|
||||
{ name: "dark brown tint", src: "Glass-NoShade-DarkBrownTint.svg" },
|
||||
{ name: "privacy, black frame", src: "Glass-NoShade-Privacy.svg" },
|
||||
{ name: "gray tint", src: "Glass-NoShade-GrayTint.svg" },
|
||||
{ name: "green tint", src: "Glass-NoShade-GreenTint.svg" },
|
||||
{ name: "gray tint privacy", src: "Glass-NoShade-GrayTint.svg" },
|
||||
|
||||
// No shade or tint
|
||||
{ name: "clear", src: "Glass-NoShade-NoTint.svg" },
|
||||
],
|
||||
|
||||
windshield: [
|
||||
// Blue Shade
|
||||
{ name: "blue tint, blue shade", src: "Windshield-BlueShade-BlueTint.svg" },
|
||||
{ name: "bronze tint, blue shade", src: "Windshield-BlueShade-BrownTint.svg" },
|
||||
{ name: "gray tint, blue shade", src: "Windshield-BlueShade-GrayTint.svg" },
|
||||
{ name: "green tint, blue shade", src: "Windshield-BlueShade-GreenTint.svg" },
|
||||
{ name: "clear, blue shade", src: "Windshield-BlueShade-NoTint.svg" },
|
||||
|
||||
// Brown Shade
|
||||
{ name: "bronze tint, bronze shade", src: "Windshield-BrownShade-BrownTint.svg" },
|
||||
|
||||
// Gray Shade
|
||||
{ name: "blue tint, gray shade", src: "Windshield-GrayShade-BlueTint.svg" },
|
||||
{ name: "brown tint, gray shade", src: "Windshield-GrayShade-BrownTint.svg" },
|
||||
{ name: "gray tint, gray shade", src: "Windshield-GrayShade-GrayTint.svg" },
|
||||
{ name: "green tint, gray shade", src: "Windshield-GrayShade-GreenTint.svg" },
|
||||
|
||||
// Green Shade
|
||||
{ name: "blue tint, green shade", src: "Windshield-GreenShade-BlueTint.svg" },
|
||||
{ name: "brown tint, green shade", src: "Windshield-GreenShade-BrownTint.svg" },
|
||||
{ name: "green tint, green shade", src: "Windshield-GreenShade-GreenTint.svg" },
|
||||
|
||||
// Tints Only
|
||||
{ name: "blue tint", src: "Windshield-NoShade-BlueTint.svg" },
|
||||
{ name: "bronze tint", src: "Windshield-NoShade-BrownTint.svg" },
|
||||
{ name: "dark brown tint", src: "Windshield-NoShade-DarkBrownTint.svg" },
|
||||
{ name: "privacy, black frame", src: "Windshield-NoShade-Privacy.svg" },
|
||||
{ name: "gray tint", src: "Windshield-NoShade-GrayTint.svg" },
|
||||
{ name: "green tint", src: "Windshield-NoShade-GreenTint.svg" },
|
||||
{ name: "gray tint privacy", src: "Windshield-NoShade-GrayTint.svg" },
|
||||
|
||||
// No shade or tint
|
||||
{ name: "clear", src: "Windshield-NoShade-NoTint.svg" },
|
||||
],
|
||||
};
|
||||
|
||||
// Gets the tint image source string given the glass location, and the tint description (like 'Green Tint')
|
||||
// Use lowered strings here to try to avoid mismatch. Returns an empty string if array key doesn't exist.
|
||||
// Returns undefined if no items are found.
|
||||
export function getTintImage(glassLocation, colorString) {
|
||||
// Windshield glass has special images, all other glass uses the same though.
|
||||
if (glassLocation.toLowerCase() !== "windshield") {
|
||||
glassLocation = "other";
|
||||
}
|
||||
|
||||
if (tintMap[glassLocation.toLowerCase()] === undefined) {
|
||||
return "";
|
||||
}
|
||||
|
||||
const tintImageSource = tintMap[glassLocation.toLowerCase()].find(
|
||||
(item) => item.name.toLowerCase() == colorString.toLowerCase()
|
||||
);
|
||||
|
||||
return tintImageSource;
|
||||
}
|
||||
|
|
@ -46,6 +46,7 @@ export function getMountOptions(mockData) {
|
|||
mocks.issPageValues = issPageValues;
|
||||
mocks.queryStrings = queryStrings;
|
||||
mocks.$router = mockData?.router;
|
||||
mocks.$route = mockData?.route;
|
||||
|
||||
const global = {
|
||||
mocks: mocks,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,294 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
||||
import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass-part-question.vue";
|
||||
import { useMainStore } from "@/store";
|
||||
|
||||
const featureListData = {
|
||||
colorAnswersProp: [
|
||||
{
|
||||
ColorAnswerText: "Green Tint",
|
||||
FeatureAnswers: [
|
||||
{ FeatureAnswerText: "heated glass, solar, 1 hole", PartNumber: "DB12209GTYN" },
|
||||
|
||||
],
|
||||
},
|
||||
{
|
||||
ColorAnswerText: "Gray Tint Privacy",
|
||||
FeatureAnswers: [
|
||||
{ FeatureAnswerText: "heated glass, solar, 1 hole", PartNumber: "DB12209YPYN" },
|
||||
],
|
||||
},
|
||||
],
|
||||
glassLocationProp: "Rear",
|
||||
glassNameProp: "Stationary",
|
||||
modelValueProp: {},
|
||||
};
|
||||
|
||||
describe("glass-part-question.vue", () => {
|
||||
test("Part data passed in, should map data for ButtonQuestion (radio type)", async () => {
|
||||
//Arrange
|
||||
const { wrapper } = setupMocks(featureListData);
|
||||
|
||||
//Act
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
//Assert
|
||||
expect(Object.keys(wrapper.vm.featureListData).length).toBe(2);
|
||||
expect(wrapper.vm.featureListData["Green Tint"][0].Text).toBe(
|
||||
"heated glass, solar, 1 hole"
|
||||
);
|
||||
expect(wrapper.vm.featureListData["Green Tint"][0].Name).toBe("DB12209GTYN");
|
||||
expect(wrapper.vm.featureListData["Gray Tint Privacy"][0].Text).toBe(
|
||||
"heated glass, solar, 1 hole"
|
||||
);
|
||||
expect(wrapper.vm.featureListData["Gray Tint Privacy"][0].Name).toBe("DB12209YPYN");
|
||||
});
|
||||
|
||||
|
||||
test("Tint mapper, should get tint image by glassLocation and tintColor", async () => {
|
||||
//Arrange
|
||||
|
||||
const { wrapper } = setupMocks(featureListData);
|
||||
|
||||
//Act
|
||||
await wrapper.vm.$nextTick();
|
||||
const tintSourceImage = wrapper.vm.getTintSourceImage("Rear", "Green Tint");
|
||||
|
||||
//Assert
|
||||
expect(tintSourceImage).toBe("Glass-NoShade-GreenTint.svg");
|
||||
});
|
||||
|
||||
test("Tint mapper, should return empty string if no tint map found", async () => {
|
||||
//Arrange
|
||||
|
||||
const { wrapper } = setupMocks(featureListData);
|
||||
|
||||
//Act
|
||||
await wrapper.vm.$nextTick();
|
||||
const tintSourceImage = wrapper.vm.getTintSourceImage("Rear", "Crazy Rainbow Tint");
|
||||
|
||||
//Assert
|
||||
expect(tintSourceImage).toBe("");
|
||||
});
|
||||
|
||||
test("Should emit updateModelValue, and have correct attributes", async () => {
|
||||
//Arrange
|
||||
featureListData.pageData = {
|
||||
partsOrQuestions: [
|
||||
{
|
||||
glassName: "Stationary",
|
||||
glassLocation: "Rear",
|
||||
parts: [{ partNumber: "DB12209GTYN", color: "Green Tint" }],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const { wrapper } = setupMocks(featureListData);
|
||||
|
||||
//Act
|
||||
await wrapper.vm.$nextTick();
|
||||
const listCard = await wrapper.findComponent({
|
||||
name: "buttonQuestion",
|
||||
});
|
||||
await wrapper.setData({ selectedTint: "Green Tint" });
|
||||
// to trigger the computed setter
|
||||
wrapper.vm.selectedPartNumber = "DB12209GTYN";
|
||||
|
||||
//Assert
|
||||
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([
|
||||
{ partNumber: "DB12209GTYN", color: "Green Tint" },
|
||||
]);
|
||||
expect(listCard.attributes("groupname")).toBe("Rear-Stationary");
|
||||
expect(listCard.attributes("validationrules")).toBe("Rear-Stationary-tint-required");
|
||||
});
|
||||
|
||||
test("ResetTintAndPartSelections, should reset data elements ", async () => {
|
||||
//Arrange
|
||||
|
||||
featureListData.pageData = {
|
||||
partsOrQuestions: [
|
||||
{
|
||||
glassName: "Stationary",
|
||||
glassLocation: "Rear",
|
||||
parts: [{ partNumber: "DB12209GTYN", color: "Green Tint" },
|
||||
{ partNumber: "DB12209GTYN2", color: "Green Tint" }
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
const { wrapper } = setupMocks(featureListData);
|
||||
|
||||
//Act
|
||||
await wrapper.vm.$nextTick();
|
||||
await wrapper.setData({ selectedTint: "Green Tint", selectedPartNumber: "DB12209GTYN" });
|
||||
|
||||
expect(wrapper.vm.selectedTint).toEqual("Green Tint");
|
||||
expect(wrapper.vm.selectedPartNumber).toEqual("DB12209GTYN");
|
||||
|
||||
await wrapper.vm.ResetTintAndPartSelections();
|
||||
|
||||
expect(wrapper.vm.selectedTint).toEqual("Green Tint");
|
||||
expect(wrapper.vm.selectedPartNumber).toEqual(null);
|
||||
});
|
||||
|
||||
test("default is selected if only one option", async () => {
|
||||
// Arrange
|
||||
featureListData.pageData = {
|
||||
partsOrQuestions: [
|
||||
{
|
||||
glassName: "Stationary",
|
||||
glassLocation: "Rear",
|
||||
parts: [{ partNumber: "DB12209GTYN", color: "Green Tint" }],
|
||||
},
|
||||
],
|
||||
};
|
||||
const { wrapper } = setupMocks(featureListData);
|
||||
|
||||
// Act
|
||||
await wrapper.vm.$nextTick();
|
||||
await wrapper.setData({ selectedTint: "Green Tint" });
|
||||
// take emitted value, pass down as modelValue
|
||||
// yes, yes, it's not ideal
|
||||
await wrapper.setProps({ modelValue: wrapper.emitted()["update:modelValue"][0][0] });
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.selectedPartNumber).toBe("DB12209GTYN");
|
||||
});
|
||||
|
||||
test("default is not selected if more than one option", async () => {
|
||||
// Arrange
|
||||
featureListData.pageData = {
|
||||
partsOrQuestions: [
|
||||
{
|
||||
glassName: "Stationary",
|
||||
glassLocation: "Rear",
|
||||
parts: [
|
||||
{ partNumber: "DB12209GTYN", color: "Green Tint" },
|
||||
{ partNumber: "DB12209GTYNXXX", color: "Green Tint" },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
const { wrapper } = setupMocks(featureListData);
|
||||
|
||||
// Act
|
||||
await wrapper.vm.$nextTick();
|
||||
await wrapper.setData({ selectedTint: "Green Tint" });
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Assert
|
||||
expect(wrapper.emitted()["update:modelValue"]).toBeFalsy();
|
||||
expect(wrapper.vm.selectedPartNumber).toBeFalsy();
|
||||
});
|
||||
|
||||
const partsForSelectedTintTestCases = [
|
||||
[
|
||||
"Rear",
|
||||
"Stationary",
|
||||
"Green Tint",
|
||||
[
|
||||
{ partNumber: "Glass1", color: "Green Tint" },
|
||||
{ partNumber: "Glass3", color: "Green Tint" },
|
||||
{ partNumber: "Glass4", color: "Green Tint" },
|
||||
{ partNumber: "Glass6", color: "Green Tint" },
|
||||
],
|
||||
],
|
||||
[
|
||||
"Rear",
|
||||
"Stationary",
|
||||
"Blue Tint",
|
||||
[
|
||||
{ partNumber: "Glass2", color: "Blue Tint" },
|
||||
{ partNumber: "Glass5", color: "Blue Tint" },
|
||||
],
|
||||
],
|
||||
["Rear", "Stationary", "Red Tint", [{ partNumber: "Glass7", color: "Red Tint" }]],
|
||||
[
|
||||
"Windshield",
|
||||
"Single",
|
||||
"Green Tint",
|
||||
[
|
||||
{ partNumber: "Windshield1", color: "Green Tint" },
|
||||
{ partNumber: "Windshield2", color: "Green Tint" },
|
||||
],
|
||||
],
|
||||
["Windshield", "Single", "Blue Tint", []],
|
||||
["Driver", "Quarter", "Green Tint", []],
|
||||
];
|
||||
|
||||
test.each(partsForSelectedTintTestCases)(
|
||||
"partsForSelectedTint returns correct parts",
|
||||
async (glassLocation, glassName, selectedTint, expectedResults) => {
|
||||
// Arrange
|
||||
|
||||
|
||||
const pageData = { partsOrQuestions: [
|
||||
{
|
||||
glassName: "Stationary",
|
||||
glassLocation: "Rear",
|
||||
parts: [
|
||||
{ partNumber: "Glass1", color: "Green Tint" },
|
||||
{ partNumber: "Glass2", color: "Blue Tint" },
|
||||
{ partNumber: "Glass3", color: "Green Tint" },
|
||||
{ partNumber: "Glass4", color: "Green Tint" },
|
||||
{ partNumber: "Glass5", color: "Blue Tint" },
|
||||
{ partNumber: "Glass6", color: "Green Tint" },
|
||||
{ partNumber: "Glass7", color: "Red Tint" },
|
||||
],
|
||||
},
|
||||
{
|
||||
glassName: "Single",
|
||||
glassLocation: "Windshield",
|
||||
parts: [
|
||||
{ partNumber: "Windshield1", color: "Green Tint" },
|
||||
{ partNumber: "Windshield2", color: "Green Tint" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
const { wrapper } = setupMocks({
|
||||
glassLocationProp: glassLocation,
|
||||
glassNameProp: glassName,
|
||||
colorAnswersProp: [],
|
||||
pageData
|
||||
});
|
||||
|
||||
// Act
|
||||
await wrapper.setData({ selectedTint: selectedTint });
|
||||
|
||||
// Assert
|
||||
expect(expectedResults).toEqual(wrapper.vm.partsForSelectedTint);
|
||||
}
|
||||
);
|
||||
|
||||
});
|
||||
|
||||
function setupMocks({ glassNameProp, glassLocationProp, colorAnswersProp, modelValueProp, pageData }) {
|
||||
|
||||
|
||||
const mountOptions = getMountOptions({
|
||||
route: {
|
||||
query: {
|
||||
iisPage: "vehicle-parts",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
mountOptions.propsData = {
|
||||
glassName: glassNameProp,
|
||||
glassLocation: glassLocationProp,
|
||||
colorAnswers: colorAnswersProp,
|
||||
modelValue: modelValueProp,
|
||||
|
||||
};
|
||||
|
||||
const wrapper = shallowMount(glassPartQuestion, mountOptions);
|
||||
|
||||
//Mock store
|
||||
const partsOrQuestions = pageData ?? { partsOrQuestions: [{ glassName: "Stationary", glassLocation: "Rear", parts: [] }] };
|
||||
useMainStore().pageData = jest.fn();
|
||||
useMainStore().pageData.mockReturnValueOnce(partsOrQuestions);
|
||||
|
||||
return { wrapper };
|
||||
}
|
||||
|
|
@ -0,0 +1,231 @@
|
|||
<template>
|
||||
<div class="row">
|
||||
<p class="mb-0 color-question-text">{{ colorQuestionText }}</p>
|
||||
</div>
|
||||
<div class="nested-radio">
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<buttonQuestion
|
||||
v-model="selectedTint"
|
||||
:answers="tintSelectionOptions"
|
||||
buttonTypeString="listCard"
|
||||
:isWide="true"
|
||||
altText=""
|
||||
isRequired
|
||||
:groupName="`${glassLocation}-${glassName}`"
|
||||
:validationRules="tintValidationRules">
|
||||
<div class="row my-2" aria-live="polite">
|
||||
<div class="col">
|
||||
<buttonQuestion
|
||||
v-model="selectedPartNumber"
|
||||
buttonTypeString="radio"
|
||||
class="radioQuestion"
|
||||
:questionText="glassFeatureQuestion"
|
||||
:answers="featureListData[selectedTint]"
|
||||
textPosition="text-start"
|
||||
:loaderEnabled="false"
|
||||
isRequired
|
||||
:groupName="`${glassLocation}-${glassName}-${selectedTint}`"
|
||||
:validationRules="partValidationRules" />
|
||||
</div>
|
||||
</div>
|
||||
</buttonQuestion>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Components
|
||||
import buttonQuestion from "@/common-components/button-question/button-question";
|
||||
|
||||
// Supporting files
|
||||
import { getTintImage } from "@/constants/tint-mapper";
|
||||
import { getCustomTransformValue } from "@/constants/dynamictext-mapper";
|
||||
import { defineRule } from "vee-validate";
|
||||
import { required } from "@/helpers/validation-rules";
|
||||
import { errorMessages } from "@/constants/error-messages";
|
||||
|
||||
export default {
|
||||
name: "glass-part-question",
|
||||
inheritAttrs: false,
|
||||
data() {
|
||||
return {
|
||||
glassColorQuestion: "",
|
||||
glassFeatureQuestion: "",
|
||||
selectedTint: "",
|
||||
};
|
||||
},
|
||||
props: {
|
||||
glassName: String,
|
||||
glassLocation: String,
|
||||
colorAnswers: Array,
|
||||
modelValue: Object,
|
||||
alreadyPopulatedPartsData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.LoadPreselectedValues();
|
||||
},
|
||||
components: {
|
||||
buttonQuestion,
|
||||
},
|
||||
computed: {
|
||||
tintValidationRules() {
|
||||
const validationRuleName = `${this.glassLocation}-${this.glassName}-tint-required`;
|
||||
|
||||
defineRule(validationRuleName, required(errorMessages.OPTION_REQUIRED));
|
||||
|
||||
return validationRuleName;
|
||||
},
|
||||
partValidationRules() {
|
||||
const validationRuleName = `${this.glassLocation}-${this.glassName}-part-required`;
|
||||
|
||||
defineRule(validationRuleName, required(errorMessages.OPTION_REQUIRED));
|
||||
return validationRuleName;
|
||||
},
|
||||
colorQuestionText() {
|
||||
return getCustomTransformValue(
|
||||
this.glassColorQuestion,
|
||||
`${this.glassLocation} ${this.glassName}`
|
||||
);
|
||||
},
|
||||
|
||||
tintSelectionOptions() {
|
||||
let tintOptions = [];
|
||||
|
||||
Object.keys(this.featureListData).forEach((tintOption) => {
|
||||
tintOptions.push({
|
||||
value: tintOption,
|
||||
buttonLabel: tintOption,
|
||||
buttonImage: require(`@/assets/img/tints/${this.getTintSourceImage(
|
||||
this.glassLocation,
|
||||
tintOption
|
||||
)}`),
|
||||
});
|
||||
});
|
||||
|
||||
return tintOptions;
|
||||
},
|
||||
|
||||
selectedPartNumber: {
|
||||
get() {
|
||||
return this.modelValue?.partNumber;
|
||||
},
|
||||
set(newValue) {
|
||||
this.$emit(
|
||||
"update:modelValue",
|
||||
this.partsForSelectedTint.filter((part) => part.partNumber == newValue)[0]
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
partsForSelectedTint() {
|
||||
const matchingGlass = this.PartDataFromApi.partsOrQuestions?.filter(
|
||||
(dataForGlassLocationAndName) =>
|
||||
dataForGlassLocationAndName.glassName == this.glassName &&
|
||||
dataForGlassLocationAndName.glassLocation == this.glassLocation
|
||||
);
|
||||
const matchingGlassParts = matchingGlass?.length == 1 ? matchingGlass[0].parts : [];
|
||||
return matchingGlassParts.filter((part) => part.color == this.selectedTint) ?? [];
|
||||
},
|
||||
|
||||
// Creates a map of the feature list data in the correct Name/Value
|
||||
// format for the button-question component.
|
||||
featureListData() {
|
||||
const tintMapByColor = this.colorAnswers.reduce((arr, item) => {
|
||||
// Create the key
|
||||
const itemColor = item.ColorAnswerText;
|
||||
arr[itemColor] = arr[itemColor] || [];
|
||||
|
||||
// Map the data to Name/Text object for ButtonQuestion
|
||||
const mappedItem = item.FeatureAnswers.reduce((featureArr, item) => {
|
||||
featureArr["Text"] = item.FeatureAnswerText; // Display to User
|
||||
featureArr["Name"] = item.PartNumber; // Backing Value
|
||||
|
||||
return featureArr;
|
||||
}, {});
|
||||
|
||||
// Add onto the final object
|
||||
arr[itemColor].push(mappedItem);
|
||||
|
||||
return arr;
|
||||
}, {});
|
||||
|
||||
return tintMapByColor;
|
||||
},
|
||||
|
||||
PartDataFromApi() {
|
||||
return this.mainStore.pageData(this.$route.query.iisPage) ?? {};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// Initialize the component data
|
||||
initializeComponent(cmsContent) {
|
||||
this.glassColorQuestion = cmsContent.ColorQuestionWidget.QuestionText;
|
||||
this.glassFeatureQuestion = cmsContent.FeatureQuestionWidget.QuestionText;
|
||||
},
|
||||
|
||||
// Gets tint images based on the glass type, and tint name.
|
||||
// Returns an empty string if the src or object is undefined.
|
||||
getTintSourceImage(glassLocation, tintColor) {
|
||||
const tintSourceObject = getTintImage(glassLocation, tintColor);
|
||||
|
||||
if (tintSourceObject === undefined || tintSourceObject.src == undefined) {
|
||||
return "";
|
||||
}
|
||||
|
||||
return tintSourceObject.src;
|
||||
},
|
||||
|
||||
// Reset selections when tint changes for the same glass to ensure proper selection.
|
||||
// Also checks if only a single part is present for the tint.
|
||||
ResetTintAndPartSelections() {
|
||||
this.selectedPartNumber = null;
|
||||
this.AutoSelectIfSinglePart();
|
||||
},
|
||||
|
||||
// Check if only a single part is present for the tint and set the v-model if it is.
|
||||
AutoSelectIfSinglePart() {
|
||||
if (this.partsForSelectedTint?.length == 1) {
|
||||
this.selectedPartNumber = this.partsForSelectedTint[0].partNumber;
|
||||
}
|
||||
},
|
||||
|
||||
// Loads the preselected values from the store.
|
||||
LoadPreselectedValues() {
|
||||
this.$nextTick(() => {
|
||||
if (this.modelValue !== undefined) {
|
||||
// Populate button-question model-value if parts data already exists in VueX
|
||||
this.selectedTint = this.modelValue?.color;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
selectedTint() {
|
||||
this.AutoSelectIfSinglePart();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.nested-radio {
|
||||
.ui-radio {
|
||||
flex-direction: column;
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.color-question-text {
|
||||
color: $black;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue