CART2.0

import React, { Fragment } from "react"

export function Cart() {
  return (
    <Fragment>
      <Root>
        <Form>
          <Title></Title>
          <ErrorMessage></ErrorMessage>
          <Grid></Grid>
          <DeliveryMethods></DeliveryMethods>
          <PaymentMethods></PaymentMethods>
          <Promocode></Promocode>
          <OrderForm></OrderForm>
        </Form>
      </Root>
      <Modal></Modal>
    </Fragment>
  )
}

function Product() {
  return (
    <div className="md-shopcart__grid-item custom-border-bottom de--shopcart__border-color">
      <div className="md-shopcart__item-photo ">
        <a
          className="item-photo__link"
          href="http://vigbocms.loc/le-shop/luiza"
          target="_blank"
          rel="noopener noreferrer"
        >
          <img
            // Как ловить copy-protect?
            className="item-photo__img copy-protect"
            src="//shop.loc/vigbo-cms/storage/shops/94274/products/10831733/images/2-6108c1bebb902d9ad428e084b68577b4.jpg"
            alt="Мишка Луиза"
          />
        </a>
      </div>

      <div className="md-shopcart__item-main td-size-xl-magic">
        <div className="md-shopcart__item-title ">
          <a
            href="http://vigbocms.loc/le-shop/luiza"
            target="_blank"
            rel="noopener noreferrer"
            className="de--shopcart__desc-color"
          >
            <span className="item-title__name de--shopcart__desc-font-size">Мишка Луиза</span>
            <span className="item-title__sku de--shopcart__sku-font-size de--shopcart__sku-color ">
              <span className="sku-item">Цвет: Черный</span>
            </span>
          </a>
        </div>
      </div>

      <div className="md-shopcart__item-price mod--align-center td-size-l de--shopcart__desc-font-size de--shopcart__desc-color ">
        1 300 pуб.
      </div>
      <div className="md-shopcart__item-count mod--align-center td-size-l">
        <div className="box-control form__field-box ">
          <div className="box-number-with-control">
            <span className="control-minus">
              <MinusIcon></MinusIcon>
            </span>

            <input
              type="tel"
              name="data[cart][items][14801301]"
              value="1"
              className="box-number__input textbox skuCount de--shopcart__desc-color form__field form__field_bg form__field_bdc form__field_c form__field_ff form__field_fs form__field_fw form__field_ls autotest--sku-count"
              data-max-quantity="0"
              data-update-stock="0"
              data-max-available="0"
              data-border-type="square"
              data-border-width="3"
            />

            <span className="control-plus">
              <PlusIcon></PlusIcon>
            </span>
          </div>
          <div className="box-control__count de--shopcart__page-font autotest--product-count ">
            В наличии: <span className="box-control__count-number de--shopcart__page-font">0</span>
          </div>
        </div>
      </div>
      <div
        className="md-shopcart__item-amount mod--flex-column__end td-size-m de--shopcart__desc-font-size de--shopcart__desc-color"
        data-total="1300"
      >
        <span id="item_14801301_total_price">1 300 pуб.</span>
      </div>
      <div className="md-shopcart__item-delete mod--align-right td-size-s">
        <a
          className="de--shopcart__desc-color autotest--shopcart-delete-product"
          href="http://vigbocms.loc/le-shop/cart/sku/14801301/delete"
        >
          <TrashIcon></TrashIcon>
        </a>
      </div>
    </div>
  )
}

