jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'feature/CSR-335' into feature/CSR-297

Browse source
This commit is contained in:
CarlNation 2022-02-24 08:45:33 -05:00
commit 7784a69852
54 changed files with 1066 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/assets/img/tints/BackGlass-BlueShade-BlueTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

18
src/assets/img/tints/BackGlass-BlueShade-BrownTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

19
src/assets/img/tints/BackGlass-BlueShade-GrayTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

18
src/assets/img/tints/BackGlass-BlueShade-GreenTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

19
src/assets/img/tints/BackGlass-BlueShade-NoTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

18
src/assets/img/tints/BackGlass-BrownShade-BrownTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

17
src/assets/img/tints/BackGlass-GrayShade-BlueTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 981 B

17
src/assets/img/tints/BackGlass-GrayShade-BrownTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 981 B

17
src/assets/img/tints/BackGlass-GrayShade-GrayTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 981 B

17
src/assets/img/tints/BackGlass-GrayShade-GreenTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 981 B

20
src/assets/img/tints/BackGlass-GreenShade-BlueTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

18
src/assets/img/tints/BackGlass-GreenShade-BrownTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

18
src/assets/img/tints/BackGlass-GreenShade-GreenTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

3
src/assets/img/tints/BackGlass-NoShade-BlueTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 370 B

3
src/assets/img/tints/BackGlass-NoShade-BrownTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 370 B

3
src/assets/img/tints/BackGlass-NoShade-DarkBrownTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 370 B

3
src/assets/img/tints/BackGlass-NoShade-DaryGrayTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 370 B

3
src/assets/img/tints/BackGlass-NoShade-GrayTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 370 B

3
src/assets/img/tints/BackGlass-NoShade-GreenTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 370 B

3
src/assets/img/tints/BackGlass-NoShade-NoTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 368 B

3
src/assets/img/tints/BackGlass-NoShade-Privacy.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 370 B

18
src/assets/img/tints/Windshield-BlueShade-BlueTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

18
src/assets/img/tints/Windshield-BlueShade-BrownTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

19
src/assets/img/tints/Windshield-BlueShade-GrayTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

17
src/assets/img/tints/Windshield-BlueShade-GreenTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

19
src/assets/img/tints/Windshield-BlueShade-NoTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

18
src/assets/img/tints/Windshield-BrownShade-BrownTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

17
src/assets/img/tints/Windshield-GrayShade-BlueTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

17
src/assets/img/tints/Windshield-GrayShade-BrownTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

17
src/assets/img/tints/Windshield-GrayShade-GrayTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

17
src/assets/img/tints/Windshield-GrayShade-GreenTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

18
src/assets/img/tints/Windshield-GreenShade-BlueTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

18
src/assets/img/tints/Windshield-GreenShade-BrownTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

18
src/assets/img/tints/Windshield-GreenShade-GreenTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

3
src/assets/img/tints/Windshield-NoShade-BlueTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 662 B

3
src/assets/img/tints/Windshield-NoShade-BrownTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 662 B

3
src/assets/img/tints/Windshield-NoShade-DarkBrownTint.svg Normal file
View 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="#5D564C" stroke="black"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 662 B

3
src/assets/img/tints/Windshield-NoShade-DarkGrayTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 662 B

3
src/assets/img/tints/Windshield-NoShade-GrayTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 662 B

3
src/assets/img/tints/Windshield-NoShade-GreenTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 662 B

3
src/assets/img/tints/Windshield-NoShade-NoTint.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 660 B

3
src/assets/img/tints/Windshield-NoShade-Privacy.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 662 B

8
src/common-components/button-question/button-question.vue
View file

