<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="../src/assets/icon.ico">
- <title>Sandvik Service Sale</title>
+ <title>Sandvik Service Selector</title>
</head>
<body>
<noscript>
- <strong>We're sorry but sandvik-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+ <strong>We're sorry but the Sandvik Service Selector doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<select class="container__form--select" name="country" id="country" v-model="country">
<option v-for="(capabilities, countryCode) in countries" :value="countryCode" :key="countryCode">{{ $t('countries.' + countryCode) }}</option>
</select>
- <button class="container__form--btn btn" type="submit" @click.prevent="selectCountry()">{{ $t("OK") }}</button>
+ <button class="container__form--btn btn" type="submit" @click.prevent="selectCountry()">{{ $t("ok") }}</button>
</span>
<p class="container__form--info">{{$t("countryInfo")}}</p>
</form>
<button class="container__buttons--btn btn" @click.prevent="handleAnswer('yes')">{{ $t("yes") }}</button>
<button class="container__buttons--btn btn" @click.prevent="handleAnswer('no')">{{ $t("no") }}</button>
</div>
+ <div class="go-back">
+ <button class="btn" @click.prevent="goBack()">{{ $t("back") }}</button>
+ </div>
</div>
<div class="answer" v-if="step === 3">
</li>
</ul>
+ <div class="answer-cta">
+ <h3 class="answer-cta-title">{{ $t('contactUs') }}</h3>
+ <p v-html="$t('contactUsText')"></p>
+ </div>
+
<button class="restart btn" @click.prevent="restart()">{{$t("restart")}}</button>
</div>
</div>
"JO": "T",
"KZ": "T",
"KE": "T",
- "KP": "",
- "KR": "T",
"XK": "OR",
"KW": "T",
"KG": "T",
"NI": "T",
"NE": "T",
"NG": "T",
+ "KP": "",
"NO": "R",
"OM": "T",
"PK": "T",
"SB": "T",
"SO": "T",
"ZA": "OGR",
+ "KR": "T",
"SS": "T",
"ES": "OGR",
"LK": "T",
} else {
this.currentQuestion++;
}
+ },
+ goBack() {
+ // Go back while answering questions
+ // If we're on the first question, go back to step 1
+ if (this.currentQuestion > 0) {
+ // When going back, we need to remove the last response, if it was the
+ // response from the previous question (to avoid duplicate responses)
+ // If the user selects "No", a response isn't recorded so that's why this
+ // extra check is needed.
+ if (this.responses[this.responses.length - 1] === this.questionsToAsk[this.currentQuestion - 1]) {
+ this.responses.pop(); // Remove this response from the array
+ }
+ this.currentQuestion--;
+ } else {
+ this.step = 1;
+ }
}
}
}
font-family: Aktiv;
src: url(../assets/Aktiv.woff);
}
+ .btn {
+ cursor: pointer;
+ transition: 300ms all ease-in-out;
+ font-size: 1em;
+ border: 1px solid white;
+ background: transparent;
+ color: white;
+ text-transform: uppercase;
+ padding: 0.5em 1.2em;
+ }
+ .btn:hover {
+ background-color: rgba(0,0,0,0.1);
+ }
+ .go-back {
+ text-align: left;
+ margin-top: 3em;
+ position: absolute;
+ left: 2em;
+ bottom: 2em;
+ }
.container {
max-width: 792px;
height: 100%;
min-height: 400px;
display: flex;
justify-content: center;
- align-items: center
+ align-items: center;
+ position: relative;
}
.container__body.step-3 {
min-height: 0;
padding: 1em 0;
}
+ .container__body a {
+ color: #fff;
+ }
+ .container__body a:hover {
+ text-decoration: none;
+ }
.container__body--form {
width: 792px;
height: 100%;
max-width: 295px;
margin: 4em auto 0;
}
- .btn {
- cursor: pointer;
- transition: 300ms all ease-in-out;
- font-size: 1em;
- }
- .btn:hover {
- background-color: rgba(0,0,0,0.1);
- }
- .container__buttons--btn{
- width: 75px;
- height: 75px;
- border: 1px solid white;
- background: transparent;
- color: white;
+ .container__buttons--btn {
font-size: 24px;
}
.answer{
- display: flex;
- flex-direction: column;
padding: 1em 0 1em 0;
- flex-basis: 100%;
+ text-align: left;
}
.answer__title{
color: white;
top: 10px;
}
- button:focus {outline:0;}
- .restart{
- color: white;
- background: transparent;
- border: 1px solid white;
- width: 100px;
- height: 30px;
- position: relative;
+ .answer-cta {
+ color: #fff;
+ border: 2px solid;
+ padding: 1em 1.2em;
+ margin-bottom: 2em;
+ line-height: 1.5;
+ }
+ .answer-cta-title {
+ text-transform: uppercase;
+ margin-bottom: 0.5em;
+ line-height: 1;
+ }
+
+ button:focus {
+ outline: 0;
}
</style>
mainDescription: "Find the financing option that matches your needs",
selectCountry:"Select your country:",
countryInfo :"( Depending on country of commissioning we offer different financial services )",
+ ok: "OK",
yes: "Yes",
no: "No",
+ back: "Back",
Proposal: "Proposal",
answerTitle: "Based on your answers we propose:",
restart: "Restart",
+ contactUs: "Contact Us",
+ contactUsText: "For more information or a credit request, please contact our customer finance specialists directly at <a href='mailto:sandvikcredit@sandvik.com'>sandvikcredit@sandvik.com</a>",
questions: {
O: "Do you want to own your equipment from day 1?",
G: "Would you prefer to own the equipment at the end of the term, like a Hire Purchase agreement?",
},
T: {
"title": "",
- "content": ` <p> You selected a country where we offer trade finance. Reach out to your local Sandvik contact, they will investigate the best possible financing solution for your needs. Thank you.</p>`
+ "content": ` <p>You selected a country where we offer trade finance. Reach out to your local Sandvik contact, they will investigate the best possible financing solution for your needs. Thank you.</p>`
},
NotAvailable: {
"title": "",
},
NoMatch: {
"title": "",
- "content": `<p> We can´t match your needs with a financing solution applicable for the selected country, please restart the product selector.</p>`
+ "content": `<p>Reach out to your local Sandvik contact, to discuss a financing solution that fits your specific needs.</p>`
},
},
countries: {
projects / sandvik-service-selector.git / commitdiff