Copy environment

Order Confirmation 

<div class="page-title page-title--full-width">
    <div class="h-container">
        <h1 class="page-title__text">Tellimuse kinnitamine</h1>
    </div>
</div>
<div class="h-container">
    <div class="h-cancel-container">

        <div class="alert
    alert--success">
            <div class="alert__left">
                <svg class="icon  alert__icon" focusable="false">
                    <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check-outline"></use>
                </svg>
                <div class="alert__content text">
                    ”KETTSAAG ELEKTRILINE 2KW” lisati Sinu rendikorvi.
                </div>
            </div>
        </div>
    </div>

    <section class="section section--order-confirmation-text ">
        <div class="grid">
            <div class="grid__col grid__col--xl-10">
                <h2 class="h4 h4--margin">Mida tähendab, et tellimus on esitatud kinnitamisele?</h2>
                <p class="text-black text-small text-margin">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip ex
                    ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
                    eu fugiat
                    nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
                    mollit
                    anim id est laborum.
                </p>
                <p class="text-black bold text-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                    eiusmod tempor incididunt ut labore et dolore
                    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
                    ea
                    commodo consequat.
                </p>
            </div>
        </div>

    </section>

    <section class="section section--order-confirmation-table ">
        <div class="grid">
            <div class="grid__col grid__col--xl-10">
                <div class="order-summary">
                    <div class="order-summary__header">
                        <h2>Tellimuse kokkuvõte</h2>
                    </div>
                    <div class="order-summary__content">
                        <table class="order-summary__table tablesaw" data-tablesaw-mode="stack" data-tablesaw-hide-empty>
                            <thead class="order-summary__head">
                                <tr class="order-summary__row">
                                    <th class="order-summary__table-header h-text-left text-medium" scope="col">
                                        <span class="">Toode</span>
                                    </th>
                                    <th class="order-summary__table-header h-text-left text-medium" scope="col">
                                        <span class="">Toote hind</span>
                                    </th>
                                    <th class="order-summary__table-header h-text-left text-medium" scope="col">
                                        <span class="">Kogus</span>
                                    </th>
                                    <th class="order-summary__table-header h-text-left text-medium" scope="col">
                                        <span class="">Rendiperiood</span>
                                    </th>
                                    <th class="order-summary__table-header h-text-left text-medium" scope="col">
                                        <span class="">Transport</span>
                                    </th>
                                    <th class="order-summary__table-header h-text-left text-medium" scope="col">
                                        <span class="">Rendipunkt/aadress</span>
                                    </th>
                                </tr>
                            </thead>
                            <tbody class="order-summary__body">
                                <tr class="order-summary__row">
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">Akukäärtõstuk 2.5M manuaalne</span>
                                    </td>
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">16€/päev</span>
                                    </td>
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">100 tk</span>
                                    </td>
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">01.08 2022 - 22.02.2023</span>
                                    </td>
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">Ei</span>
                                    </td>
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">Uus-Paldiski mnt 3, Keila</span>
                                    </td>
                                </tr>
                                <tr class="order-summary__row">
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">Akukäärtõstuk 2.5M manuaalne</span>
                                    </td>
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">16€/päev</span>
                                    </td>
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">100 tk</span>
                                    </td>
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">01.08 2022 - 22.02.2023</span>
                                    </td>
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">Ei</span>
                                    </td>
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">Uus-Paldiski mnt 3, Keila</span>
                                    </td>
                                </tr>
                                <tr class="order-summary__row">
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">Akukäärtõstuk 2.5M manuaalne</span>
                                    </td>
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">16€/päev</span>
                                    </td>
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">100 tk</span>
                                    </td>
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">01.08 2022 - 22.02.2023</span>
                                    </td>
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">Ei</span>
                                    </td>
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">Uus-Paldiski mnt 3, Keila</span>
                                    </td>
                                </tr>
                                <tr class="order-summary__row">
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">Akukäärtõstuk 2.5M manuaalne</span>
                                    </td>
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">16€/päev</span>
                                    </td>
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">100 tk</span>
                                    </td>
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">01.08 2022 - 22.02.2023</span>
                                    </td>
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">Ei</span>
                                    </td>
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">Uus-Paldiski mnt 3, Keila</span>
                                    </td>
                                </tr>
                                <tr class="order-summary__row">
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">Akukäärtõstuk 2.5M manuaalne</span>
                                    </td>
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">16€/päev</span>
                                    </td>
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">100 tk</span>
                                    </td>
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">01.08 2022 - 22.02.2023</span>
                                    </td>
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">Ei</span>
                                    </td>
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">Uus-Paldiski mnt 3, Keila</span>
                                    </td>
                                </tr>
                                <tr class="order-summary__row">
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">Akukäärtõstuk 2.5M manuaalne</span>
                                    </td>
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">16€/päev</span>
                                    </td>
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">100 tk</span>
                                    </td>
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">01.08 2022 - 22.02.2023</span>
                                    </td>
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">Ei</span>
                                    </td>
                                    <td class="order-summary__table-cell h-text-left">
                                        <span class="">Uus-Paldiski mnt 3, Keila</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </section>

    <section class="section section--order-confirmation-faq ">
        <h2 class="h3">KKK</h2>
        <div class="accordion js-accordion-group  ">
            <div class="accordion__item js-accordion" id="accordion-item-1">
                <a href="#accordion-item-1" class="accordion__header js-accordion-control">
                    <svg class="icon  accordion__icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
                    </svg>
                    <div class="accordion__title">Mis juhtub siis, kui ma ei saa kaupa valitud ajaks tagastatud?</div>
                </a>
                <div class="accordion__content js-accordion-content">
                    <div class="accordion__inner">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </div>
                </div>
            </div>
            <div class="accordion__item js-accordion" id="accordion-item-2">
                <a href="#accordion-item-2" class="accordion__header js-accordion-control">
                    <svg class="icon  accordion__icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
                    </svg>
                    <div class="accordion__title">Kuidas toimub kauba tagastamine? </div>
                </a>
                <div class="accordion__content js-accordion-content">
                    <div class="accordion__inner">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </div>
                </div>
            </div>
            <div class="accordion__item js-accordion" id="accordion-item-3">
                <a href="#accordion-item-3" class="accordion__header js-accordion-control">
                    <svg class="icon  accordion__icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
                    </svg>
                    <div class="accordion__title">Kus ma näen transpordikulu?</div>
                </a>
                <div class="accordion__content js-accordion-content">
                    <div class="accordion__inner">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </div>
                </div>
            </div>
            <div class="accordion__item js-accordion" id="accordion-item-4">
                <a href="#accordion-item-4" class="accordion__header js-accordion-control">
                    <svg class="icon  accordion__icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
                    </svg>
                    <div class="accordion__title">Kuidas saan katkestada või muuta tellimust?</div>
                </a>
                <div class="accordion__content js-accordion-content">
                    <div class="accordion__inner">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </div>
                </div>
            </div>
        </div>

    </section>

    <section class="section section--checkout-buttons ">
        <div class="grid grid--middle-xs grid--column grid--row-lg grid--reverse-lg grid--between-lg">
            <div class="grid__col grid__col--min">

                <a href="#" class="button">
                    <span class="button__inner">
                        <span class="button__text">Lae alla tellimuse PDF</span>
                    </span>
                </a>
            </div>
            <div class="grid__col grid__col--min">

                <a href="#" class="button button--text">
                    <span class="button__inner">
                        <span class="button__text">Tagasi poodlema</span>
                    </span>
                </a>
            </div>
        </div>

    </section>