function DeliveryMethod() {
  return (
    <div className="md-shopcart__delivery-item md-shopcart__radio-line">
      <input
        type="radio"
        id="delivery_method_id_176930"
        className="md-radio shop-delivery-radio"
        data-delivery-order-tax="450"
        data-delivery-product-tax="0"
        data-delivery-free="0"
        data-delivery-free-category="[]"
        data-disable-payments="[]"
        value="176930"
        name="data[delivery][delivery_method_id]"
        checked=""
      />
      <label htmlFor="delivery_method_id_176930" className="md-radio__label-shopcart">
        <div className="delivery-item__title radio-line__title de--shopcart__payment-font-size de--shopcart__payment-color">
          НАЗВАНИЕ МЕТОДА ДОСТАВКИ
        </div>
        <div className="delivery-item__price radio-line__price de--shopcart__payment-font-size de--shopcart__payment-color">
          450 pуб.
        </div>
        <div className="td-size-s mod--mobile-hide"></div>
      </label>
    </div>
  )
}

function PaymentMethods() {
  return (
    <div id="payment-methods" className="md-shopcart__payment" data-amount="23300">
      <div className="md-shopcart__payment-head de--shopcart__header-font-size de--shopcart__header-color">
        Выберите способ оплаты
      </div>
      <PaymentMethod></PaymentMethod>
    </div>
  )
}

function PaymentMethod() {
  return (
    <div
      className="md-shopcart__payment-item md-shopcart__radio-line show"
      data-payment-method-id="3"
      data-payment-method-parent-id=""
    >
      <input
        type="radio"
        id="payment_method_id_3"
        className="md-radio shop-payment-radio js--shopcart__payment-radio"
        value="3"
        name="data[payment][payment_method_id]"
      />
      <label htmlFor="payment_method_id_3" className="md-radio__label-shopcart ">
        <div className="payment-item__description radio-line__title de--shopcart__payment-font-size de--shopcart__payment-color">
          ОПЛАТА КРОВЬЮ
        </div>
        <div className="payment-item__payment radio-line__price de--shopcart__payment-font-size de--shopcart__payment-color">
          10 450 pуб.
        </div>
        <div className="td-size-s mod--mobile-hide"></div>
      </label>

      <div className="shop-border-block">
        <i className="shop-payment-method-border custom-border-bottom de--shopcart__border-color"></i>
      </div>
    </div>
  )
}

function Promocode() {
  return (
    <div className="md-shopcart__line md-shopcart__promo-summ custom-border-bottom custom-border-top de--shopcart__border-color">
      <div className="md-shopcart__promocode">
        <div className="md-shopcart__promocode-promo">
          <a
            href="/"
            className="shop-promo-link de--shopcart__desc-color de--shopcart__promo-font-size autotest--shopcart-promo-link"
            id="shop-promo-link"
          >
            У вас есть промо-код?
          </a>

          <div className="shop-promo-slidebox" id="shop-promo-slidebox">
            <span
              className="shop-promo-msg de--shopcart__desc-color de--shopcart__promo-font-size"
              id="shop-promo-msg"
              style={{ display: "none" }}
            ></span>

            <div className="form__promocode-box">
              <div className="form__field-box">
                <div
                  className="form__field form__field_bg form__field_bdc form__field_c form__field_ff form__field_fs form__field_fw form__field_ls"
                  data-border-type="square"
                  data-border-width="3"
                >
                  <input
                    type="text"
                    className="shop-promo-code form__field_field form__field_c form__field_ff form__field_fs form__field_fw form__field_ls"
                    id="shop-promo-code"
                    data-go-placeholder=""
                  />
                  <label className="form__placeholder">Введите промо-код</label>
                </div>
              </div>

              <input type="hidden" id="shop-promo-code-h" className="js--promocode-code-h" name="data[promocode]" />
              <a
                href="/"
                className="shop-apply-promo de--shopcart__desc-color de--shopcart__promo-font-size"
                id="shop-apply-promo"
              >
                Применить
              </a>
            </div>
          </div>
        </div>
      </div>
      <div className="md-shopcart__total-amount mod--align-right custom-border-top de--shopcart__border-color de--shopcart__total-price-font-size de--shopcart__total-price-color">
        <span className="total-amount__text ">Итоговая сумма к оплате:</span>

        <span
          id="totalPriceWithDelivery"
          className="total-amount__price js--shopcart__total-price-wd autotest--total-price-with-delivery"
          data-total-items-price="23300"
        >
          23 750 pуб.
        </span>
        <div id="preloader" className="bodymovin-preloader js--md-search-input-preloader">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            width="16"
            height="16"
            preserveAspectRatio="xMidYMid meet"
            style={{ width: "100%", height: "100%" }}
          >
            <defs>
              <clipPath id="animationMask_B7dvKnGT6R">
                <rect width="16" height="16" x="0" y="0"></rect>
              </clipPath>
            </defs>
            <g clip-path="url(#animationMask_B7dvKnGT6R)">
              <g transform="matrix(0.95,0,0,0.95,-307.563,41.594)" opacity="0.43" style={{ userSelect: "none" }}>
                <g opacity="1" transform="matrix(1,0,0,1,332.094,-35.531)">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="miter"
                    fill-opacity="0"
                    stroke-miterlimit="4"
                    stroke="rgb(121,121,121)"
                    stroke-opacity="1"
                    stroke-width="1"
                    d="M0 0 M-0.633,-6.877 C-0.425,-6.897 -0.214,-6.906 0,-6.906"
                  ></path>
                </g>
              </g>
            </g>
          </svg>
        </div>
      </div>
      <div className="td-size-s mod--mobile-hide"></div>
    </div>
  )
}

