JSFiddle - React, Tailwind, and code Playground

by AJIEKCEU

HTML

<div class="bx-soa-discount">
  <div class="bx-soa-discount-label">
    <label class="bx-soa-discount-label__value">Использовать баллы</label>
     <div class="bx-soa-discount-label__description">Минимум 0, максимум <span>7628</span></div>
  </div>
  <div class="bx-soa-discount-block">
    <div class="bx-soa-discount-input">
      <div class="bx-soa-discount-input-wrp">
        <input class="bx-soa-discount-input__value form-discount bx-ios-fix" type="text" placeholder="0" name="ORDER_PROP_24">
        <div class="bx-soa-discount-input__description">баллов</div>
      </div>
      <a class="btn js-send-sms" href="#">Подтвердить</a>
    </div>
    <div class="bx-soa-discount-code hide">
      <label class="bx-soa-discount-code__label">Код из смс <sup>*</sup></label>
      <div class="bx-soa-discount-code-elem">
        <input class="bx-soa-discount-code__value" type="text">
        <div class="bx-soa-discount-code__timer-wrp">
          Получить новый код через: <span class="bx-soa-discount-code__timer" data-time="0.1"></span>
        </div>
      </div>
      <span class="bx-soa-discount-code__note">Отправлен на +7 918 xxx-xx-38</span>
      <div class="bx-soa-discount-code-send">
        <a class="btn" href="#">Отправить</a>
      </div>
    </div>
     <a class="btn js-send-sms-again hide" href="#">Запросить заново</a>
  </div>
</div>

CSS

.bx-soa-discount{
	margin: 30px -15px 0;
	padding: 15px;
	border-top: 1px solid #f2f2f2;
}
.bx-soa-discount-label{
	margin-bottom: 15px;
}
.bx-soa-discount-label__value{
	margin-bottom: 0;
	font-weight: 700;
}
.bx-soa-discount-input{
	position: relative;
	display: inline-block;
}
.btn{
  font-size: 16px;
    line-height: 19px;
    font-weight: 700;
    padding: 5px 24px;
    text-transform: uppercase;
    color: #fff;
    background-color: #bdd140;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
    border-radius: 5px;
    text-decoration: none;
    border: 0;
}
.bx-soa-discount-input__description{
	position: absolute;
	height: 18px;
	right: 15px;
	top: 0;
	bottom: 0;
	margin: auto;
}
.bx-soa-discount-input__value{
	text-align: right;
	padding: 0 65px 0 10px;
	height: 30px;
	border: 1px solid #cbcbcb;
	border-radius: 3px
}
.bx-soa-discount-code__value{
	padding: 0 10px;
	height: 30px;
	border: 1px solid #cbcbcb;
	border-radius: 3px;
  margin-right: 10px;
}
.bx-soa-discount-code__label{
  display: block;
  margin-bottom: 5px;
}
.bx-soa-discount-code__label sup{
  color: red;
}
.bx-soa-discount-code__note{
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
}
.bx-soa-discount-code-elem{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.hide{
  display: none;
}
.bx-soa-discount-input-wrp{
  margin-bottom: 10px;
  position: relative;
}
@media only screen and (min-width: 640px) {
	.bx-soa-discount-label{
		margin-bottom: 0;
	}
	.bx-soa-discount {
		display: flex;
		justify-content: space-between;
	}
}

JavaScript

var display = $('.bx-soa-discount-code__timer'),
    time = display.attr('data-time'),
    maxPoints = parseInt($('.bx-soa-discount-label__description span').text()),
    time = 60 * time,
    interval;

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    
    function start(){
      	minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.text(minutes + ":" + seconds);

        if (--timer < 0) {
            timer = 0;
            console.log('1')
            $('.js-send-sms-again').removeClass('hide');
            $('.bx-soa-discount-code__timer-wrp').addClass('hide');
            clearInterval(interval);
        }
    }
    start();
   	interval = setInterval(start, 1000);
}

function checkingNumber(input) {
    input.value = input.value.replace(/[^\d]/g, '').substr(0,13);
}

 $(document).on('click', '.js-send-sms', function (e) {
    e.preventDefault();
    $('.bx-soa-discount-code').removeClass('hide');
  	$('.bx-soa-discount-input').addClass('hide');
  	startTimer(time, display);
});

 $(document).on('click', '.js-send-sms-again', function (e) {
    e.preventDefault();
    $(this).addClass('hide');
  	$('.bx-soa-discount-code__timer-wrp').removeClass('hide');
  	startTimer(time, display);
});

$(document).on('keyup', '.form-discount', function(){
  checkingNumber(this);
  var that = $(this),
      thatVal = parseInt(that.val());

  if(thatVal > maxPoints){
    console.log(maxPoints)
    that.val(maxPoints);
  }
});