<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>
<div class="text">
<p class="text-small">Tagastamisele kuuluv toode:</p>
<div class="status-table ">
<table class="status-table__table tablesaw tablesaw-stack" data-tablesaw-mode="stack" data-tablesaw-hide-empty>
<thead class="status-table__head">
<tr class="status-table__row">
<th class="status-table__header status-table__header--component" scope="col">
<div class="check
check__stat status-table__check--header">
<input type="checkbox" id="check-all" name="check" value="" class="check__input" data-tablesaw-checkall>
<label for="check-all" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Vali kõik</span>
</label>
</div>
</th>
<th class="status-table__header" scope="col">
<span class="status-table__title">Toote kood</span>
</th>
<th class="status-table__header" scope="col">
<span class="status-table__title">Toote nimi</span>
</th>
<th class="status-table__header" scope="col">
<span class="status-table__title">Toodete arv</span>
</th>
</tr>
</thead>
<tbody class="status-table__body">
<tr class="status-table__row">
<td class="status-table__item ">
<div class="check
check__stat status-table__check">
<input type="checkbox" id="check-1" name="check" value="" class="check__input">
<label for="check-1" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text "></span>
</label>
</div>
</td>
<td class="status-table__item ">
<span class="text-truncate">457553</span>
</td>
<td class="status-table__item ">
<span class="text-truncate">Nurgasaag DeWalt DWS777</span>
</td>
<td class="status-table__item ">
<div class="textfield select ">
<label class="textfield__label select__label h-visually-hidden" for="select-1">
Toodete arv
</label>
<div class="textfield__inner">
<select name="select" id="select-1" class="textfield__input select__input">
<option value="1">
1
</option>
<option value="2">
2
</option>
<option value="3">
3
</option>
</select>
<svg class="icon select__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
</svg>
</div>
</div>
</td>
</tr>
<tr class="status-table__row">
<td class="status-table__item ">
<div class="check
check__stat status-table__check">
<input type="checkbox" id="check-2" name="check" value="" class="check__input">
<label for="check-2" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text "></span>
</label>
</div>
</td>
<td class="status-table__item ">
<span class="text-truncate">457553</span>
</td>
<td class="status-table__item ">
<span class="text-truncate">Nurgasaag DeWalt DWS777</span>
</td>
<td class="status-table__item ">
<div class="textfield select ">
<label class="textfield__label select__label h-visually-hidden" for="select-2">
Toodete arv
</label>
<div class="textfield__inner">
<select name="select" id="select-2" class="textfield__input select__input">
<option value="1">
1
</option>
<option value="2">
2
</option>
<option value="3">
3
</option>
</select>
<svg class="icon select__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
</svg>
</div>
</div>
</td>
</tr>
<tr class="status-table__row">
<td class="status-table__item ">
<div class="check
check__stat status-table__check">
<input type="checkbox" id="check-3" name="check" value="" class="check__input">
<label for="check-3" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text "></span>
</label>
</div>
</td>
<td class="status-table__item ">
<span class="text-truncate">457553</span>
</td>
<td class="status-table__item ">
<span class="text-truncate">Nurgasaag DeWalt DWS777</span>
</td>
<td class="status-table__item ">
<div class="textfield select ">
<label class="textfield__label select__label h-visually-hidden" for="select-3">
Toodete arv
</label>
<div class="textfield__inner">
<select name="select" id="select-3" class="textfield__input select__input">
<option value="1">
1
</option>
<option value="2">
2
</option>
<option value="3">
3
</option>
</select>
<svg class="icon select__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
</svg>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="divider divider--invisible"></div>
<div class="textfield select ">
<label class="textfield__label select__label " for="select-size">
Kapi suurus
</label>
<div class="textfield__inner">
<select name="select" id="select-size" class="textfield__input select__input">
<option value="S">
S: 38cm x 64cm x 9cm
</option>
<option value="M">
M: 38cm x 64cm x 19cm
</option>
<option value="L">
L: 38cm x 64cm x 39cm
</option>
<option value="XL">
XL: 64cm x 64cm x 60cm
</option>
<option value="XXL">
XXL: 117cm x 148cm x 65cm
</option>
</select>
<svg class="icon select__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
</svg>
</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": 2
}
}
<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>
<div class="text">
<p class="text-small">Tagastamisele kuuluv toode:</p>
<div class="status-table ">
<table class="status-table__table tablesaw tablesaw-stack" data-tablesaw-mode="stack" data-tablesaw-hide-empty>
<thead class="status-table__head">
<tr class="status-table__row">
<th class="status-table__header status-table__header--component" scope="col">
<div class="check
check__stat status-table__check--header">
<input type="checkbox" id="check-all" name="check" value="" class="check__input" data-tablesaw-checkall>
<label for="check-all" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Vali kõik</span>
</label>
</div>
</th>
<th class="status-table__header" scope="col">
<span class="status-table__title">Toote kood</span>
</th>
<th class="status-table__header" scope="col">
<span class="status-table__title">Toote nimi</span>
</th>
<th class="status-table__header" scope="col">
<span class="status-table__title">Toodete arv</span>
</th>
</tr>
</thead>
<tbody class="status-table__body">
<tr class="status-table__row">
<td class="status-table__item ">
<div class="check
check__stat status-table__check">
<input type="checkbox" id="check-1" name="check" value="" class="check__input">
<label for="check-1" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text "></span>
</label>
</div>
</td>
<td class="status-table__item ">
<span class="text-truncate">457553</span>
</td>
<td class="status-table__item ">
<span class="text-truncate">Nurgasaag DeWalt DWS777</span>
</td>
<td class="status-table__item ">
<div class="textfield select ">
<label class="textfield__label select__label h-visually-hidden" for="select-1">
Toodete arv
</label>
<div class="textfield__inner">
<select name="select" id="select-1" class="textfield__input select__input">
<option value="1">
1
</option>
<option value="2">
2
</option>
<option value="3">
3
</option>
</select>
<svg class="icon select__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
</svg>
</div>
</div>
</td>
</tr>
<tr class="status-table__row">
<td class="status-table__item ">
<div class="check
check__stat status-table__check">
<input type="checkbox" id="check-2" name="check" value="" class="check__input">
<label for="check-2" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text "></span>
</label>
</div>
</td>
<td class="status-table__item ">
<span class="text-truncate">457553</span>
</td>
<td class="status-table__item ">
<span class="text-truncate">Nurgasaag DeWalt DWS777</span>
</td>
<td class="status-table__item ">
<div class="textfield select ">
<label class="textfield__label select__label h-visually-hidden" for="select-2">
Toodete arv
</label>
<div class="textfield__inner">
<select name="select" id="select-2" class="textfield__input select__input">
<option value="1">
1
</option>
<option value="2">
2
</option>
<option value="3">
3
</option>
</select>
<svg class="icon select__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
</svg>
</div>
</div>
</td>
</tr>
<tr class="status-table__row">
<td class="status-table__item ">
<div class="check
check__stat status-table__check">
<input type="checkbox" id="check-3" name="check" value="" class="check__input">
<label for="check-3" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text "></span>
</label>
</div>
</td>
<td class="status-table__item ">
<span class="text-truncate">457553</span>
</td>
<td class="status-table__item ">
<span class="text-truncate">Nurgasaag DeWalt DWS777</span>
</td>
<td class="status-table__item ">
<div class="textfield select ">
<label class="textfield__label select__label h-visually-hidden" for="select-3">
Toodete arv
</label>
<div class="textfield__inner">
<select name="select" id="select-3" class="textfield__input select__input">
<option value="1">
1
</option>
<option value="2">
2
</option>
<option value="3">
3
</option>
</select>
<svg class="icon select__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
</svg>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="divider divider--invisible"></div>
<div class="textfield select ">
<label class="textfield__label select__label " for="select-size">
Kapi suurus
</label>
<div class="textfield__inner">
<select name="select" id="select-size" class="textfield__input select__input">
<option value="S">
S: 38cm x 64cm x 9cm
</option>
<option value="M">
M: 38cm x 64cm x 19cm
</option>
<option value="L">
L: 38cm x 64cm x 39cm
</option>
<option value="XL">
XL: 64cm x 64cm x 60cm
</option>
<option value="XXL">
XXL: 117cm x 148cm x 65cm
</option>
</select>
<svg class="icon select__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
</svg>
</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": 2
}
}
<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>
<div class="text">
<p class="text-small">Tagastamisele kuuluv toode:</p>
<div class="status-table ">
<table class="status-table__table tablesaw tablesaw-stack" data-tablesaw-mode="stack" data-tablesaw-hide-empty>
<thead class="status-table__head">
<tr class="status-table__row">
<th class="status-table__header status-table__header--component" scope="col">
<div class="check
check__stat status-table__check--header">
<input type="checkbox" id="check-all" name="check" value="" class="check__input" data-tablesaw-checkall>
<label for="check-all" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Vali kõik</span>
</label>
</div>
</th>
<th class="status-table__header" scope="col">
<span class="status-table__title">Toote kood</span>
</th>
<th class="status-table__header" scope="col">
<span class="status-table__title">Toote nimi</span>
</th>
<th class="status-table__header" scope="col">
<span class="status-table__title">Toodete arv</span>
</th>
</tr>
</thead>
<tbody class="status-table__body">
<tr class="status-table__row">
<td class="status-table__item ">
<div class="check
check__stat status-table__check">
<input type="checkbox" id="check-1" name="check" value="" class="check__input">
<label for="check-1" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text "></span>
</label>
</div>
</td>
<td class="status-table__item ">
<span class="text-truncate">457553</span>
</td>
<td class="status-table__item ">
<span class="text-truncate">Nurgasaag DeWalt DWS777</span>
</td>
<td class="status-table__item ">
<div class="textfield select ">
<label class="textfield__label select__label h-visually-hidden" for="select-1">
Toodete arv
</label>
<div class="textfield__inner">
<select name="select" id="select-1" class="textfield__input select__input">
<option value="1">
1
</option>
<option value="2">
2
</option>
<option value="3">
3
</option>
</select>
<svg class="icon select__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
</svg>
</div>
</div>
</td>
</tr>
<tr class="status-table__row">
<td class="status-table__item ">
<div class="check
check__stat status-table__check">
<input type="checkbox" id="check-2" name="check" value="" class="check__input">
<label for="check-2" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text "></span>
</label>
</div>
</td>
<td class="status-table__item ">
<span class="text-truncate">457553</span>
</td>
<td class="status-table__item ">
<span class="text-truncate">Nurgasaag DeWalt DWS777</span>
</td>
<td class="status-table__item ">
<div class="textfield select ">
<label class="textfield__label select__label h-visually-hidden" for="select-2">
Toodete arv
</label>
<div class="textfield__inner">
<select name="select" id="select-2" class="textfield__input select__input">
<option value="1">
1
</option>
<option value="2">
2
</option>
<option value="3">
3
</option>
</select>
<svg class="icon select__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
</svg>
</div>
</div>
</td>
</tr>
<tr class="status-table__row">
<td class="status-table__item ">
<div class="check
check__stat status-table__check">
<input type="checkbox" id="check-3" name="check" value="" class="check__input">
<label for="check-3" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text "></span>
</label>
</div>
</td>
<td class="status-table__item ">
<span class="text-truncate">457553</span>
</td>
<td class="status-table__item ">
<span class="text-truncate">Nurgasaag DeWalt DWS777</span>
</td>
<td class="status-table__item ">
<div class="textfield select ">
<label class="textfield__label select__label h-visually-hidden" for="select-3">
Toodete arv
</label>
<div class="textfield__inner">
<select name="select" id="select-3" class="textfield__input select__input">
<option value="1">
1
</option>
<option value="2">
2
</option>
<option value="3">
3
</option>
</select>
<svg class="icon select__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
</svg>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="divider divider--invisible"></div>
<div class="textfield select ">
<label class="textfield__label select__label " for="select-size">
Kapi suurus
</label>
<div class="textfield__inner">
<select name="select" id="select-size" class="textfield__input select__input">
<option value="S">
S: 38cm x 64cm x 9cm
</option>
<option value="M">
M: 38cm x 64cm x 19cm
</option>
<option value="L">
L: 38cm x 64cm x 39cm
</option>
<option value="XL">
XL: 64cm x 64cm x 60cm
</option>
<option value="XXL">
XXL: 117cm x 148cm x 65cm
</option>
</select>
<svg class="icon select__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
</svg>
</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": 2
}
}