function OrderForm() {
  return (
    <div className="md-shopcart__form">
      <div className="form__info">
        <div className="form__info-title de--shopcart__header-font-size de--shopcart__header-color ">
          Важная информация:{" "}
        </div>
        <div className="form__info-text de--shopcart__info-font-size de--shopcart__info-color de--common__link-color ">
          Здесь вы можете написать какие-то пояснения, которые помогут вашим клиентам не растеряться и понимать, какой
          порядок действий им необходимо произвести для оформления, какие шаги необходимо пройти от оформления заявки до
          получения продукта. Все-все нюансы и детали, которые помогут вашим клиентам ничего не опасаться и без сомнений
          нажать кнопку “ОФОРМИТЬ ПОКУПКУ”.{" "}
        </div>
      </div>

      <div id="inputs-form" className="form__inputs de--common__link-color" style={{ opacity: "1" }}>
        <span className="form__inputs-title de--shopcart__header-font-size de--shopcart__header-color ">
          Заполните ваши данные:
        </span>
        <div className="form__field-box">
          <div
            className="form__placeholder-box form__field form__field_bg form__field_bdc form__field_c form__field_ff form__field_fs form__field_fw form__field_ls"
            data-border-type="square"
            data-border-width="3"
          >
            <input
              className="form__field_field form__field_c form__field_ff form__field_fs form__field_fw form__field_ls"
              data-go-placeholder=""
              type="text"
              value=""
              name="data[fields][5603435]"
              data-required="y"
            />
            <label className="form__placeholder ">Имя*</label>
          </div>
          <div className="form__field-indent"></div>
        </div>
        <div className="form__field-box">
          <div
            className="form__placeholder-box form__field form__field_bg form__field_bdc form__field_c form__field_ff form__field_fs form__field_fw form__field_ls"
            data-border-type="square"
            data-border-width="3"
          >
            <input
              className="form__field_field form__field_c form__field_ff form__field_fs form__field_fw form__field_ls"
              data-go-placeholder=""
              type="email"
              value=""
              name="data[fields][5603441]"
              data-required="y"
            />
            <label className="form__placeholder ">Email*</label>
          </div>
          <div className="form__field-indent"></div>
        </div>
        <div className="form__field-box">
          <label className="form__checkbox_label form__text_color form__field_fs">
            <input
              type="checkbox"
              className="form__checkbox"
              name="data[fields][5603469]"
              data-required="n"
              data-border-type="circle"
              value="y"
            />
            <span className="form__checkbox_box">
              <span
                className="form__checkbox_checkbox form__field_bg form__field_bdc"
                data-border-type="square"
                data-border-width="3"
              ></span>
            </span>
            <span className="form__checkbox_text">
              <span>ТЕСТОВЫЙ ЧЕКБОКС</span>
            </span>
          </label>
          <div className="form__field-indent"></div>
        </div>
        <div className="form__field-box form__field-box_textarea">
          <div
            className="form__field form__textarea mod--custom-scroll-resize ps is-ps-init form__field_bg form__field_bdc form__field_c form__field_ff form__field_fs form__field_fw form__field_ls"
            data-custom-scroll="1"
            data-border-type="square"
            data-border-width="3"
          >
            <textarea
              className="form__textarea_tarea"
              data-go-placeholder=""
              name="data[fields][5603471]"
              data-required="n"
              style={{ overflow: "hidden", overflowWrap: "break-word", height: "89px" }}
            ></textarea>
            <div
              className="form__placeholder-box form__field form__field_bg form__field_bdc form__field_c form__field_ff form__field_fs form__field_fw form__field_ls"
              data-border-type="square"
              data-border-width="3"
            >
              <label className="form__placeholder ">Мишка Луиза</label>
            </div>
            <div className="ps__rail-x" style={{ left: "0px", bottom: "0px" }}>
              <div className="ps__thumb-x" tabindex="0" style={{ left: "0px", width: "0px" }}></div>
            </div>
            <div className="ps__rail-y" style={{ top: "0px", right: "0px" }}>
              <div className="ps__thumb-y" tabindex="0" style={{ top: "0px", height: "0px" }}></div>
            </div>
          </div>
          <div className="form__field-indent"></div>
        </div>
        <div className="form__field-box">
          <div className="md-select-custom js--select-custom">
            <div
              className="md-select-custom__select selectize-control options form__select"
              placeholder="Тестовая выпадалка"
            >
              <div
                className="md-select-custom__input selectize-input items form__field_bg form__field_bdc form__field_c"
                data-border-type=""
                data-border-width=""
              >
                <div className="md-select-custom__item item" data-value="0">
                  <span className="md-select-custom__item-inner item-inner js--select-custom__item-inner"></span>
                </div>
              </div>
            </div>
            <select
              className="form__select selectized"
              name="data[fields][5603472]"
              data-required="n"
              data-scroll-type="css"
              placeholder="Тестовая выпадалка"
              tabindex="-1"
              style={{ display: "none" }}
            >
              <option value="" selected="selected"></option>
            </select>
            <div className="selectize-control form__select single">
              <div
                className="selectize-input items not-full has-options form__field_bg form__field_bdc form__field_c"
                data-border-type="square"
                data-border-width="3"
              >
                <div className="selectize-placeholder form__placeholder">Тестовая выпадалка</div>
                <input
                  type="text"
                  autocomplete="off"
                  tabindex=""
                  placeholder="Тестовая выпадалка"
                  style={{ width: "173.547px" }}
                />
              </div>
              <div
                className="selectize-dropdown single form__select form__field_bg-select form__field_bdc form__field_c"
                style={{ display: "none", width: "321.031px", top: "55px", left: "0px" }}
                data-border-type="square"
                data-border-width="3"
              >
                <div className="selectize-dropdown-content"></div>
              </div>
            </div>
          </div>
          <div className="form__field-indent"></div>
        </div>{" "}
        <div className="form__field-box">
          <div
            className="form__placeholder-box form__field form__field_bg form__field_bdc form__field_c form__field_ff form__field_fs form__field_fw form__field_ls"
            data-border-type="square"
            data-border-width="3"
          >
            <input
              className="form__field_field form__field_c form__field_ff form__field_fs form__field_fw form__field_ls"
              data-go-placeholder=""
              type="text"
              value=""
              name="data[fields][5603473]"
              data-required="n"
            />
            <label className="form__placeholder ">Отвертка t6</label>
          </div>
          <div className="form__field-indent"></div>
        </div>{" "}
        <div className="form__field-box">
          <div
            className="form__placeholder-box form__field form__field_bg form__field_bdc form__field_c form__field_ff form__field_fs form__field_fw form__field_ls"
            data-border-type="square"
            data-border-width="3"
          >
            <input
              className="form__field_field form__field_c form__field_ff form__field_fs form__field_fw form__field_ls"
              data-go-placeholder=""
              type="text"
              value=""
              name="data[fields][5603474]"
              data-required="n"
            />
            <label className="form__placeholder ">Cifrovoj tovar </label>
          </div>
        </div>
        <div className="form__inputs-errors">
          <span
            id="shop-delivery-error"
            className="error md-shopcart__delivery-error js--shopcart__errors-delivery"
            style={{ display: "none" }}
          >
            Выберите вариант доставки
          </span>
          <span id="shop-payment-error" className="error md-shopcart__delivery-error js--shopcart__errors-payment">
            Выберите способ оплаты
          </span>
          <span
            id="shop-sku-quantity-error-bottom"
            className="error md-shopcart__delivery-error js--shopcart__errors-quantity"
          >
            К сожалению, введенного количества товара нет в наличии.
          </span>
          <span
            id="deliveryDisableMethodError"
            className="error md-shopcart__delivery-error js--shopcart__errors-delivery-disable"
          >
            Выбранный способ доставки в данный момент не доступен
          </span>
          <span
            id="paymentDisableMethodError"
            className="error md-shopcart__delivery-error js--shopcart__errors-payment-disable"
          >
            Выбранный метод оплаты в данный момент не доступен
          </span>
          <span
            id="existPaymentMethodError"
            className="error md-shopcart__delivery-error js--shopcart__errors-payment-exist"
            style={{ display: "none" }}
          >
            cart-exist-payment-method-error
          </span>
          <span id="totalCostChanged" className="error md-shopcart__delivery-error js--shopcart__errors-total-сost">
            cart-total-cost-changed-error
          </span>
        </div>
        <div className="form__btn-box">
          <button
            className="form__btn  progress-button autotest--form-btn-submit"
            data-style="top-line"
            data-horizontal=""
            data-type-submit="true"
            type="button"
            name="data[btn-submit]"
            value=""
            data-border-type="square-btn"
            data-button-paddings="90"
          >
            <span className="form__btn_cont">ОФОРМИТЬ ПОКУПКУ</span>
          </button>
        </div>
        <div className="form__btn-box de--common__link-color de--shopcart__info-font-size de--shopcart__info-color"></div>
      </div>
    </div>
  )
}

