<div class="page-title page-title--full-width">
<div class="h-container">
<h1 class="page-title__text">Toodete tagastus</h1>
</div>
</div>
<div class="h-container">
<div class="divider divider--invisible divider--md"></div>
<div class="grid">
<div class="grid__col grid__col--lg-8 grid__col--xl-6">
<h2 class="h3">Ramirent pakub toodete tagastuse teenust läbi kapisüsteemi</h2>
<div class="divider divider--invisible divider--xs"></div>
<div class="text">
<p>
Toote või mitme toote tagastamiseks sisesta toote kood (Leiad selle <a href="#">aktiivsete tehingute</a> vaatest <strong>“Toote kood”</strong> väljalt) või Lepingu number mis antud toodega seotud on. Leiad selle <a href="#">lepingute</a> vaatest <strong>“Lepingu nr”</strong> väljalt.
</p>
<p>
Tagastuskoodiks on QR kood mida tuleb skanneerida tagastusmasinas.<br>
<a href="#">Vaata siit</a> kus on Ramirendi tagastuskapid.
</p>
</div>
<div class="divider divider--invisible divider--xs"></div>
<div class="grid">
<div class="grid__col grid__col--sm-2">
<div class="textfield">
<label class="textfield__label " for="text1">
Toote kood
</label>
<div class="textfield__inner">
<input class="textfield__input" type="text" id="text1" name="textfield">
</div>
</div>
</div>
<div class="grid__col grid__col--sm-2">
<div class="textfield">
<label class="textfield__label " for="text2">
Lepingu nr
</label>
<div class="textfield__inner">
<input class="textfield__input" type="text" id="text2" name="textfield">
</div>
</div>
</div>
</div>
<div class="divider divider--invisible"></div>
<button type="button" class="button button--tiny">
<span class="button__inner">
<span class="button__text">Loo tagastuskood</span>
</span>
</button>
</div>
</div>
</div>
{% include '@page-title' with { class: '', modifier: '', isFullWidth: true, data: { title: data.title } } %}
<div class="h-container">
{% include '@divider' with { class: '', modifier: 'divider--invisible divider--md' } %}
<div class="grid">
<div class="grid__col grid__col--lg-8 grid__col--xl-6">
<h2 class="h3">Ramirent pakub toodete tagastuse teenust läbi kapisüsteemi</h2>
{% include '@divider' with { class: '', modifier: 'divider--invisible divider--xs' } %}
<div class="text">
<p>
Toote või mitme toote tagastamiseks sisesta toote kood (Leiad selle <a href="#">aktiivsete tehingute</a> vaatest <strong>“Toote kood”</strong> väljalt) või Lepingu number mis antud toodega seotud on. Leiad selle <a href="#">lepingute</a> vaatest <strong>“Lepingu nr”</strong> väljalt.
</p>
<p>
Tagastuskoodiks on QR kood mida tuleb skanneerida tagastusmasinas.<br>
<a href="#">Vaata siit</a> kus on Ramirendi tagastuskapid.
</p>
</div>
{% include '@divider' with { class: '', modifier: 'divider--invisible divider--xs' } %}
<div class="grid">
<div class="grid__col grid__col--sm-2">
{% include '@textfield' with { class: '', modifier: '', data: data.productTextfield } %}
</div>
<div class="grid__col grid__col--sm-2">
{% include '@textfield' with { class: '', modifier: '', data: data.contractTextfield } %}
</div>
</div>
{% include '@divider' with { class: '', modifier: 'divider--invisible' } %}
{# Step 2 #}
{% if data.step >= 2 %}
<div class="text">
<p class="text-small">Tagastamisele kuuluv toode:</p>
{% include '@status-table' with { class: '', modifier: '', data: data.table } %}
</div>
{% include '@divider' with { class: '', modifier: 'divider--invisible' } %}
{% include '@select' with { class: '', modifier: '', data: data.sizeSelect } %}
{% include '@divider' with { class: '', modifier: 'divider--invisible' } %}
{% endif %}
{# Step 3 #}
{% if data.step >= 3 %}
<div class="grid">
<div class="grid__col grid__col--sm-2">
<div class="product-container text">
{% include '@image' with { class: '', modifier: 'image--full', data: data.image } %}
<p>
Pista toode Lorem Ipsum kappi enne kella 14:15!
</p>
</div>
</div>
</div>
{% include '@divider' with { class: '', modifier: 'divider--invisible' } %}
{% endif %}
{% include '@button' with { class: '', modifier: 'button--tiny', data: data.button } %}
</div>
</div>
</div>
{
"language": "en-US",
"data": {
"title": "Toodete tagastus",
"productTextfield": {
"label": "Toote kood",
"id": "text1",
"name": "textfield"
},
"contractTextfield": {
"label": "Lepingu nr",
"id": "text2",
"name": "textfield"
},
"table": {
"headers": [
{
"component": "check",
"componentData": {
"id": "check-all",
"name": "check",
"label": "Vali kõik",
"componentClass": "status-table__check--header",
"modifier": "check__stat",
"attributes": "data-tablesaw-checkall"
}
},
{
"label": "Toote kood"
},
{
"label": "Toote nimi"
},
{
"label": "Toodete arv"
}
],
"rows": [
{
"cells": [
{
"component": "check",
"componentData": {
"id": "check-1",
"name": "check",
"componentClass": "status-table__check",
"modifier": "check__stat"
}
},
{
"content": "<span class=\"text-truncate\">457553</span>"
},
{
"content": "<span class=\"text-truncate\">Nurgasaag DeWalt DWS777</span>"
},
{
"component": "select",
"componentData": {
"id": "select-1",
"name": "select",
"label": "Toodete arv",
"isLabelHidden": true,
"iconName": "chevron-bottom",
"options": [
{
"name": "1",
"value": "1"
},
{
"name": "2",
"value": "2"
},
{
"name": "3",
"value": "3"
}
]
}
}
]
},
{
"cells": [
{
"component": "check",
"componentData": {
"id": "check-2",
"name": "check",
"componentClass": "status-table__check",
"modifier": "check__stat"
}
},
{
"content": "<span class=\"text-truncate\">457553</span>"
},
{
"content": "<span class=\"text-truncate\">Nurgasaag DeWalt DWS777</span>"
},
{
"component": "select",
"componentData": {
"id": "select-2",
"name": "select",
"label": "Toodete arv",
"isLabelHidden": true,
"iconName": "chevron-bottom",
"options": [
{
"name": "1",
"value": "1"
},
{
"name": "2",
"value": "2"
},
{
"name": "3",
"value": "3"
}
]
}
}
]
},
{
"cells": [
{
"component": "check",
"componentData": {
"id": "check-3",
"name": "check",
"componentClass": "status-table__check",
"modifier": "check__stat"
}
},
{
"content": "<span class=\"text-truncate\">457553</span>"
},
{
"content": "<span class=\"text-truncate\">Nurgasaag DeWalt DWS777</span>"
},
{
"component": "select",
"componentData": {
"id": "select-3",
"name": "select",
"label": "Toodete arv",
"isLabelHidden": true,
"iconName": "chevron-bottom",
"options": [
{
"name": "1",
"value": "1"
},
{
"name": "2",
"value": "2"
},
{
"name": "3",
"value": "3"
}
]
}
}
]
}
]
},
"sizeSelect": {
"id": "select-size",
"name": "select",
"label": "Kapi suurus",
"iconName": "chevron-bottom",
"options": [
{
"value": "S",
"name": "S: 38cm x 64cm x 9cm"
},
{
"value": "M",
"name": "M: 38cm x 64cm x 19cm"
},
{
"value": "L",
"name": "L: 38cm x 64cm x 39cm"
},
{
"value": "XL",
"name": "XL: 64cm x 64cm x 60cm"
},
{
"value": "XXL",
"name": "XXL: 117cm x 148cm x 65cm"
}
]
},
"image": {
"srcset": "//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w, //via.placeholder.com/300x300 300w, //via.placeholder.com/400x400 400w",
"alt": "QR kood",
"aspectRatio": {
"width": 100,
"height": 100
}
},
"button": {
"text": "Loo tagastuskood"
},
"step": 1
}
}