<div class="container__head">
<h1 class="container__head--title">{{ $t("mainTitle") }}</h1>
<p class="container__head--description">
- Find the financing option that matches your needs
+ {{$t("mainDescription")}}
</p>
</div>
- <div class="container__body">
+ <div class="container__body" :class="`step-${step}`">
<div class="container__body--form">
<div v-if="step === 1">
<form class="container__form" action="">
- <label class="container__form--label" for="country">Select your country :</label>
+ <label class="container__form--label" for="country">{{$t("selectCountry")}}</label>
<span class="container__form--wrap">
+ <img class="container__form--arrow" src="../assets/arrow.svg" alt="">
<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" type="submit" @click.prevent="selectCountry()">OK</button>
+ <button class="container__form--btn btn" type="submit" @click.prevent="selectCountry()">{{ $t("OK") }}</button>
</span>
- <p class="container__form--info"> ( Depending on country of commissioning we offer different financial services )</p>
+ <p class="container__form--info">{{$t("countryInfo")}}</p>
</form>
</div>
<div class="step2" v-if="step === 2">
-
<p class="container__questions">{{ questions[questionsToAsk[this.currentQuestion]] }}</p>
<div class="container__buttons">
- <button class="container__buttons--btn" @click.prevent="handleAnswer('yes')">{{ $t("yes") }}</button>
- <button class="container__buttons--btn" @click.prevent="handleAnswer('no')">{{ $t("no") }}</button>
+ <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>
<div class="answer" v-if="step === 3">
- <h1 class="answer__title">Based on your answers.<br/>This is what we propose:</h1>
+ <h1 class="answer__title">{{$t("answerTitle")}}<br/>{{$t("answerProposal")}}</h1>
<ul class="answer__list">
<li class="answer__list--item" v-for="(responseID, index) in responses" :key="responseID">
<span v-if="responses.length > 1">{{ $t('Proposal') }} {{index + 1}} : </span>
{{possibleResponses[responseID].title}}.
</h3>
-
- <div v-html="possibleResponses[responseID].content"></div>
+ <div class="answer__content" v-html="possibleResponses[responseID].content"></div>
</li>
</ul>
- <button class="restart" @click.prevent="restart()">Restart</button>
+ <button class="restart btn" @click.prevent="restart()">{{$t("restart")}}</button>
</div>
</div>
</div>
<script>
export default {
- // mounted () {
- // this.questions = this.$t('questions');
- // this.possibleResponses = this.$t('responses');
- // },
- // computed: {
- // questions() {
- // return this.$t('questions');
- // },
- // possibleResponses() {
- // return this.$t('responses');
- // }
- // },
+
props: {
questions: Object,
possibleResponses: Object,
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
- * {
- padding: 0;
- margin: 0;
- font-family: "Aktiv Grotesk Corp Light"; }
-
+ @font-face {
+ font-family: Aktiv;
+ src: url(../assets/Aktiv.woff);
+ }
.container {
max-width: 792px;
- height: 550px; }
+ height: 100%;
+ margin: 0 auto;
+ display: flex;
+ flex-direction: column;
+ }
.container__head {
- max-width: 792px;
- padding: 1em 0 1em 1em;
+ padding: 1.875em;
background: white;
text-align: left;
}
padding: 1em 0 0 0; }
.container__body {
background: #0099ff;
- max-width: 792px;
min-height: 400px;
display: flex;
justify-content: center;
align-items: center
}
+ .container__body.step-3 {
+ min-height: 0;
+ padding: 1em 0;
+ }
.container__body--form {
width: 792px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
- margin: 0 1em 0 1em; }
+ margin: 0 1.75em; }
.container__form {
text-align: center; }
.container__form--label {
font-size: 24px; }
.container__form--wrap {
white-space: nowrap; }
+ select::-ms-expand {
+ display: none;
+ }
.container__form--select {
width: 130px;
height: 30px;
border: 0px;
color: #0099ff;
padding-left: 5px;
- margin: 0 5px 0 5px; }
+ -webkit-appearance: none;
+ margin: 0 5px 0 5px;
+ padding-right: 2.4em;
+ }
+ .container__form--arrow{
+ width: 12px;
+ position: relative;
+ left: 126px;
+ top: 2px;
+ pointer-events: none;
+ }
.container__form--btn {
width: 30px;
height: 30px;
}
.container__buttons{
display: flex;
- justify-content: space-around;
- margin-top: 2em;
+ justify-content: space-between;
+ max-width: 295px;
+ margin: 4em auto 0;
}
.container__buttons--btn{
width: 75px;
color: white;
font-size: 24px;
}
+ .btn {
+ cursor: pointer;
+ transition: 300ms all ease-in-out;
+ }
+ .btn:hover {
+ background-color: rgba(0,0,0,0.1);
+ }
.answer{
display: flex;
flex-direction: column;
padding: 1em 0 1em 0;
+ flex-basis: 100%;
}
.answer__title{
color: white;
list-style: none;
}
.answer__list--item{
- margin: 1em 0 1em 0;
+ margin: 1em 0 3em 0;
}
.answer__list--subtitle{
margin-bottom: 1em;
+ font-weight: lighter;
}
- .answer__list--description{
- margin-bottom: 1em;
+ .answer__content p {
+ margin-bottom: 1.3em;
+ font-size: 16px;
+ line-height: 1.5;
}
+ .answer__content ul{
+ margin-left: 1.75em;
+ list-style: none;
+ }
+ .answer__content li{
+ margin-bottom: 1.2em;
+ position: relative;
+ }
+ .answer__content ul li::before{
+ content: '';
+ display: block;
+ width: 10px;
+ height: 1px;
+ background: white;
+ position: absolute;
+ left: -1.6em;
+ top: 10px;
+ }
+
+ button:focus {outline:0;}
.restart{
color: white;
background: transparent;
border: 1px solid white;
width: 100px;
height: 30px;
+ position: relative;
}
</style>
const messages = {
en: {
mainTitle: "Invest 365 service selector the easy way to choose the right financing",
+ mainDescription: "Find the financing option that matches your needs",
+ selectCountry:"Select your country:",
+ countryInfo :"( Depending on country of commissioning we offer different financial services )",
yes: "Yes",
no: "No",
Proposal: "Proposal",
+ answerTitle: "Based on your answers.",
+ answerProposal: "This is what we propose:",
+ restart: "Restart",
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?",
responses: {
O: {
"title": "OwnIt",
- "content": `<p>lets you own equipment and it becomes an asset on your balance sheet from day 1. And you don’t have to pay the total cost up front.</p>
+ "content": `
<p>lets you own equipment and it becomes an asset on your balance sheet from day 1. And you don’t have to pay the total cost up front.</p>
<p>Making regular repayments without investing all of your capital at once is the smart way to plan better and stream-line your operations more cost-effectively.</p>
<ul>
},
G: {
"title": "GainIt",
- "content": "GGGGGGG"
+ "content": `<p> is an easy “pay as you operate” way to own Sandvik equipment. Just like a Hire Purchase agreement, you pay an agreed monthly fee until the equipment is paid for, then you take over full ownership. </p>
+
+ <p>Fixed monthly payments help you budget better, plan operations more cost-effectively, spread risks and enjoy higher profits.</p>
+ <ul>
+ <li>You own equipment at the end of the leasing period</li>
+ <li>Reduce upfront costs and use equipment quickly from order to installation</li>
+ <li>Payment holidays and balloon payments available</li>
+ <li>Easily combined with Sandvik’s service expertise and protection services</li>
+ </ul>
+ <p>Fixed payments for less risk and greater profit.</p>
+ <p>Reach out to your local Sandvik contact, to get the equipment / services you want with the financing solution that fits your needs.</p>`
},
R: {
"title": "RunIt",
- "content": "RR"
+ "content": `<p> is your way to get the rewards of using the industry’s best equipment without the risks of ownership.</p>
+
+ <p>Enter into a rental agreement from just a few months to up to four years, leasing either new, reborn or overhauled equipment. </p>
+
+ <p>Fixed monthly payments help you budget better, plan operations more cost-effectively, spread risks and enjoy higher profits.</p>
+ <ul>
+ <li>Low capital outlay</li>
+ <li>Fixed payments</li>
+ <li>Invest new or reborn/overhaul equipment</li>
+ <li>Easily combined with Sandvik’s service expertise and protection services</li>
+ </ul>
+ <p>Removes the cost of owning and running your equipment</p>
+ <p>Reach out to your local Sandvik contact, to get the equipment / services you want with the financing solution that fits your needs.</p>`
},
T: {
"title": "",
- "content": "traditional"
+ "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": "",
- "content": "Not available :("
+ "content": `<p>You selected a country we don´t offer group-wide financing solution to yet. Reach out to your closest Sandvik contact, they will investigate the best possible financing solution for your needs. Thank you.</p>`
},
NoMatch: {
"title": "",
- "content": "No match :("
+ "content": `<p> We can´t match your needs with a financing solution applicable for the selected country, please restart the product selector.</p>`
},
},
countries: {
- "PACIFIC_ISLANDS": "Pacific Islands",
"AF": "Afghanistan",
"AL": "Albania",
"DZ": "Algeria",
"XK": "Kosovo"
}
},
- fr: {
- mainTitle: "Bonjour !!! Invest 365 service selector the easy way to choose the right financing",
- yes: "Oui",
- no: "Non",
- Proposal: "Proposition",
- questions: {
- O: "FR == Do you want to own your equipment from day 1?",
- G: "FR == Would you prefer to own the equipment at the end of the term, like a Hire Purchase agreement?",
- R: "FR == Do you want to use the equipment of periods of less than four years and never own the equipment? "
- },
- responses: {
- O: {
- "title": "OwnIt",
- "content": `<p>FR lets you own equipment and it becomes an asset on your balance sheet from day 1. And you don’t have to pay the total cost up front.</p>
-
- <p>Making regular repayments without investing all of your capital at once is the smart way to plan better and stream-line your operations more cost-effectively.</p>
- <ul>
- <li>You own the equipment from day 1</li>
- <li>Structure payments to your performance predictions</li>
- <li>Invest in new or reborn/overhaul equipment</li>
- <li>Easily combined with Sandvik’s service expertise and protection services</li>
- </ul>
- <p>Own it now. Pay it over time.</p>
- <p>Reach out to your local Sandvik contact, to get the equipment / services you want with the financing solution that fits your needs.</p>`
- },
- G: {
- "title": "GainIt",
- "content": "GGGGGGG"
- },
- R: {
- "title": "RunIt",
- "content": "RR"
- },
- T: {
- "title": "",
- "content": "FR traditional"
- },
- NotAvailable: {
- "title": "",
- "content": " FR Not available :("
- },
- NoMatch: {
- "title": "",
- "content": "FR No match :("
- },
-
- // OwnIt: "<p class='answer__list--description'>"+"lets you own equipment and it becomes an asset on your balance sheet from day 1. And you don’t have to pay the total cost up front. \n" + "</p>"+
- // "\n" +
- // "<p class='answer__list--description'>"+"Making regular repayments without investing all of your capital at once is the smart way to plan better and stream-line your operations more cost-effectively. \n" + "</p>"+
- // "<ul>" +
- // "<li>You own the equipment from day 1</li>" +
- // "<li>Structure payments to your performance predictions </li>" +
- // "<li>Invest in new or reborn/overhaul equipment</li>" +
- // "<li>Easily combined with Sandvik’s service expertise and protection services</li>" +
- // "</ul>" +
- // "<p class='answer__list--description'>"+ "Own it now. Pay it over time. \n" +"</p>"+
- // "\n" +
- // "<p class='answer__list--description' >"+"Reach out to your local Sandvik contact, to get the equipment / services you want with the financing solution that fits your needs. "+"<p>",
- },
- countries: {
- "PACIFIC_ISLANDS": "Pacific Islands",
- "AF": "Afghanistan",
- "AL": "Albanie",
- "DZ": "Algérie",
- "AS": "Samoa américaine",
- "AD": "Andorre",
- "AO": "Angola",
- "AI": "Anguilla",
- "AQ": "Antarctique",
- "AG": "Antigua et Barbuda",
- "AR": "Argentine",
- "AM": "Arménie",
- "AW": "Aruba",
- "AU": "Australie",
- "AT": "Autriche",
- "AZ": "Azerbaidjan",
- "BS": "Bahamas",
- "BH": "Bahrein",
- "BD": "Bangladesh",
- "BB": "Barbade",
- "BY": "Bielorussie",
- "BE": "Belgique",
- "BZ": "Belize",
- "BJ": "Bénin",
- "BM": "Bermudes",
- "BT": "Bhoutan",
- "BO": "Bolivie",
- "BA": "Bosnie-Herzégovine",
- "BW": "Botswana",
- "BV": "Île Bouvet",
- "BR": "Brésil",
- "IO": "Océan Indien Britannique",
- "BN": "Brunei Darussalam",
- "BG": "Bulgarie",
- "BF": "Burkina Faso",
- "BI": "Burundi",
- "KH": "Cambodge",
- "CM": "Cameroun",
- "CA": "Canada",
- "CV": "Cap-Vert",
- "KY": "Caïmanes",
- "CF": "Centrafricaine, République",
- "TD": "Tchad",
- "CL": "Chili",
- "CN": "Chine",
- "CX": "Île Christmas",
- "CC": "Cocos",
- "CO": "Colombie",
- "KM": "Comores",
- "CG": "Congo, République populaire",
- "CD": "Congo, République démocratique",
- "CK": "Îles Cook",
- "CR": "Costa Rica",
- "CI": "Côte-d'Ivoire",
- "HR": "Croatie",
- "CU": "Cuba",
- "CY": "Chypre",
- "CZ": "Tchéquie",
- "DK": "Danemark",
- "DJ": "Djibouti",
- "DM": "Dominique",
- "DO": "République Dominicaine",
- "EC": "Équateur",
- "EG": "Égypte",
- "SV": "El Salvador",
- "GQ": "Guinée équatoriale",
- "ER": "Érythrée",
- "EE": "Estonie",
- "ET": "Éthiopie",
- "FK": "Îles Malouines",
- "FO": "Îles Féroé",
- "FJ": "Fidji",
- "FI": "Finlande",
- "FR": "France",
- "GF": "Guyane française",
- "PF": "Polynésie française",
- "TF": "Terres australes françaises",
- "GA": "Gabon",
- "GM": "Gambie",
- "GE": "Géorgie",
- "DE": "Allemagne",
- "GH": "Ghana",
- "GI": "Gibraltar",
- "GR": "Grèce",
- "GL": "Groenland",
- "GD": "Grenada",
- "GP": "Guadeloupe",
- "GU": "Guam",
- "GT": "Guatemala",
- "GN": "Guinée",
- "GW": "Guinée-Bissau",
- "GY": "Guyana",
- "HT": "Haïti",
- "HM": "Îles Heard-et-MacDonald",
- "VA": "Saint-Siège",
- "HN": "Honduras",
- "HK": "Hong Kong",
- "HU": "Hongrie",
- "IS": "Islande",
- "IN": "Inde",
- "ID": "Indonésie",
- "IR": "Iran",
- "IQ": "Irak",
- "IE": "Irlande",
- "IL": "Israël",
- "IT": "Italie",
- "JM": "Jamaïque",
- "JP": "Japon",
- "JO": "Jordanie",
- "KZ": "Kazakhstan",
- "KE": "Kenya",
- "KI": "Kiribati",
- "KP": "Corée du Nord, République populaire démocratique",
- "KR": "Corée du Sud, République",
- "KW": "Koweit",
- "KG": "Kirghistan",
- "LA": "Laos",
- "LV": "Lettonie",
- "LB": "Liban",
- "LS": "Lesotho",
- "LR": "Libéria",
- "LY": "Libye",
- "LI": "Liechtenstein",
- "LT": "Lituanie",
- "LU": "Luxembourg, Grand-Duché",
- "MO": "Macao",
- "MK": "Macédoine, Ex-République yougoslave",
- "MG": "Madagascar",
- "MW": "Malawi",
- "MY": "Malaisie",
- "MV": "Maldives",
- "ML": "Mali",
- "MT": "Malte",
- "MH": "Îles Marshall",
- "MQ": "Martinique",
- "MR": "Mauritanie",
- "MU": "Maurice",
- "YT": "Mayotte",
- "MX": "Mexique",
- "FM": "Micronésie",
- "MD": "Moldavie",
- "MC": "Monaco",
- "MN": "Mongolie",
- "MS": "Montserrat",
- "MA": "Maroc",
- "MZ": "Mozambique",
- "MM": "Myanmar",
- "NA": "Namibie",
- "NR": "Nauru",
- "NP": "Népal",
- "NL": "Pays-Bas",
- "NC": "Nouvelle-Calédonie",
- "NZ": "Nouvelle-Zélande",
- "NI": "Nicaragua",
- "NE": "Niger",
- "NG": "Nigéria",
- "NU": "Niué",
- "NF": "Île Norfolk",
- "MP": "Mariannes du Nord",
- "NO": "Norvège",
- "OM": "Oman",
- "PK": "Pakistan",
- "PW": "Palau",
- "PS": "Palestine",
- "PA": "Panama",
- "PG": "Papouasie-Nouvelle-Guinée",
- "PY": "Paraguay",
- "PE": "Pérou",
- "PH": "Philippines",
- "PN": "Pitcairn",
- "PL": "Pologne",
- "PT": "Portugal",
- "PR": "Porto Rico",
- "QA": "Qatar",
- "RE": "Réunion",
- "RO": "Roumanie",
- "RU": "Russie",
- "RW": "Rwanda",
- "SH": "Sainte-Hélène",
- "KN": "Saint-Christophe-et-Niévès",
- "LC": "Sainte-Lucie",
- "PM": "Saint Pierre and Miquelon",
- "VC": "Saint-Vincent et les Grenadines",
- "WS": "Samoa",
- "SM": "Saint-Marin",
- "ST": "São Tomé et Principe",
- "SA": "Arabie Saoudite",
- "SN": "Sénégal",
- "SC": "Seychelles",
- "SL": "Sierra Leone",
- "SG": "Singapour",
- "SK": "Slovaquie",
- "SI": "Slovénie",
- "SB": "Salomon",
- "SO": "Somalie",
- "ZA": "Afrique du Sud",
- "GS": "Géorgie du Sud-et-les Îles Sandwich du Sud",
- "ES": "Espagne",
- "LK": "Sri Lanka",
- "SD": "Soudan",
- "SR": "Suriname",
- "SJ": "Svalbard et Île Jan Mayen",
- "SZ": "Ngwane, Royaume du Swaziland",
- "SE": "Suède",
- "CH": "Suisse",
- "SY": "Syrie",
- "TW": "Taïwan",
- "TJ": "Tadjikistan",
- "TZ": "Tanzanie, République unie",
- "TH": "Thaïlande",
- "TL": "Timor Leste",
- "TG": "Togo",
- "TK": "Tokelau",
- "TO": "Tonga",
- "TT": "Trinidad et Tobago",
- "TN": "Tunisie",
- "TR": "Turquie",
- "TM": "Turkménistan",
- "TC": "Îles Turques-et-Caïques",
- "TV": "Tuvalu",
- "UG": "Ouganda",
- "UA": "Ukraine",
- "AE": "Émirats Arabes Unis",
- "GB": "Royaume-Uni",
- "US": "États-Unis d'Amérique",
- "UM": "Îles mineures éloignées des États-Unis",
- "UY": "Uruguay",
- "UZ": "Ouzbékistan",
- "VU": "Vanuatu",
- "VE": "Venezuela",
- "VN": "Vietnam",
- "VG": "Îles vierges britanniques",
- "VI": "Îles vierges américaines",
- "WF": "Wallis et Futuna",
- "EH": "Sahara occidental",
- "YE": "Yémen",
- "ZM": "Zambie",
- "ZW": "Zimbabwe",
- "AX": "Åland",
- "BQ": "Bonaire, Saint-Eustache et Saba",
- "CW": "Curaçao",
- "GG": "Guernesey",
- "IM": "Île de Man",
- "JE": "Jersey",
- "ME": "Monténégro",
- "BL": "Saint-Barthélemy",
- "MF": "Saint-Martin (partie française)",
- "RS": "Serbie",
- "SX": "Saint-Martin (partie néerlandaise)",
- "SS": "Sud-Soudan",
- "XK": "Kosovo"
- }
- }
};
// Create VueI18n instance with options
projects / sandvik-service-selector.git / commitdiff