// Refactor with portals
function Modal() {
  return (
    <div id="frontModal" className="front-modal-wrap">
      <div className="front-modal">
        <div className="close-popup">
          <svg width="12px" height="12px" viewBox="0 0 12 12">
            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <g id="icon" transform="translate(-893.000000, -308.000000)" fill="currentColor" fill-rule="nonzero">
                <path
                  d="M898.46967,313.46967 L899.53033,313.46967 L899,312.93934 L898.46967,313.46967 L897.93934,314 L893.46967,309.53033 C892.762563,308.823223 893.823223,307.762563 894.53033,308.46967 L899,312.93934 L903.46967,308.46967 C904.176777,307.762563 905.237437,308.823223 904.53033,309.53033 L900.06066,314 L904.53033,318.46967 C905.237437,319.176777 904.176777,320.237437 903.46967,319.53033 L899,315.06066 L894.53033,319.53033 C893.823223,320.237437 892.762563,319.176777 893.46967,318.46967 L897.93934,314 L898.46967,313.46967 Z M899.53033,313.46967 L899,312.93934 L898.46967,313.46967 L899.53033,313.46967 C899.237437,313.176777 898.762563,313.176777 898.46967,313.46967 L899.53033,313.46967 Z"
                  id="icon_small"
                ></path>
              </g>
            </g>
          </svg>
        </div>
        <div className="front-modal__dialog"></div>
        <div className="front-modal__buttons">
          <a className="btn btn-success autotest--shopcart-btn-success" href="/">
            shop-confirm-message-positive
          </a>
          <a className="btn btn-default" href="/" onclick="return false">
            shop-confirm-message-negative
          </a>
        </div>
      </div>
    </div>
  )
}