@ -1,7 +1,7 @@
<template>
<div :class="isOverflowScrollable ? 'button_question' : ''">
<div v-if="questionText" class="mt-6 mb-4 d-flex">
<span class="text-center fs-6 fw-bold w-100">{{ questionText }}</span>
<div v-if="questionText" class="d-flex">
<span :class="[buttonType === 'radio' ? ['mb-0', 'text-left', 'mt-2' ] : ['mb-4', 'mt-6', 'text-center'], 'fs-6 fw-bold w-100' ]">{{ questionText }}</span>
</div>
<div class="w-100 d-flex justify-content-center">
<fieldset class="w-100" :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
@ -22,8 +22,8 @@
:selectingInitiatesLoad="selectingInitiatesLoad"
:loaderColor="loaderColor"
:loaderPosition="loaderPosition"
:isWide="isWide"
:isRequired="isRequired"
:isWide=isWide
:isRequired=isRequired
:buttonImage="answer.AnswerImageUrl"
:buttonImageId="answer.ImageId"
:altText="answer.Name ? answer.Name : answer"

57
src/constants/dynamictext-mapper.js Normal file
View file

@ -0,0 +1,57 @@
// 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
}

1
src/constants/store-actions.js
View file

@ -11,6 +11,7 @@ const storeActions = {
GET_EVOX_IMAGE: "getEvoxImage",
LOOKUP_VEHICLE_BY_YMMS: "lookupVehicleByYmms",
LOOKUP_VEHICLE_BY_VIN: "lookupVehicleByVin",
GET_PARTS_OR_QUESTIONS: "getPartsOrQuestions",
// DEPENDENCY MUTATIONS
RESET_VEHICLE_AND_DEPS: "resetVehicleAndDependencies",

90
src/constants/tint-mapper.js Normal file
View file

@ -0,0 +1,90 @@
// 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 = {
rear: [
// Blue Shade
{ name: "blue shade, blue tint", src: "BackGlass-BlueShade-BlueTint.svg" },
{ name: "blue shade, brown tint", src: "BackGlass-BlueShade-BrownTint.svg" },
{ name: "blue shade, gray tint", src: "BackGlass-BlueShade-GrayTint.svg" },
{ name: "blue shade, green tint", src: "BackGlass-BlueShade-GreenTint.svg" },
{ name: "blue shade", src: "BackGlass-BlueShade-NoTint.svg" },
// Brown Shade
{ name: "brown shade, brown tint", src: "BackGlass-BrownShade-BrownTint.svg" },
// Gray Shade
{ name: "gray shade, blue tint", src: "BackGlass-GrayShade-BlueTint.svg" },
{ name: "gray shade, brown tint", src: "BackGlass-GrayShade-BrownTint.svg" },
{ name: "gray shade, gray tint", src: "BackGlass-GrayShade-GrayTint.svg" },
{ name: "gray shade, green tint", src: "BackGlass-GrayShade-GreenTint.svg" },
// Green Shade
{ name: "green shade, blue tint", src: "BackGlass-GreenShade-BlueTint.svg" },
{ name: "green shade, brown tint", src: "BackGlass-GreenShade-BrownTint.svg" },
{ name: "green shade, green tint", src: "BackGlass-GreenShade-GreenTint.svg" },
// Tints Only
{ name: "blue tint", src: "BackGlass-NoShade-BlueTint.svg" },
{ name: "brown tint", src: "BackGlass-NoShade-BrownTint.svg" },
{ name: "dark brown tint", src: "BackGlass-NoShade-DarkBrownTint.svg" },
{ name: "dark gray tint", src: "BackGlass-NoShade-DarkGrayTint.svg" },
{ name: "gray tint", src: "BackGlass-NoShade-GrayTint.svg" },
{ name: "green tint", src: "BackGlass-NoShade-GreenTint.svg" },
{ name: "gray tint privacy", src: "BackGlass-NoShade-Privacy.svg" },
// No shade or tint
{ name: "no shade, no tint", src: "BackGlass-NoShade-NoTint.svg" }, // ???
],
windshield: [
// Blue Shade
{ name: "blue shade, blue tint", src: "Windshield-BlueShade-BlueTint.svg" },
{ name: "blue shade, brown tint", src: "Windshield-BlueShade-BrownTint.svg" },
{ name: "blue shade, gray tint", src: "Windshield-BlueShade-GrayTint.svg" },
{ name: "blue shade, green tint", src: "Windshield-BlueShade-GreenTint.svg" },
{ name: "blue shade", src: "Windshield-BlueShade-NoTint.svg" },
// Brown Shade
{ name: "brown shade, brown tint", src: "Windshield-BrownShade-BrownTint.svg" },
// Gray Shade
{ name: "gray shade, blue tint", src: "Windshield-GrayShade-BlueTint.svg" },
{ name: "gray shade, brown tint", src: "Windshield-GrayShade-BrownTint.svg" },
{ name: "gray shade, gray tint", src: "Windshield-GrayShade-GrayTint.svg" },
{ name: "gray shade, green tint", src: "Windshield-GrayShade-GreenTint.svg" },
// Green Shade
{ name: "green shade, blue tint", src: "Windshield-GreenShade-BlueTint.svg" },
{ name: "green shade, brown tint", src: "Windshield-GreenShade-BrownTint.svg" },
{ name: "green shade, green tint", src: "Windshield-GreenShade-GreenTint.svg" },
// Tints Only
{ name: "blue tint", src: "Windshield-NoShade-BlueTint.svg" },
{ name: "brown tint", src: "Windshield-NoShade-BrownTint.svg" },
{ name: "dark brown tint", src: "Windshield-NoShade-DarkBrownTint.svg" },
{ name: "dark gray tint", src: "Windshield-NoShade-DarkGrayTint.svg" },
{ name: "gray tint", src: "Windshield-NoShade-GrayTint.svg" },
{ name: "green tint", src: "Windshield-NoShade-GreenTint.svg" },
{ name: "gray tint privacy", src: "Windshield-NoShade-Privacy.svg" },
// No shade or tint
{ name: "no shade, no tint", 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) {
if (tintMap[glassLocation.toLowerCase()] === undefined) {
return '';
}
const tintImageSource = tintMap[glassLocation.toLowerCase()].find(item => item.name.toLowerCase() == colorString.toLowerCase())
return tintImageSource;
}

35
src/layouts/nested-radio-poc/nested-radio.vue
View file

@ -1,20 +1,18 @@
<template>
<div class="container-fluid nested-radio">
<div class="row mb-1">
<div class="col">
<listCard
groupName="listcard1"
isWide="true"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Green Tint, Blue Shade"
buttonID="radio1"
groupName="listcard1"
isWide="true"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Green Tint, Blue Shade"
buttonID="radio1"
/>
</div>
</div>
<div class="row mb-1">
<div class="col">
<p class="mb-0 fw-bold">Ok, select the features</p>
<buttonQuestion
buttonType="radio"
groupName="Demo Group"
@ -23,22 +21,22 @@
value="test button"
screenReaderOnlyText="rain sensor, solar, 3rd visor band"
:answers="demoArray"
questionText="ok now select your features"
/>
</div>
</div>
<div class="row mb-2">
<div class="col">
<listCard
groupName="listcard1"
isWide="true"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Green Tint"
buttonID="radio2"
groupName="listcard1"
isWide="true"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Green Tint"
buttonID="radio2"
/>
</div>
</div>
</div>
</template>
<script>
@ -56,9 +54,9 @@ export default {
demoArray: [
"rain sensor, solar, 3rd visor band",
"rain sensor, heated glass, solar, 3rd visor band",
]
}
}
],
};
},
};
</script>
@ -66,10 +64,11 @@ export default {
.nested-radio {
.ui-radio {
flex-direction: column;
margin: .25rem 0;
margin: 0.25rem 0;
}
p {
font-size: .875rem;
font-size: 0.875rem;
}
}
</style>

142
src/layouts/vehicle-parts/part-question/part-question.vue Normal file
View file

@ -0,0 +1,142 @@
<template>
<div class="container">
<div class="row">
<p>{{ colorQuestionText }}</p>
</div>
</div>
<div class="container nested-radio" v-for="(value, name, index) in featureListData" :key="index">
<div class="row my-2">
<div class="col">
<listCard v-model="selectedTint[name]" :isRadio="true" :isWide="true" :buttonImage="
require(`@/assets/img/tints/${getTintSourceImage(
glassLocation,
name
)}`)
" :buttonLabel="name" altText="" :buttonID="`${glassLocation}-${glassName}-${name}`" :groupName="`${glassLocation}-${glassName}`" @isCheckedChanged="ResetTintAndPartSelections()" />
</div>
</div>
<transition name="fade" mode="out-in">
<div v-if="
selectedTint[name] != undefined &&
selectedTint[name].buttonId === `${glassLocation}-${glassName}-${name}`
" class="row my-2" aria-live="polite">
<div class="col">
<buttonQuestion v-model="selectedPart[glassLocation]" buttonType="radio" class="radioQuestion" :questionText="glassFeatureQuestion" :answers="value" textPosition="text-start" :loaderEnabled="false" :isRequired="true" :groupName="`${glassLocation}-${glassName}-${name}`" />
</div>
</div>
</transition>
</div>
</template>
<script>
// Components
import listCard from "@/ux-components/list-card/list-card";
import buttonQuestion from "@/common-components/button-question/button-question";
// Supporting files
import {
getTintImage
} from "@/constants/tint-mapper";
import {
getCustomTransformValue
} from "@/constants/dynamictext-mapper";
export default {
name: "part-question",
inheritAttrs: false,
data() {
return {
glassColorQuestion: '',
glassFeatureQuestion: '',
selectedTint: {}, // v-model for the list card selections
};
},
props: {
glassName: String,
glassLocation: String,
colorAnswers: Array,
modelValue: Object
},
components: {
listCard,
buttonQuestion,
},
computed: {
colorQuestionText() {
return getCustomTransformValue(this.glassColorQuestion, `${this.glassLocation} ${this.glassName}`);
},
selectedPart: {
get: function () {
return this.modelValue;
},
set: function (newValue) {
this.$emit("update:modelValue", newValue);
}
},
// 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;
}
},
methods: {
initializeComponent(cmsContent, initialData) {
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.
ResetTintAndPartSelections() {
this.selectedTint = {};
this.selectedPart = {};
}
},
};
</script>
<style lang="scss">
.nested-radio {
.ui-radio {
flex-direction: column;
margin: 0.25rem 0;
}
p {
font-size: 0.875rem;
}
}
</style>

183
src/layouts/vehicle-parts/vehicle-parts.vue Normal file
View file

@ -0,0 +1,183 @@
<template>
<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
<funnelHeader ref="funnelHeader" />
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage="false" />
<funnelSubHeader ref="funnelSubHeader" />
<div class="container-fluid prevent-squish my-5">
<div class="row">
<div class="col">
<alert class="rounded border-0 shadow-sm" alertClass="alert-warning" :alertHeadline="alertWidgetData.headline" :alertCopy="alertWidgetData.copy" :isDismissible="false" />
</div>
</div>
</div>
<div v-for="(item, i) in Parts" :key="i">
<partQuestion :ref="`${refPrefix}-${item.glassLocation}`" v-model="glassParts[item.glassLocation + '-' + item.glassName]" :glassLocation="item.glassLocation" :glassName="item.glassName" :colorAnswers="item.colorAnswers" />
<br />
</div>
<funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
</div>
</template>
<script>
// Components
import partQuestion from "@/layouts/vehicle-parts/part-question/part-question";
import funnelHeader from "@/common-components/funnel-header/funnel-header";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import alert from "@/ux-components/alert/alert";
// Supporting Files
import {
fetchCmsContentForPage
} from "@/helpers/cms-content-helper";
import {
settleAllPromises
} from "@/helpers/layout-helper";
export default {
name: "vehicle-parts",
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
// Settle promises and get results
const promiseResultMap = [{
resultKey: "cmsContent",
promise: cmsContentPromise,
}, ];
const resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.$refs.funnelHeader.initializeComponent(
resultMap.cmsContent.FunnelHeaderWidget
);
vm.$refs.vehicleBanner.initializeComponent(
resultMap.cmsContent.VehicleBannerWidget
);
vm.$refs.funnelSubHeader.initializeComponent(
resultMap.cmsContent.FunnelSubHeaderWidget
);
vm.$refs.funnelFooter.initializeComponent(
resultMap.cmsContent.FunnelFooterWidget
);
// Part Question dynamic component
Object.keys(vm.$refs)
.filter((r) => r.includes(vm.refPrefix) && vm.$refs[r][0] !== undefined)
.forEach((c) =>
vm.$refs[c][0].initializeComponent({
ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
})
);
// Set alertData for the page alert. These use props so we don't call
// initializeComponent here.
vm.alertWidgetData = {
copy: resultMap.cmsContent.AlertWidget.BodyText,
headline: resultMap.cmsContent.AlertWidget.HeadlineText
};
});
},
data() {
return {
glassParts: {},
refPrefix: "partQuestion",
alertWidgetData: Object,
};
},
components: {
partQuestion,
funnelHeader,
vehicleBanner,
funnelSubHeader,
funnelFooter,
alert,
},
computed: {
Parts() {
return [{
glassLocation: "Rear",
glassName: "Stationary",
colorAnswers: [{
ColorAnswerText: "Green Tint",
FeatureAnswers: [{
FeatureAnswerText: "Backglass - heated glass, solar, 1 hole",
PartNumber: "test-backglass-green-tint-1-hole",
}, ],
},
{
ColorAnswerText: "Green Tint",
FeatureAnswers: [{
FeatureAnswerText: "Backglass - heated glass, solar, 2 hole",
PartNumber: "test-backglass-green-tint-2-hole",
}, ],
},
{
ColorAnswerText: "Gray Tint Privacy",
FeatureAnswers: [{
FeatureAnswerText: "Backglass - heated glass, solar, 3 hole",
PartNumber: "test-backglass-gray-tint-privacy-3-hole",
}, ],
},
{
ColorAnswerText: "Gray Tint Privacy",
FeatureAnswers: [{
FeatureAnswerText: "Backglass - heated glass, solar, 4 hole",
PartNumber: "test-backglass-blue-tint-4-hole",
}, ],
},
],
},
{
glassLocation: "Windshield",
glassName: "Single",
colorAnswers: [{
ColorAnswerText: "Blue Tint",
FeatureAnswers: [{
FeatureAnswerText: "Windshield - heated glass, solar, 1 hole",
PartNumber: "test-windshield-blue-tint-1-hole",
}, ],
},
{
ColorAnswerText: "Blue Tint",
FeatureAnswers: [{
FeatureAnswerText: "Windshield -heated glass, solar, 2 hole",
PartNumber: "test-blue-tint-windshield-2-hole",
}, ],
},
{
ColorAnswerText: "Gray Tint Privacy",
FeatureAnswers: [{
FeatureAnswerText: "Windshield -heated glass, solar, 3 hole",
PartNumber: "test-gray-tint-privacy-windshield-3-hole",
}, ],
},
{
ColorAnswerText: "Gray Tint Privacy",
FeatureAnswers: [{
FeatureAnswerText: "Windshield -heated glass, solar, 4 hole",
PartNumber: "test-brown-tint-windshield-4-hole",
}, ],
},
],
},
];
},
},
methods: {
arePagePrerequisitesValid(parameters) {
// store.getters.damage.isRepair !== null;
// parameters.PartsByGlassName.length > 0;
return true;
}
},
};
</script>

