wickes-css2 2.97.0-IM-1593-code-width.1 → 2.97.0-develop.1

package/src/components/ti.hbs

@@ -1,4 +1,13 @@
 <section class="ti__step ti__step1">
+    {{#if header-present}}
+        {{#unless flooring}}
+            {{> ti-header linkClass="ti__step1-return step1-inactive"
+                    number="Step 1" title="Calculate the area to tile" hint=true}}
+        {{else}}
+            {{> ti-header linkClass="ti__step1-return step1-inactive"
+                    number="Step 1" title="Calculate area" hint=true}}
+        {{/unless}}
+    {{/if}}
     <div class="ti__card">
         {{> tile-product title="Wickes Callika Mist Grey Porcelain Tile 600 X 300mm"
                 src="./img/placeholders/tile.png" price="14.04" quantity="6" priseSQM="13.00"}}
@@ -36,4 +45,786 @@
         </div>
     {{/if}}
     <div class="ti__error"></div>
+    {{#unless calculator}}
+        <div class="ti__next ti__next1 step1-active">
+            <button class="btn btn-primary btn_full">
+      <span class="btn__text">
+        Continue to estimate tile installation
+        <span class="ti__next-button-arrow">
+          <i class="fas fa-arrow-down"></i>
+        </span>
+      </span>
+            </button>
+        </div>
+    {{/unless}}
 </section>
+
+{{#unless calculator}}
+    {{#if flooring}}
+        <section class="ti__step ti__step2">
+            {{> ti-header linkClass="ti__step2-return step2-inactive"
+                    headerClass="ti__header-inactive" number="Step 2" title="Cost of flooring installation" }}
+            <div class="ti__cost step2-active">
+                <div class="ti__cost_postcode">
+                    <label class="ti__cost_postcode-row">
+                        <span class="ti__cost_postcode-label">
+                          Postcode:
+                        </span>
+                        <span class="ti__cost_postcode-input">
+                            <input class="tbx">
+                        </span>
+                    </label>
+                    <p class="ti__cost_error-msg">Please enter a valid postcode</p>
+                </div>
+                <div class="ti__cost_removal ti__cost_removal-existing">
+                    <p class="ti__cost_removal-title">
+                        Include removal of existing flooring?
+                        <span class="ti__cost_options-what ti__cost_options-what_accordion collapsed"
+                              data-toggle="collapse"
+                              data-target="#removal-exist-accordion">
+                            <span>
+                              What is this?
+                            </span>
+                            <span class="icon">
+                              <i class="fas fa-angle-up"></i>
+                            </span>
+                        </span>
+                    </p>
+                    <div class="collapse" id="removal-exist-accordion">
+                        {{> notifications withHideBtn=true target-id="removal-exist-accordion"
+                                classModifier="notification_warning"
+                                text="Often there is existing flooring or tiling in place which needs to be removed before the new project can start. Please tell us what type of product is already in place."}}
+                    </div>
+                    <div class="ti__cost_removal-radio">
+                        {{#each flooring-installation.step2.removalExist}}
+                            <div class="ti__cost_options-list">
+                                {{> radiobutton label=label name="removal-exist" id=id}}
+                            </div>
+                        {{/each}}
+                    </div>
+                    <label class="ti__cost_removal-row">
+                        <span class="ti__cost_removal-label">
+                            Flooring to be removed of (m<sup>2</sup>):
+                        </span>
+                        <span class="ti__cost_removal-input">
+                            <input type="text" inputmode="numeric" pattern="[0-9]*" class="tbx">
+                        </span>
+                    </label>
+                    <p class="ti__cost_removal_error-msg">Please select a value that is more than 0</p>
+                    <p class="ti__cost_error-msg">Please select an option</p>
+                </div>
+                <div class="ti__cost_removal">
+                    <p class="ti__cost_removal-title">
+                        Include removal of waste/disposal?
+                        <span class="ti__cost_options-what ti__cost_options-what_accordion collapsed"
+                              data-toggle="collapse"
+                              data-target="#removal-waste-accordion">
+                            <span>
+                              What is this?
+                            </span>
+                            <span class="icon">
+                              <i class="fas fa-angle-up"></i>
+                            </span>
+                        </span>
+                    </p>
+                    <div class="collapse" id="removal-waste-accordion">
+                        {{> notifications withHideBtn=true target-id="removal-waste-accordion"
+                                classModifier="notification_warning"
+                                text="Does the existing flooring or tiling need to be removed and disposed of."}}
+                    </div>
+                    <div class="ti__cost_removal-radio">
+                        {{#each flooring-installation.step2.removalWaste}}
+                            <div class="ti__cost_options-list">
+                                {{> radiobutton label=label name="removal-waste" id=id}}
+                            </div>
+                        {{/each}}
+                    </div>
+                    <p class="ti__cost_error-msg">Please select an option</p>
+                </div>
+                <div class="ti__cost_removal ti__cost-leveling">
+                    <p class="ti__cost_removal-title">
+                        Does your floor need leveling
+                        <span class="ti__cost_options-what ti__cost_options-what_accordion collapsed"
+                              data-toggle="collapse"
+                              data-target="#leveling-accordion">
+                            <span>
+                              What is this?
+                            </span>
+                            <span class="icon">
+                              <i class="fas fa-angle-up"></i>
+                            </span>
+                        </span>
+                    </p>
+                    <div class="collapse" id="leveling-accordion">
+                        {{> notifications withHideBtn=true target-id="leveling-accordion"
+                                classModifier="notification_warning"
+                                text="Floors can be uneven and sometimes require a leveling compound before installation can begin."}}
+                    </div>
+                    <div class="ti__cost_removal-radio">
+                        {{#each flooring-installation.step2.leveling}}
+                            <div class="ti__cost_options-list">
+                                {{> radiobutton label=label name="leveling" id=id}}
+                            </div>
+                        {{/each}}
+                    </div>
+                    <div class="ti__cost_removal-leveling">
+                        <p class="ti__cost_removal-title">
+                            What type of floor do you have?
+                        </p>
+                        <div class="ti__cost_removal-radio">
+                            {{#each flooring-installation.step2.additionLeveling}}
+                                <div class="ti__cost_options-list">
+                                    {{> radiobutton label=label name="additionLeveling" id=id}}
+                                </div>
+                            {{/each}}
+                        </div>
+                    </div>
+
+                    <p class="ti__cost_error-msg">Please select an option</p>
+                </div>
+                <div class="ti__cost_removal ti__cost-threshold">
+                    <p class="ti__cost_removal-title">
+                        Include door threshold bars?
+                        <span class="ti__cost_options-what ti__cost_options-what_accordion collapsed"
+                              data-toggle="collapse"
+                              data-target="#threshold-accordion">
+                            <span>
+                              What is this?
+                            </span>
+                            <span class="icon">
+                              <i class="fas fa-angle-up"></i>
+                            </span>
+                        </span>
+                    </p>
+                    <div class="collapse" id="threshold-accordion">
+                        {{> notifications withHideBtn=true target-id="threshold-accordion"
+                                classModifier="notification_warning"
+                                text="Door threshold bars sit at the bottom of a doorway and provide a neat doorway transition from one room to the next. "}}
+                    </div>
+                    <div class="ti__cost_removal-radio">
+                        {{#each flooring-installation.step2.threshold.radio}}
+                            <div class="ti__cost_options-list">
+                                {{> radiobutton label=label name="threshold" id=id}}
+                            </div>
+                        {{/each}}
+                    </div>
+                    <div class="ti__cost_removal_second">
+                        <p class="ti__cost_removal-title">
+                            Will the door need trimming down?
+                            <span class="ti__cost_options-what ti__cost_options-what_accordion collapsed"
+                                  data-toggle="collapse"
+                                  data-target="#trimming-accordion">
+                            <span>
+                              What is this?
+                            </span>
+                            <span class="icon">
+                              <i class="fas fa-angle-up"></i>
+                            </span>
+                        </span>
+                        </p>
+                        <div class="collapse" id="trimming-accordion">
+                            {{> notifications withHideBtn=true target-id="trimming-accordion"
+                                    classModifier="notification_warning"
+                                    text="When new flooring and doors threshold bars are fitted, sometimes the bottom of the doors need to be trimmed to allow them to close correctly."}}
+                        </div>
+                        <div class="ti__cost_removal-radio ">
+                            {{#each flooring-installation.step2.trimming.radio}}
+                                <div class="ti__cost_options-list">
+                                    {{> radiobutton label=label name="trimming" id=id}}
+                                </div>
+                            {{/each}}
+                        </div>
+                    </div>
+                    <div class="ti__cost_removal-complements">
+                        <p class="ti__cost_removal-title">
+                            Select door threshold bars
+                        </p>
+                        <div class="ti__cost_cards">
+                            {{#each flooring-installation.step2.threshold.cards}}
+                                {{> card_complement}}
+                            {{/each}}
+                        </div>
+                    </div>
+                    <div class="ti__cost_removal-added">
+                        <p class="ti__cost_removal-msg">
+                            <i class="fas fa-check-circle"></i>
+                            Added to your basket
+                        </p>
+                        <div class="ti__cost_removal-sum">
+                            <span class="ti__cost_removal-product"></span>
+                            <div class="ti__cost_removal-info">
+                                 <span class="ti__cost_removal-price">
+                                £<span class="ti__cost_removal-value"></span>
+                            </span>
+                                <a href="" class="ti__cost_removal-remove">
+                                    <i class="fas fa-trash"></i> Remove item
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <p class="ti__cost_error-msg">Please select an option</p>
+                </div>
+                <div class="ti__cost_removal ti__cost-scotia">
+                    <p class="ti__cost_removal-title">
+                        Include flooring trim/scotia?
+                        <span class="ti__cost_options-what ti__cost_options-what_accordion collapsed"
+                              data-toggle="collapse"
+                              data-target="#scotia-accordion">
+                            <span>
+                              What is this?
+                            </span>
+                            <span class="icon">
+                              <i class="fas fa-angle-up"></i>
+                            </span>
+                        </span>
+                    </p>
+                    <div class="collapse" id="scotia-accordion">
+                        {{> notifications withHideBtn=true target-id="scotia-accordion"
+                                classModifier="notification_warning"
+                                text="Scotia is a decorative moulding used to cover the expansion gap without removing the skirting."}}
+                    </div>
+                    <div class="ti__cost_removal-radio">
+                        {{#each flooring-installation.step2.scotia.radio}}
+                            <div class="ti__cost_options-list">
+                                {{> radiobutton label=label name="scotia" id=id}}
+                            </div>
+                        {{/each}}
+                    </div>
+                    <div class="ti__cost_removal-complements">
+                        <p class="ti__cost_removal-title">
+                            Select trim/scotia
+                        </p>
+                        <div class="ti__cost_cards">
+                            {{#each flooring-installation.step2.scotia.cards}}
+                                {{> card_complement}}
+                            {{/each}}
+                        </div>
+                    </div>
+                    <div class="ti__cost_removal-added">
+                        <p class="ti__cost_removal-msg">
+                            <i class="fas fa-check-circle"></i>
+                            Added to your basket
+                        </p>
+                        <div class="ti__cost_removal-sum">
+                            <span class="ti__cost_removal-product"></span>
+                            <div class="ti__cost_removal-info">
+                                 <span class="ti__cost_removal-price">
+                                £<span class="ti__cost_removal-value"></span>
+                            </span>
+                                <a href="" class="ti__cost_removal-remove">
+                                    <i class="fas fa-trash"></i> Remove item
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <p class="ti__cost_error-msg">Please select an option</p>
+                </div>
+                <div class="ti__cost_removal ti__cost-underlay">
+                    <p class="ti__cost_removal-title">
+                        Include underlay?
+                        <span class="ti__cost_options-what ti__cost_options-what_accordion collapsed"
+                              data-toggle="collapse"
+                              data-target="#underlay-accordion">
+                            <span>
+                              What is this?
+                            </span>
+                            <span class="icon">
+                              <i class="fas fa-angle-up"></i>
+                            </span>
+                        </span>
+                    </p>
+                    <div class="collapse" id="underlay-accordion">
+                        {{> notifications withHideBtn=true target-id="underlay-accordion"
+                                classModifier="notification_warning"
+                                text="Underlay is a barrier that sits beneath your flooring and used to protect against environmental factors like moisture and temperature. Underlay is required as part of any Wickes installation."}}
+                    </div>
+                    <div class="ti__cost_removal-radio">
+                        {{#each flooring-installation.step2.underlay.radio}}
+                            <div class="ti__cost_options-list">
+                                {{> radiobutton label=label name="underlay" id=id}}
+                            </div>
+                        {{/each}}
+                    </div>
+                    <div class="ti__cost_removal-complements">
+                        <p class="ti__cost_removal-title">
+                            Select underlay
+                        </p>
+                        <div class="ti__cost_cards">
+                            {{#each flooring-installation.step2.underlay.cards}}
+                                {{> card_complement}}
+                            {{/each}}
+                        </div>
+                    </div>
+                    <div class="ti__cost_removal-added">
+                        <p class="ti__cost_removal-msg">
+                            <i class="fas fa-check-circle"></i>
+                            Added to your basket
+                        </p>
+                        <div class="ti__cost_removal-sum">
+                            <span class="ti__cost_removal-product"></span>
+                            <div class="ti__cost_removal-info">
+                                 <span class="ti__cost_removal-price">
+                                £<span class="ti__cost_removal-value"></span>
+                            </span>
+                                <a href="" class="ti__cost_removal-remove">
+                                    <i class="fas fa-trash"></i> Remove item
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <p class="ti__cost_error-msg">Please select an option</p>
+                </div>
+                <div class="ti__error"></div>
+
+                <div class="ti__next ti__next2">
+                    <button class="btn btn-primary btn_full">
+                        <span class="btn__text btn__text-desktop">
+                          Continue to your next step
+                          <span class="ti__next-button-arrow">
+                            <i class="fas fa-arrow-down"></i>
+                          </span>
+                        </span>
+                        <span class="btn__text btn__text-mobile">
+                          Estimate your Installation
+                        </span>
+                    </button>
+                </div>
+            </div>
+
+            <div class="ti__cost-ready step2-inactive">
+                <div class="ti__overview">
+                    {{> tile-product2 src="./img/placeholders/tile.png"}}
+                </div>
+                <div class="ti__overview-price">
+                    <div class="ti__overview-price_area">
+                        <span class="ti__overview-price_area-spec">
+                            Total area:
+                        </span>
+                        <div class="ti__overview-price_area-rest">
+                            <span class="ti__overview-price_area-value">28</span>
+                            <span class="ti__overview-price_area-text">m<sup>2</sup></span>
+                        </div>
+                    </div>
+                    <div class="ti__overview-price_total">
+                        <span class="ti__overview-price_total-spec">
+                          Estimated price:
+                        </span>
+                        <div class="ti__overview-price_total-rest">
+                            <span class="ti__overview-price_total-text">From</span>
+                            <span class="ti__overview-price_total-value">£350.00*</span>
+                        </div>
+                    </div>
+                    <div class="ti__overview-price_shortcut">
+                        <p class="ti__overview-price_shortcut-text">
+                            *This estimate is subject to home survey.
+                            We will give you a call back to discuss your estimate in more detail.
+                        </p>
+                        <p class="ti__overview-price_shortcut-link">
+                            <a href="#">
+                                Please see our Terms and Conditions
+                            </a>
+                        </p>
+                    </div>
+                </div>
+                <div class="ti__next ti__next-two">
+                    <button class="btn btn-primary btn_full">
+                        <span class="btn__text">
+                          Continue to your next step
+                          <span class="ti__next-button-arrow">
+                            <i class="fas fa-arrow-down"></i>
+                          </span>
+                        </span>
+                    </button>
+                </div>
+            </div>
+        </section>
+        <section class="ti__step ti__step3">
+            {{> ti-header
+                    headerClass="ti__header-inactive" number="Step 3" title="Your next steps" }}
+            <div class="ti__choose">
+                <div class="fi__step3-choose">
+
+                    <h5 class="ti__choose_title">
+                        Please choose what you would like to do next:
+                    </h5>
+                    <div class="ti__choose_first">
+                        <div class="ti__cost_options-list">
+                            {{> radiobutton label="Call me to discuss installation" name="step3" id="call-me"}}
+                            <div class="form-details ti__cost_options-list">
+                                <div class="form-details__row">
+                                    <div class="form-details__info">
+                                        Simply complete your details below and click "Continue".
+                                    </div>
+                                    <div class="form-details__descr">
+                                        <div class="warning-required">Required fields</div>
+                                    </div>
+                                </div>
+
+                                <div class="form-row" data-row-required>
+                                    <label class="form-row__label form-row__label_required" for="first-name">Your
+                                        name:</label>
+                                    <div class="form-row__field">
+                                        <input type="text" class="tbx" id="first-name" name="first-name">
+                                    </div>
+                                    <div class="form-row__error">Please enter your name.</div>
+                                </div>
+
+                                <div class="form-row" data-row-required>
+                                    <label class="form-row__label form-row__label_required" for="mobile-telephone">Phone
+                                        number:</label>
+                                    <div class="form-row__field">
+                                        <input type="tel" class="tbx" id="mobile-telephone" name="mobile-telephone">
+                                    </div>
+                                    <div class="form-row__error">Please enter a valid phone number.</div>
+                                </div>
+
+                                <div class="form-row" data-row-required>
+                                    <label class="form-row__label form-row__label_required" for="email">E-mail
+                                        address:</label>
+                                    <div class="form-row__field">
+                                        <input type="email" class="tbx" id="email" name="email">
+                                    </div>
+                                    <div class="form-row__error">Please enter a valid email address. For example
+                                        josmith@domain.com
+                                    </div>
+                                </div>
+                            </div>
+                            {{> radiobutton
+                                    label="Purchase your chosen flooring. We will then contact you to arrange a free, no-obligation flooring installation estimate"
+                                    name="step3"
+                                    id="purchase"}}
+                            <div class="ti__cost_options-add ti__cost_options-first">
+                                <p class="ti__cost_options-text">
+                                    Would you also like the accessories added?
+                                </p>
+                                <div class="ti__cost_options-list">
+                                    {{> radiobutton label="Yes" name="step3-2" id="step3-2-yes" checked=true}}
+                                    {{> radiobutton label="No" name="step3-2" id="step3-2-no"}}
+                                </div>
+                            </div>
+                            {{> radiobutton label="Purchase your chosen flooring only." name="step3" id="purchase-only"}}
+                            <div class="ti__cost_options-add ti__cost_options-second">
+                                <p class="ti__cost_options-text">
+                                    Would you also like the accessories added?
+                                </p>
+                                <div class="ti__cost_options-list">
+                                    {{> radiobutton label="Yes" name="step3-3" id="step3-3-yes" checked=true}}
+                                    {{> radiobutton label="No" name="step3-3" id="step3-3-no"}}
+                                </div>
+                            </div>
+                        </div>
+                        <div class="ti__error"></div>
+                    </div>
+                    <div class="ti__next ti__next3">
+                        <button class="btn btn-primary btn_full">
+                        <span class="btn__text">
+                          Continue
+                          <span class="ti__next-button-arrow">
+                            <i class="fas fa-arrow-right"></i>
+                          </span>
+                        </span>
+                        </button>
+                    </div>
+                    <div class="ti__choose_second">
+                        <div class="choose choose__add">
+                        <span class="ti__phone">
+                          <i class="fa fa-phone" aria-hidden="true"></i>
+                        </span>
+                            <div class="contact-info">
+                                If you need any help or you would like to discuss your no-obligation floor estimate,
+                                please
+                                call
+                                <a href="tel:02037 388 837">02037 388 837</a>.
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="fi__step3-sum">
+                    <div class="ti__overview-price">
+                        <div class="ti__overview-price_head">
+                            Summary
+                        </div>
+                        <div class="ti__overview-price_area ti__overview-price_area-wline">
+                            <span class="ti__overview-price_area-spec">
+                                Total area:
+                            </span>
+                            <div class="ti__overview-price_area-rest">
+                                <span class="ti__overview-price_area-value">28</span>
+                                <span class="ti__overview-price_area-text">m<sup>2</sup></span>
+                            </div>
+                        </div>
+                        <div class="ti__overview-price_floor">
+                            <span class="ti__overview-price_floor-head">
+                                Flooring:
+                            </span>
+                            <div class="ti__overview-price_floor-item">
+                                <span class="ti__overview-price_floor-spec">
+                                    Wickes Alberto White Oak Laminate Flooring - 1.48 m2 Pack
+                                </span>
+                                <div class="ti__overview-price_floor-rest">
+                                    <span class="ti__overview-price_floor-text">
+                                        £<span class="ti__overview-price_floor-value">309.32</span>
+                                    </span>
+
+                                </div>
+                            </div>
+                        </div>
+                        <div class="ti__overview-price_access">
+                            <span class="ti__overview-price_access-head">
+                                Accessories:
+                            </span>
+                            <div class="ti__overview-price_access-item">
+                                <span class="ti__overview-price_access-spec">
+                                    Shimla/Alberto/Salerno Variable Height Threshold Bar - 900mm
+                                </span>
+                                <div class="ti__overview-price_access-rest">
+                                    <span class="ti__overview-price_access-text">
+                                        £<span class="ti__overview-price_access-value">10</span>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="ti__overview-price-estim">
+                            <div class="ti__overview-price_total">
+                                <span class="ti__overview-price_total-spec">
+                                  Estimated project price:
+                                </span>
+                                <div class="ti__overview-price_total-rest">
+                                    <!--                                    <span class="ti__overview-price_total-text">From</span>-->
+                                    <span class="ti__overview-price_total-value">£350.00*</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="ti__overview-price_shortcut">
+                            <p class="ti__overview-price_shortcut-text">
+                                *This estimate is subject to home survey.
+                                We will give you a call back to discuss your estimate in more detail.
+                            </p>
+                            <p class="ti__overview-price_shortcut-link">
+                                <a href="#">
+                                    Please see our Terms and Conditions
+                                </a>
+                            </p>
+
+                        </div>
+                        <div class="ti__overview-price_floor-only">
+                            <div class="ti__overview-price_total">
+                                <span class="ti__overview-price_total-spec">
+                                 Total price:
+                                </span>
+                                <div class="ti__overview-price_total-rest">
+                                    <span class="ti__overview-price_total-value"></span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ti__new fi__step3-new">
+                    <div class="ti__new-link">
+                        <a>
+                            Start new estimate <i class="fas fa-angle-up"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </section>
+    {{else}}
+        <section class="ti__step ti__step2">
+            {{> ti-header linkClass="ti__step2-return step2-inactive"
+                    headerClass="ti__header-inactive" number="Step 2" title="Cost of tile installation" }}
+            <div class="ti__cost step2-active">
+                <div class="ti__cost_postcode">
+                    <label class="ti__cost_postcode-row">
+        <span class="ti__cost_postcode-label">
+          Postcode:
+        </span>
+                        <span class="ti__cost_postcode-input">
+          <input class="tbx">
+        </span>
+                    </label>
+                    <p class="ti__cost_error-msg">Please enter a valid postcode</p>
+                </div>
+                <div class="ti__cost_removal">
+                    <p class="ti__cost_removal-title">
+                        Include removal and disposal of existing tiles?
+                    </p>
+                    <div class="ti__cost_removal-radio">
+                        {{> radiobutton label="Yes" name="removal" id="removal-yes"}}
+                        {{> radiobutton label="No" name="removal" id="removal-no"}}
+                    </div>
+                    <label class="ti__cost_removal-row">
+        <span class="ti__cost_removal-label">
+          Tiled area to remove and dispose of (sqm):
+        </span>
+                        <span class="ti__cost_removal-input">
+          <input class="tbx">
+        </span>
+                    </label>
+                    <p class="ti__cost_error-msg">Please select an option</p>
+                </div>
+                <div class="ti__cost_options">
+                    <p class="ti__cost_options-title">
+                        To ensure your installation quote is as accurate as possible, please tell us a little about
+                        where you will be tiling:
+                    </p>
+                    <div>
+        <span class="ti__cost_options-what ti__cost_options-what_accordion collapsed"
+              data-toggle="collapse"
+              data-target="#what-accordion">
+            <span>
+              What is this?
+            </span>
+            <span class="icon">
+              <i class="fas fa-angle-up"></i>
+            </span>
+          </span>
+                        <div class="collapse" id="what-accordion">
+                            {{> notifications withHideBtn=true target-id="what-accordion"
+                                    classModifier="notification_warning"
+                                    text="Different surfaces may require specialist tiling products, such as flexible adhesive and waterproof boards."}}
+                        </div>
+                    </div>
+                    <div class="ti__cost_options-list">
+                        {{#each tile-installation.options}}
+                            <div class="ti__cost_options-item">
+                                {{> checkbox label=label id=id}}
+                            </div>
+                        {{/each}}
+                    </div>
+                    <p class="ti__cost_error-msg">Please select an option</p>
+                </div>
+                <div class="ti__cost_levelling">
+                    <p class="ti__cost_levelling-title">
+                        Does your floor need levelling?
+                    </p>
+                    <span class="ti__cost_options-what ti__cost_options-what_accordion collapsed"
+                          data-toggle="collapse"
+                          data-target="#what-accordion_levelling">
+            <span>
+              What is this?
+            </span>
+            <span class="icon">
+              <i class="fas fa-angle-up"></i>
+            </span>
+          </span>
+                    <div class="collapse" id="what-accordion_levelling">
+                        {{> notifications withHideBtn=true target-id="what-accordion_levelling"
+                                classModifier="notification_warning"
+                                text="Sometimes floors are not level. We will lay a thin layer of screed to ensure a smooth even surface."}}
+                    </div>
+                    <div class="ti__cost_levelling-radio">
+                        {{> radiobutton label="Yes" name="levelling" id="levelling-yes"}}
+                        {{> radiobutton label="No" name="levelling" id="levelling-no"}}
+                        {{> radiobutton label="Unsure" name="levelling" id="levelling-unsure"}}
+                    </div>
+                    <label class="ti__cost_levelling-row">
+        <span class="ti__cost_levelling-label">
+          Tiled area to remove and dispose of (sqm):
+        </span>
+                        <span class="ti__cost_levelling-input">
+          <input class="tbx">
+        </span>
+                    </label>
+                    <p class="ti__cost_error-msg">Please select an option</p>
+                </div>
+                <div class="ti__error"></div>
+                <div class="ti__next ti__next2">
+                    <button class="btn btn-primary btn_full">
+        <span class="btn__text btn__text-desktop">
+          Continue to your next step
+          <span class="ti__next-button-arrow">
+            <i class="fas fa-arrow-down"></i>
+          </span>
+        </span>
+                        <span class="btn__text btn__text-mobile">
+          Estimate your Installation
+        </span>
+                    </button>
+                </div>
+            </div>
+            <div class="ti__cost-ready step2-inactive">
+                <div class="ti__overview">
+                    {{> tile-product2 src="./img/placeholders/tile.png"}}
+                </div>
+                <div class="ti__overview-price">
+                    <div class="ti__overview-price_total">
+        <span class="ti__overview-price_total-spec">
+          Estimated price:
+        </span>
+                        <div class="ti__overview-price_total-rest">
+                            <span class="ti__overview-price_total-text">From</span>
+                            <span class="ti__overview-price_total-value">£350.00*</span>
+                        </div>
+                    </div>
+                    <div class="ti__overview-price_shortcut">
+                        <p class="ti__overview-price_shortcut-text">
+                            *This estimate is subject to home survey.
+                            We will give you a call back to discuss your estimate in more detail.
+                        </p>
+                        <p class="ti__overview-price_shortcut-link">
+                            <a href="#">
+                                Please see our Terms and Conditions
+                            </a>
+                        </p>
+                    </div>
+                </div>
+                <div class="ti__next ti__next-two">
+                    <button class="btn btn-primary btn_full">
+        <span class="btn__text">
+          Continue to your next step
+          <span class="ti__next-button-arrow">
+            <i class="fas fa-arrow-down"></i>
+          </span>
+        </span>
+                    </button>
+                </div>
+            </div>
+        </section>
+        <section class="ti__step ti__step3">
+            {{> ti-header
+                    headerClass="ti__header-inactive" number="Step 3" title="Your next steps" }}
+            <div class="ti__choose">
+                <h5 class="ti__choose_title">
+                    Please choose what you would like to do next:
+                </h5>
+                <div class="ti__choose_first">
+                    {{> ti-radio class="choose__callback" radioName="step3" radioID=radioID
+                            step=tile-installation.next-steps
+                            listTitle=false
+                            sourse=tile-installation.list
+                    }}
+                    <div class="ti__error"></div>
+                </div>
+                <div class="ti__next ti__next3">
+                    <button class="btn btn-primary btn_full">
+        <span class="btn__text">
+          Continue
+          <span class="ti__next-button-arrow">
+            <i class="fas fa-arrow-right"></i>
+          </span>
+        </span>
+                    </button>
+                </div>
+                <div class="ti__new">
+                    <div class="ti__new-link">
+                        <a>
+                            Start new estimate <i class="fas fa-angle-up"></i>
+                        </a>
+                    </div>
+                </div>
+                <div class="ti__choose_second">
+                    <div class="choose choose__add">
+        <span class="ti__phone">
+          <i class="fa fa-phone" aria-hidden="true"></i>
+        </span>
+                        <div class="contact-info">
+                            If you need any help or you would like to discuss your no-obligation tile estimate, please
+                            call
+                            <a href="tel:02037 388 837">02037 388 837</a>.
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    {{/if}}
+{{/unless}}