function DeliveryMethods() {
  return (
    <div className="md-shopcart__delivery">
      <div className="md-shopcart__delivery-head de--shopcart__header-font-size de--shopcart__header-color ">
        Выберите способ доставки:
      </div>

      {/* Заготовка для СДЭК */}
      <LocationSelector></LocationSelector>
      <DeliveryMethod></DeliveryMethod>
    </div>
  )
}

function Title() {
  return <div className="md-shopcart__title de--shopcart__header-font-size de--shopcart__header-color ">Корзина</div>
}

function ErrorMessage() {
  return (
    <span id="shop-min-sum-error" data-conside-promocode="y" className="md-shopcart__delivery-error">
      <span className="js--shop-min-sum-error__default">
        Обратите внимание, минимальная сумма заказа <span id="minSum"></span> Для совершения покупки добавьте в корзину
        товаров на <span id="addSum"></span>
      </span>
      <span className="js--shop-min-sum-error__use-promocode" style={{ display: "none" }}>
        Обратите внимание, минимальная сумма заказа <span id="minSum"></span> Сумма погашенная промокодом не учитывается
        в минимальном заказе. Для совершения покупки добавьте в корзину товаров на <span id="addSum"></span>
      </span>
    </span>
  )
}

function GridCaption() {
  return (
    <div className="md-shopcart__grid-head custom-border-bottom de--shopcart__border-color">
      <div className="md-shopcart__grid-title mod--title-name mod--align-left td-size-xl de--shopcart__header-th-font-size de--shopcart__header-th-color ">
        Продукт
      </div>
      <div className="md-shopcart__grid-title mod--title-price td-size-l de--shopcart__header-th-font-size de--shopcart__header-th-color ">
        Цена
      </div>
      <div className="md-shopcart__grid-title mod--title-count td-size-l de--shopcart__header-th-font-size de--shopcart__header-th-color ">
        Количество
      </div>
      <div className="md-shopcart__grid-title mod--title-amount mod--align-right td-size-m de--shopcart__header-th-font-size de--shopcart__header-th-color ">
        Сумма
      </div>
      <div className="md-shopcart__grid-title td-size-s mod--mobile-hide"></div>
    </div>
  )
}

