diff --git a/package.json b/package.json index 4d7476d5a..b68a43b15 100644 --- a/package.json +++ b/package.json @@ -14,12 +14,13 @@ "canvas-confetti": "^1.4.0", "core-js": "^3.6.5", "vue": "^3.0.0", - "vue-router": "^4.0.11" + "vue-router": "^4.0.11", + "vuex": "^4.0.2", + "vuex-persistedstate": "^4.1.0" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", - "@vue/cli-plugin-unit-jest": "^4.5.13", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0", "@vue/eslint-config-prettier": "^6.0.0", @@ -27,16 +28,10 @@ "eslint": "^6.7.2", "eslint-plugin-prettier": "^3.3.1", "eslint-plugin-vue": "^7.0.0", - "jest-junit": "^12.3.0", "prettier": "^2.2.1", "sass": "^1.26.5", "sass-loader": "^8.0.2" }, - "jest-junit": { - "suiteNameTemplate": "{filepath}", - "outputDirectory": ".", - "outputName": "junit.xml" - }, "eslintConfig": { "root": true, "env": { diff --git a/public/index.html b/public/index.html index 351892a4e..84665a8b4 100644 --- a/public/index.html +++ b/public/index.html @@ -14,7 +14,7 @@ -
+
diff --git a/src/App.vue b/src/App.vue index 6bd10e98d..b2e017e53 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,26 +1,16 @@ diff --git a/src/Funnel1.vue b/src/Funnel1.vue deleted file mode 100644 index bf4720119..000000000 --- a/src/Funnel1.vue +++ /dev/null @@ -1,91 +0,0 @@ - - - diff --git a/src/assets/scss/_CustomVariables.scss b/src/assets/scss/_CustomVariables.scss index c7b586303..4e1cf95b4 100644 --- a/src/assets/scss/_CustomVariables.scss +++ b/src/assets/scss/_CustomVariables.scss @@ -102,4 +102,4 @@ $grid-gutter-width: .75rem; $border-radius: .25rem; $border-radius-sm: .2rem; $border-radius-lg: .5rem;//Used for buttons. Can be used for other things, of course. -$border-radius-pill: 50rem; +$border-radius-pill: 50rem; \ No newline at end of file diff --git a/src/assets/scss/_GlobalStyles.scss b/src/assets/scss/_GlobalStyles.scss index 204926bc4..1646125b5 100644 --- a/src/assets/scss/_GlobalStyles.scss +++ b/src/assets/scss/_GlobalStyles.scss @@ -12,3 +12,7 @@ a { color: $blue-400; } } + +.pointer { + cursor: pointer; +} diff --git a/src/assets/scss/components/_SelectCar.scss b/src/assets/scss/components/_SelectCar.scss new file mode 100644 index 000000000..541fe8960 --- /dev/null +++ b/src/assets/scss/components/_SelectCar.scss @@ -0,0 +1,61 @@ +.select-car { + height: 100vh; + + .select-car-form { + background: $white; + height: 100%; + + form { + height: calc(100% - 230px); + overflow-y: scroll; + overflow-x: hidden; + } + + .car_list, .current_car_info-text, .needed_car_info-text { + flex-shrink: 0; + width: 100%; + position: relative; + transition: transform .3s; + } + } + + .current_car_info { + position: relative; + min-height: 2.5rem; + + .current_car_info-text { + position: absolute; + } + } +} + +.slide-enter-from { + opacity: 0; + transform: translateX(30vw); +} +.slide-enter-active, .slide-leave-active { + transition: all .4s; +} +.slide-leave-to { + opacity: 0; + transform: translateX(-30vw); +} + +.slide_reverse-enter-from { + opacity: 0; + transform: translateX(-30vw); +} +.slide_reverse-enter-active, .slide_reverse-leave-active { + transition: all .4s; +} +.slide_reverse-leave-to { + opacity: 0; + transform: translateX(30vw); +} + +.fade-enter-from, .fade-leave-to { + opacity: 0; +} +.fade-enter-active, .fade-leave-active { + transition: all .5s ease; +} \ No newline at end of file diff --git a/src/assets/scss/components/_buttons.scss b/src/assets/scss/components/_buttons.scss index 0d0608dd7..a59cef969 100644 --- a/src/assets/scss/components/_buttons.scss +++ b/src/assets/scss/components/_buttons.scss @@ -52,6 +52,10 @@ z-index: -1; } } + &.btn-funnel { + display: flex; + justify-content: space-between; + } } // Non-Bootstrap button // Intended to be used without .btn class @@ -69,3 +73,20 @@ box-shadow: 0 0 0 2px $blue; } } + +// Non-Bootstrap button +// Intended to be used without .btn class +.btn-damage { + width: 100%; + background-color: $white; + border: 1px solid #b3b4b5; + &:focus { + background-color: #e7f1f6; + border: 1px solid $blue; + } + &:focus-visible { // For keyboard/screenreader + background-color: #e7f1f6; + outline: none; + box-shadow: 0 0 0 2px $blue; + } +} \ No newline at end of file diff --git a/src/assets/scss/custom.scss b/src/assets/scss/custom.scss index d27b60a05..f9fa18f53 100644 --- a/src/assets/scss/custom.scss +++ b/src/assets/scss/custom.scss @@ -18,5 +18,6 @@ //Custom Components CSS @import "./components/_navbar"; +@import "./components/_SelectCar"; @import "./components/_buttons"; @import "./components/_vehicle-image"; diff --git a/src/components/Colors.vue b/src/components/Colors.vue deleted file mode 100644 index 03af8fbe7..000000000 --- a/src/components/Colors.vue +++ /dev/null @@ -1,37 +0,0 @@ - - - diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index 00f801686..000000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,66 +0,0 @@ - - - - - - diff --git a/src/components/buttons/buttonFunnel.vue b/src/components/buttons/buttonFunnel.vue deleted file mode 100644 index 9e878ab76..000000000 --- a/src/components/buttons/buttonFunnel.vue +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/src/components/buttons/buttonPrimary.vue b/src/components/buttons/buttonPrimary.vue deleted file mode 100644 index abc24e291..000000000 --- a/src/components/buttons/buttonPrimary.vue +++ /dev/null @@ -1,30 +0,0 @@ - - - diff --git a/src/components/vehicleImage.vue b/src/components/vehicleImage.vue deleted file mode 100644 index b1c441528..000000000 --- a/src/components/vehicleImage.vue +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/src/layouts/CarFunnel/BaseTemplate.vue b/src/layouts/CarFunnel/BaseTemplate.vue new file mode 100644 index 000000000..410567201 --- /dev/null +++ b/src/layouts/CarFunnel/BaseTemplate.vue @@ -0,0 +1,47 @@ + + + \ No newline at end of file diff --git a/src/layouts/CarFunnel/Damage/SelectDamage.vue b/src/layouts/CarFunnel/Damage/SelectDamage.vue new file mode 100644 index 000000000..1390b54cd --- /dev/null +++ b/src/layouts/CarFunnel/Damage/SelectDamage.vue @@ -0,0 +1,104 @@ + + + \ No newline at end of file diff --git a/src/layouts/CarFunnel/SelectCar/CarAttributes.vue b/src/layouts/CarFunnel/SelectCar/CarAttributes.vue new file mode 100644 index 000000000..ba8ea62a4 --- /dev/null +++ b/src/layouts/CarFunnel/SelectCar/CarAttributes.vue @@ -0,0 +1,28 @@ + + + \ No newline at end of file diff --git a/src/layouts/CarFunnel/SelectCar/SelectMake.vue b/src/layouts/CarFunnel/SelectCar/SelectMake.vue new file mode 100644 index 000000000..8a25e2f99 --- /dev/null +++ b/src/layouts/CarFunnel/SelectCar/SelectMake.vue @@ -0,0 +1,40 @@ + + + \ No newline at end of file diff --git a/src/layouts/CarFunnel/SelectCar/SelectModel.vue b/src/layouts/CarFunnel/SelectCar/SelectModel.vue new file mode 100644 index 000000000..0c625201a --- /dev/null +++ b/src/layouts/CarFunnel/SelectCar/SelectModel.vue @@ -0,0 +1,40 @@ + + + \ No newline at end of file diff --git a/src/layouts/CarFunnel/SelectCar/SelectStyle.vue b/src/layouts/CarFunnel/SelectCar/SelectStyle.vue new file mode 100644 index 000000000..cf111e597 --- /dev/null +++ b/src/layouts/CarFunnel/SelectCar/SelectStyle.vue @@ -0,0 +1,40 @@ + + + \ No newline at end of file diff --git a/src/layouts/CarFunnel/SelectCar/SelectYear.vue b/src/layouts/CarFunnel/SelectCar/SelectYear.vue new file mode 100644 index 000000000..6221df317 --- /dev/null +++ b/src/layouts/CarFunnel/SelectCar/SelectYear.vue @@ -0,0 +1,42 @@ + + + \ No newline at end of file diff --git a/src/layouts/ContentSite/Home.vue b/src/layouts/ContentSite/Home.vue new file mode 100644 index 000000000..37cb7b49e --- /dev/null +++ b/src/layouts/ContentSite/Home.vue @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/src/main.js b/src/main.js index 0cdefa956..0ab4dc394 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,7 @@ import { createApp } from "vue"; -import Funnel1 from "./Funnel1.vue"; -import router from '@/router'; +import App from "./App.vue"; +import router from './router'; +import store from '@/store'; //Bootstrap JavaScript import "../node_modules/bootstrap/dist/js/bootstrap.js"; @@ -8,4 +9,4 @@ import "../node_modules/bootstrap/dist/js/bootstrap.js"; //Get Bootstrap and Custom Styles import "./assets/scss/custom.scss"; -createApp(Funnel1).use(router).mount("#Funnel1"); \ No newline at end of file +createApp(App).use(router).use(store).mount("#app"); diff --git a/src/sharedcomponents/Buttons/Button.vue b/src/sharedcomponents/Buttons/Button.vue new file mode 100644 index 000000000..c6b8703c8 --- /dev/null +++ b/src/sharedcomponents/Buttons/Button.vue @@ -0,0 +1,37 @@ + + + diff --git a/src/sharedcomponents/Buttons/ImageButton.vue b/src/sharedcomponents/Buttons/ImageButton.vue new file mode 100644 index 000000000..0366c8a84 --- /dev/null +++ b/src/sharedcomponents/Buttons/ImageButton.vue @@ -0,0 +1,13 @@ + + + \ No newline at end of file diff --git a/src/components/HeaderNav/HeaderNav.spec.js b/src/sharedcomponents/HeaderNav/HeaderNav.spec.js similarity index 100% rename from src/components/HeaderNav/HeaderNav.spec.js rename to src/sharedcomponents/HeaderNav/HeaderNav.spec.js diff --git a/src/components/HeaderNav/HeaderNav.vue b/src/sharedcomponents/HeaderNav/HeaderNav.vue similarity index 100% rename from src/components/HeaderNav/HeaderNav.vue rename to src/sharedcomponents/HeaderNav/HeaderNav.vue diff --git a/src/components/confetti.vue b/src/sharedcomponents/confetti.vue similarity index 100% rename from src/components/confetti.vue rename to src/sharedcomponents/confetti.vue diff --git a/src/components/forms/textInput.vue b/src/sharedcomponents/forms/textInput.vue similarity index 100% rename from src/components/forms/textInput.vue rename to src/sharedcomponents/forms/textInput.vue diff --git a/src/components/imageButton.vue b/src/sharedcomponents/imageButton.vue similarity index 100% rename from src/components/imageButton.vue rename to src/sharedcomponents/imageButton.vue diff --git a/src/store/index.js b/src/store/index.js new file mode 100644 index 000000000..c956742bd --- /dev/null +++ b/src/store/index.js @@ -0,0 +1,72 @@ +import { createStore } from 'vuex'; +import createPersistedState from 'vuex-persistedstate'; +import axios from 'axios'; +import router from '@/router'; + +export default createStore({ + plugins: [createPersistedState({ + storage: window.sessionStorage, + })], + state: { + makes: [], + models: [], + styles: [], + year: '', + make: '', + model: '', + style: '', + slideTransition: 'none', + carImg: "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg", + blurImg: true + }, + mutations: { + updateYear(state, data){ + state.year = data.year; + state.makes = data.makes.data.Result; + state.slideTransition = 'slide' + }, + updateMake(state, data){ + state.make = data.make; + state.models = data.models.data.Result; + state.slideTransition = 'slide'; + }, + updateModel(state, data){ + state.model = data.model; + state.styles = data.styles.data.Result; + state.slideTransition = 'slide'; + }, + updateStyle(state, data){ + state.style = data.style; + state.carImg = "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg"; + state.blurImg = false; + state.slideTransition = 'slide'; + }, + removeStyle(state) { + state.style = ''; + state.blurImg = true; + state.carImg = 'https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg' + } + }, + actions: { + async selectYear(context, year){ + const makes = await axios.get(`https://mockey.qa.sagaws.net/service/makes/year=${year}`); + context.commit('updateYear', {year, makes}); + router.push(`/select-make?year=${year}`); + }, + async selectMake({commit, state}, make){ + const models = await axios.get(`https://mockey.qa.sagaws.net/service/models/year=${state.year}/make=${make}`); + commit('updateMake', {make, models}); + router.push(`/select-model?year=${state.year}&make=${make}`); + }, + async selectModel({commit, state}, model){ + const styles = await axios.get(`https://mockey.qa.sagaws.net/service/styles/year=${state.year}/make=${state.make}/model=${model}`); + commit('updateModel', {model, styles}); + router.push(`/select-style?year=${state.year}&make=${state.make}&model=${model}`); + }, + selectStyle({commit, state}, style){ + commit('updateStyle', {style}); + router.push(`/damage?year=${state.year}&make=${state.make}&model=${state.model}&style=${style}`); + } + } + +})