8
src/router/index.js
View file

@ -55,7 +55,7 @@ const routes = [
.getRoutes()
.filter((x) => x.name === to.query.fmgPage)[0].components;
if (!arePagePrerequisitesValid(component)) {
if (!arePagePrerequisitesValid(component, to.params)) {
await GoToFunnelStartOn404(next);
}
@ -80,7 +80,7 @@ const routes = [
.filter((x) => x.name === routeData[0].name)[0]
.components.default();
if (!arePagePrerequisitesValid(nextComponent)) {
if (!arePagePrerequisitesValid(nextComponent, to.params)) {
await GoToFunnelStartOn404(next);
}
@ -217,8 +217,8 @@ async function GoToFunnelStartOn404(next) {
}
// Checks arePagePrerequisitesValid on the component passed in.
function arePagePrerequisitesValid(component) {
return component.default.methods.arePagePrerequisitesValid();
function arePagePrerequisitesValid(component, parameters = {}) {
return component.default.methods.arePagePrerequisitesValid(parameters);
}
// Reset dependant state on route change.

25
src/store/index.js
View file

@ -25,6 +25,11 @@ export const state = {
numberOfChips: null,
glassToReplace: null,
},
lineItems:{
glassParts: null,
childParts: null,
otherParts: null
}
},
applicationUser: {
eventBus: [],
@ -102,7 +107,9 @@ export const mutations = {
},
resetPartsAndDependencies(state) {
state.glassParts = null;
state.childParts = null;
state.otherParts = null;
}
}
@ -118,6 +125,8 @@ export const getters = {
return matchedEvent !== undefined ? matchedEvent.eventValue : undefined;
},
eventBus: (state) => state.applicationUser.eventBus,
damage: (state) => state.order.damage,
lineItems: (state) => state.order.lineItems
}
// Export Actions
@ -239,6 +248,20 @@ export const actions = {
payload: {},
});
},
// Parts API Actions
getPartsOrQuestions(context, { carId, glassArray, zipCode, vin = '' }) {
return globalMethods.callHttpClient({
method: endpoints.GetRouteInfo.method,
endpoint: endpoints.GetRouteInfo.url,
payload: {
carId: carId,
glass: glassArray,
zip: zipCode,
vin: vin
},
});
}
}
export default createStore({

4
src/styles/common-styles.scss
View file

@ -3,7 +3,6 @@
body {
font-size: 16px;
background-color: #fff;
.container-fluid {
max-width: 576px; //Remove once desktop app is complete
&.container-shadow {
@ -14,6 +13,9 @@ body {
display: flex;
flex-direction: column;
}
.prevent-squish{
overflow-x: unset;
}
}
.pointer {
cursor: pointer;

8
src/ux-components/list-card/list-card.vue
View file

@ -49,7 +49,6 @@
<script>
import { useField } from "vee-validate";
export default {
name: "listCard",
props: {
@ -100,13 +99,14 @@ export default {
handleCheckChange(newValue, oldValue){
const isInitialization = typeof(oldValue) === 'function';
if (!isInitialization) {
this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });
const emitEvent = { checkValue: this.checkValue, value: this.value.toString(), buttonId: this.buttonID.toString() };
this.$emit('isCheckedChanged', emitEvent);
this.$emit('update:modelValue', emitEvent);
}
}
},
setup(props) {
const inputType = props.isMultiSelect ? "checkbox" : "radio";
const {
value: inputValue,
handleChange,
@ -263,4 +263,4 @@ export default {
}
}
}
</style>
</style>

40
src/ux-components/radio/radio.vue
View file

@ -2,15 +2,15 @@
<!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
<div class="ui-radio form-check" :class="[hasError ? 'has-error' : '']">
<input
type="radio"
class="form-check-input"
aria-checked="false"
:name="groupName"
:id="buttonID"
:aria-required="isRequired"
:value="value"
:v-model="checkValue"
@change="handleCheckChanged()"
type="radio"
class="form-check-input"
aria-checked="false"
:name="groupName"
:id="buttonID"
:aria-required="isRequired"
:value="value"
:v-model="checkValue"
@change="handleCheckChanged()"
/>
<label class="d-flex align-items-start form-check-label" :for="buttonID">
<p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
@ -43,8 +43,8 @@ export default {
checkValue: Boolean,
};
},
created(){
if(this.selectedButtonIDs){
created() {
if (this.selectedButtonIDs) {
this.checkValue = this.selectedButtonIDs[0];
}
},
@ -52,12 +52,20 @@ export default {
handleClick(value) {
this.handleChange(value);
},
handleCheckChange(newValue, oldValue){
const isInitialization = typeof(oldValue) === 'function';
handleCheckChanged(newValue, oldValue) {
const isInitialization = typeof oldValue === "function";
if (!isInitialization) {
this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });
const emitEvent = {
checkValue: this.checkValue,
value: this.value.toString(),
buttonID: this.buttonID.toString(),
};
this.$emit("isCheckedChanged", emitEvent);
this.$emit("update:modelValue", emitEvent);
}
}
},
},
setup(props) {
const { groupName, value } = toRefs(props);
@ -83,7 +91,7 @@ export default {
.form-check-input {
border: 1px solid $gray-500;
border-radius: 100%;
margin-right: .5rem;
margin-right: 0.5rem;
&:checked {
background-color: $white;
background-size: 71%;