function GridFooter() {
  return (
    <div className="md-shopcart__grid-footer">
      <div className="md-shopcart__item-total td-size-xxl de--shopcart__desc-font-size de--shopcart__desc-color">
        Общая стоимость заказа/покупки:
      </div>
      <div className="md-shopcart__item-total mod--flex-column__end td-size-m de--shopcart__desc-font-size de--shopcart__desc-color">
        <span id="totalPrice" data-price="22000" className="item-total__price">
          22 000 pуб.
        </span>
      </div>
      <div className="md-shopcart__item-total td-size-s mod--mobile-hide"></div>
    </div>
  )
}

function GridBody() {
  return (
    <div className="md-shopcart__grid-body">
      <Product></Product>
      <Product></Product>
    </div>
  )
}

function Form({ children }) {
  return (
    <form action="http://vigbocms.loc/le-shop/checkout" id="orderForm" method="post">
      {children}
    </form>
  )
}

function Grid() {
  return (
    <div className="md-shopcart__grid">
      <GridCaption></GridCaption>
      <GridBody></GridBody>
      <GridFooter></GridFooter>
    </div>
  )
}

function Root({ children }) {
  return (
    <div className="md-shopcart de--shopcart__page-font de--shopcart__header-color autotest--shopcart">{children}</div>
  )
}