</div>
 
{% include '@page-title' with { data: { title: 'Tellimuse kinnitamine' }, isFullWidth: true } %}
<div class="h-container">
    <div class="h-cancel-container">
        {% include '@alert' with {
            data: data.alert
        } %}
    </div>
    {% set sectionContent %}
        <div class="grid">
            <div class="grid__col grid__col--xl-10">
                <h2 class="h4 h4--margin">Mida tähendab, et tellimus on esitatud kinnitamisele?</h2>
                <p class="text-black text-small text-margin">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip ex
                    ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
                    eu fugiat
                    nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
                    mollit
                    anim id est laborum.
                </p>
                <p class="text-black bold text-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                    eiusmod tempor incididunt ut labore et dolore
                    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
                    ea
                    commodo consequat.
                </p>
            </div>
        </div>
    {% endset %}
    {% include '@section' with {
        class: '',
        modifier: 'section--order-confirmation-text'
    } %}
    {% set sectionContent %}
        <div class="grid">
            <div class="grid__col grid__col--xl-10">
                {% include '@order-summary' with { data: data.orderSummary } %}
            </div>
        </div>
    {% endset %}
    {% include '@section' with { class: '', modifier: 'section--order-confirmation-table'} %}
    {% set sectionContent %}
        <h2 class="h3">KKK</h2>
        {% include '@accordion' with { data: data.accordion, modifier: '', class: ''} %}
    {% endset %}
    {% include '@section' with { class: '', modifier: 'section--order-confirmation-faq'} %}
    {% set sectionContent %}
        <div class="grid grid--middle-xs grid--column grid--row-lg grid--reverse-lg grid--between-lg">
            <div class="grid__col grid__col--min">
                {% include '@button' with {
                    data: {
                        link: '#',
                        text: 'Lae alla tellimuse PDF'
                    },
                    modifier: '',
                    class: ''
                } %}
            </div>
            <div class="grid__col grid__col--min">
                {% include '@button' with {
                    data: {
                        link: "#",
                        text: 'Tagasi poodlema'
                    },
                    modifier: 'button--text',
                    class: ''
                } %}
            </div>
        </div>
    {% endset %}
    {% include '@section' with { class: '', modifier: 'section--checkout-buttons' } %}