function MinusIcon() {
  return (
    <svg className="form__field_c" xmlns="http://www.w3.org/2000/svg" width="7" height="1" viewBox="0 0 7 1">
      <rect width="7" height="1" rx="0.5" ry="0.5"></rect>
    </svg>
  )
}

function PlusIcon() {
  return (
    <svg className="form__field_c" xmlns="http://www.w3.org/2000/svg" width="7" height="7" viewBox="0 0 7 7">
      <path
        d="M126.5,101H124v2.5a0.5,0.5,0,0,1-1,0V101h-2.5a0.5,0.5,0,0,1,0-1H123V97.5a0.5,0.5,0,0,1,1,0V100h2.5A0.5,0.5,0,0,1,126.5,101Z"
        transform="translate(-120 -97)"
      ></path>
    </svg>
  )
}

function TrashIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" viewBox="0 0 13 13">
      <g
        fill="none"
        fill-rule="evenodd"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="1.5"
      >
        <path d="M4 1h5M1 4h11M2 4l1 8h7l1-8"></path>
      </g>
    </svg>
  )
}

function LocationSelector() {
  return (
    <div
      className="md-shopcart__delivery-row custom-border-bottom de--shopcart__border-color"
      style={{ display: "none" }}
    >
      <div className="delivery-block mod--multi td-size-xl">
        <div className="delivery-block__item form__field-indent-side">
          <div className="form__field-box">
            <select
              className="form__select selectized"
              name=""
              data-required=""
              placeholder="Страна"
              tabindex="-1"
              style={{ display: "none" }}
            >
              <option value="1" selected="selected">
                Россия
              </option>
            </select>
            <div className="selectize-control form__select single">
              <div
                className="selectize-input items full has-options has-items form__field_bg form__field_bdc form__field_c"
                data-border-type="square"
                data-border-width="3"
              >
                <div className="selectize-placeholder form__placeholder">Страна</div>
                <div className="item" data-value="1">
                  <span className="item-inner">Россия</span>
                </div>
                <input type="text" autocomplete="off" tabindex="" placeholder="false" style={{ width: "41.7656px" }} />
              </div>
              <div
                className="selectize-dropdown single form__select form__field_bg-select form__field_bdc form__field_c"
                style={{ display: "none", width: "0px", top: "0px", left: "0px" }}
                data-border-type="square"
                data-border-width="3"
              >
                <div className="selectize-dropdown-content"></div>
              </div>
            </div>
            <div className="form__field-indent"></div>
          </div>
        </div>
        <div className="delivery-block__item form__field-indent-side">
          <div className="form__field-box">
            <select
              className="form__select selectized"
              name=""
              data-required=""
              placeholder="Регион"
              tabindex="-1"
              style={{ display: "none" }}
            >
              <option value="1" selected="selected">
                Московская обл
              </option>
            </select>
            <div className="selectize-control form__select single">
              <div
                className="selectize-input items full has-options has-items form__field_bg form__field_bdc form__field_c"
                data-border-type="square"
                data-border-width="3"
              >
                <div className="selectize-placeholder form__placeholder">Регион</div>
                <div className="item" data-value="1">
                  <span className="item-inner">Московская обл</span>
                </div>
                <input type="text" autocomplete="off" tabindex="" placeholder="false" style={{ width: "41.7656px" }} />
              </div>
              <div
                className="selectize-dropdown single form__select form__field_bg-select form__field_bdc form__field_c"
                style={{ display: "none", width: "0px", top: "0px", left: "0px" }}
                data-border-type="square"
                data-border-width="3"
              >
                <div className="selectize-dropdown-content"></div>
              </div>
            </div>
            <div className="form__field-indent"></div>
          </div>
        </div>
      </div>
    </div>
  )
}