</div>

{
  "language": "en-US",
  "data": {
    "alert": {
      "content": "”KETTSAAG ELEKTRILINE 2KW” lisati Sinu rendikorvi.",
      "closeButtonLabel": "Close",
      "cartText": null
    },
    "orderSummary": {
      "header": {
        "text": "Tellimuse kokkuvõte"
      },
      "headers": [
        {
          "title": "Toode"
        },
        {
          "title": "Toote hind"
        },
        {
          "title": "Kogus"
        },
        {
          "title": "Rendiperiood"
        },
        {
          "title": "Transport"
        },
        {
          "title": "Rendipunkt/aadress"
        }
      ],
      "rows": [
        {
          "cells": [
            {
              "content": "Akukäärtõstuk 2.5M manuaalne"
            },
            {
              "content": "16€/päev"
            },
            {
              "content": "100 tk"
            },
            {
              "content": "01.08 2022 - 22.02.2023"
            },
            {
              "content": "Ei"
            },
            {
              "content": "Uus-Paldiski mnt 3, Keila"
            }
          ]
        },
        {
          "cells": [
            {
              "content": "Akukäärtõstuk 2.5M manuaalne"
            },
            {
              "content": "16€/päev"
            },
            {
              "content": "100 tk"
            },
            {
              "content": "01.08 2022 - 22.02.2023"
            },
            {
              "content": "Ei"
            },
            {
              "content": "Uus-Paldiski mnt 3, Keila"
            }
          ]
        },
        {
          "cells": [
            {
              "content": "Akukäärtõstuk 2.5M manuaalne"
            },
            {
              "content": "16€/päev"
            },
            {
              "content": "100 tk"
            },
            {
              "content": "01.08 2022 - 22.02.2023"
            },
            {
              "content": "Ei"
            },
            {
              "content": "Uus-Paldiski mnt 3, Keila"
            }
          ]
        },
        {
          "cells": [
            {
              "content": "Akukäärtõstuk 2.5M manuaalne"
            },
            {
              "content": "16€/päev"
            },
            {
              "content": "100 tk"
            },
            {
              "content": "01.08 2022 - 22.02.2023"
            },
            {
              "content": "Ei"
            },
            {
              "content": "Uus-Paldiski mnt 3, Keila"
            }
          ]
        },
        {
          "cells": [
            {
              "content": "Akukäärtõstuk 2.5M manuaalne"
            },
            {
              "content": "16€/päev"
            },
            {
              "content": "100 tk"
            },
            {
              "content": "01.08 2022 - 22.02.2023"
            },
            {
              "content": "Ei"
            },
            {
              "content": "Uus-Paldiski mnt 3, Keila"
            }
          ]
        },
        {
          "cells": [
            {
              "content": "Akukäärtõstuk 2.5M manuaalne"
            },
            {
              "content": "16€/päev"
            },
            {
              "content": "100 tk"
            },
            {
              "content": "01.08 2022 - 22.02.2023"
            },
            {
              "content": "Ei"
            },
            {
              "content": "Uus-Paldiski mnt 3, Keila"
            }
          ]
        }
      ]
    },
    "accordion": {
      "items": [
        {
          "id": "accordion-item-1",
          "title": "Mis juhtub siis, kui ma ei saa kaupa valitud ajaks tagastatud?",
          "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        },
        {
          "id": "accordion-item-2",
          "title": "Kuidas toimub kauba tagastamine? ",
          "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        },
        {
          "id": "accordion-item-3",
          "title": "Kus ma näen transpordikulu?",
          "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        },
        {
          "id": "accordion-item-4",
          "title": "Kuidas saan katkestada või muuta tellimust?",
          "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        }
      ]
    }
  }
}