`front/static/js/common/utils/1-special-tools/MakeLooper.src.js`
```js
const MakeLooper = (ms = 3000) => {
  let timer
  let wasStopped = false

  return () => {
    const start = (cb) => {
      // console.log("Run");
      if (!wasStopped) {
        timer = setTimeout(function () {
          // console.log("Looper done and will be restarted.");
          if (cb) cb()
          start(cb)
        }, ms)
      }
    }
    const stop = () => {
      // console.log("Looper stopped");
      wasStopped = true
      clearTimeout(timer)
    }
    return { start, stop }
  }
}

window.MakeLooper = MakeLooper
```

#smartpriceRINGEO Dom Magic | Part 3. Special tools: MakeLooper

# Usage

- `domMagic.createProxiedState` usage example
- `MakeLooper` usage example

`front/static/js/common/utils/3-native-dom-tools/dom-magic.src.js`
```js
/* NOTE: Extrernal deps
- window.DeepProxy
- window.MakeLooper
*/

class DOMMagicSingletone {
  constructor(document) {
    this.document = document
    this.selectModeBtnId = 'devtool-go-select-mode'
    this.timers = {}
    this.DeepProxy = window.DeepProxy
    this.MakeLooper = window.MakeLooper
    this.fadeOutSubscribersMap = new Map()
    this.getReadableSnakeCase = window.getReadableSnakeCase || ((str) => str)
  }
  static getInstance(document) {
    // console.log(`DOMMagicSingletone.getInstance called: ${this.name}`)
    if (!DOMMagicSingletone.instance) DOMMagicSingletone.instance = new DOMMagicSingletone(document)

    return DOMMagicSingletone.instance
  }
  // ...
  createProxiedState({ initialState, opts }) {
    return new this.DeepProxy(initialState, opts)
  }
  runCountdownModal({ ms, layoutId, modalId, cb, textHTML, controls }) {
    if (!ms) throw new Error('Missing param: ms (number) was not received')
    const timerTextId = `waiting-timer-text.${this._getRandomString(5)}`
    const state = domMagic.createProxiedState({
      initialState: {
        timeLeft: ms,
      },
      opts: {
        set(_target, path, value, _receiver) {
          switch (true) {
            case path.join('.') === 'timeLeft': {
              const domText = document.getElementById(timerTextId)

              if (!!domText) domText.innerHTML = domMagic.getNormalzedTime({ ms: value })
              break
            }
            default:
              break
          }
        },
        deleteProperty(_target, _path) {
          throw new Error('Cant delete prop')
        },
      },
    })
    const elm = this.createModal2022({
      size: 'md',
      isBlind: true,
      layoutId,
      modalId,
      containerStyle: {
        height: '100%',
      },
      createContentFn: (content) => {
        content.style.width = '100%'
        const wrapper = domMagic.createDOMElement({
          tag: 'div',
          style: {
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
            gap: 'var(--std-m-1)',
          },
        })
        if (!!textHTML)
          wrapper.appendChild(
            domMagic.createDOMElement({
              tag: 'div',
              style: {
                fontSize: '1.5em',
                fontWeight: 'bold',
                textAlign: 'center',
                color: 'gray',
                padding: 'var(--std-m-1)',
              },
              innerHTML: textHTML,
            })
          )
        const timerText = domMagic.createDOMElement({
          tag: 'div',
          id: timerTextId,
          style: {
            fontSize: '2em',
            fontWeight: 'bold',
            lineHeight: '1.1',
            color: 'rgb(53, 131, 195)', // Синий
          },
          innerHTML: domMagic.getNormalzedTime({ ms }),
        })
        wrapper.appendChild(timerText)
        const loaderSpace = domMagic._getMiniLoaderSpace()
        wrapper.appendChild(loaderSpace)
        const controlsWrapper = this._getActionsGrid()
        if (!!controls && Array.isArray(controls)) {
          for (const control of controls) {
            if (!!control?.cb && typeof control.cb === 'function') {
              const btn = domMagic.createDOMElement({
                tag: 'button',
                className: control.className,
                innerHTML: control.label || '[CONTROL]',
              })
              btn.onclick = control.cb
              controlsWrapper.appendChild(btn)
            }
          }
          wrapper.appendChild(controlsWrapper)
        }
        content.appendChild(wrapper)
      },
    })
    const _runLooper = (s) => {
      let left = s
      const looper = domMagic.MakeLooper(1000)()
      looper.start(() => {
        left -= 1
        if (left <= 0) {
          state.timeLeft = 0
          looper.stop()
        } else state.timeLeft -= 1000
      })
    }
    _runLooper(ms / 1000)

    if (!!elm) document.body.appendChild(elm)
    if (!!cb) cb(elm)
  }
  // ...
  createDOMElement({ tag, className, id, attrs = {}, nativeHandlers = {}, style = {}, innerHTML }) {
    const elm = document.createElement(tag)

    switch (tag) {
      case 'button':
        elm.type = 'button'
        break
      default:
        break
    }
    if (!!id) elm.id = id
    const addClassNameIfString = (elm, className) => {
      if (typeof className === 'string') elm.classList.add(className)
    }
    if (!!className) {
      if (typeof className === 'string') {
        addClassNameIfString(elm, className)
      } else if (Array.isArray(className)) {
        for (const cn of className) addClassNameIfString(elm, cn)
      }
    }
    if (!!attrs && Object.keys(attrs).length > 0) {
      for (const key in attrs) elm.setAttribute(key, attrs[key])
    }
    if (!!nativeHandlers && Object.keys(nativeHandlers).length > 0) {
      for (const key in nativeHandlers) elm[key] = nativeHandlers[key]
    }
    if (!!style && Object.keys(style).length > 0) {
      for (const key in style) elm.style[key] = style[key]
    }
    if (!!innerHTML) elm.innerHTML = innerHTML
    return elm
  }
}

const domMagic = DOMMagicSingletone.getInstance(document)
```


#smartpriceRINGEO Dom Magic | Part 2. Special tools: dom-magic.src

# Решённые задачи
Начну с самого интересного - результатов своей работы.

## 1. 🏗️ Монорепа разделена на фронтенд и бэкенд

Проект "с нуля" - Сборка партнерской версии клиентского приложения вынесена в отдельный проект для возможности сделать независимой сборку от инфраструктуры, хост-среды и других удивительных факторов. По итогу решен ряд сложных задач по упрощению процесса разработки и деплоя (как следствие - мы могли разрабатывать и тестировать новые версии продукта с меньшими усилиями и временными затратами).

<Alert
type="success"
text="Теперь деплой фронта не требует сборки бэкенда, а сборка фронта на всех инстансах работает одинаково"
/>

## 2. 💼 Управление Бизнес Логикой стало прозрачным

Главная особенность текущего проекта (точнее, одного из тех что в работе) заключается в требовании гибкой настройки ветвлений пользовательских сценариев, периодически требующее добавления шагов (в дальнейшем - **дискретных состояний Стейт-Машины**). Новая реализация позволяет донастраивать различные сценарии поведения веб-приложения и дебажить эти сценарии на разных уровнях (внутренняя бизнес-логика, данные по API, вычисляемые значения на основе вводимых пользователем данных - одним словом, все параметры, влияющие на успешный User Flow). Чего удалось достичь:
- Настраиваемая последовательность шагов на уровне конфига Стейт Менеджера XState. Это важно, т.к. в прошлых версиях проекта, с ростом вариантов ветвлений сценариев, настраивать их было весьма затруднительно (императивный подход к мутации DOM требовал анализа всего кода без возможности декомпозировать его на отдельные подзадачи)
- Появилась гибкая валидация ответов API на уровне СТМ (сценарий не пойдет дальше, если ответ не соответствует валидации, все подобные ошибки теперь можно транслировать в UI с соответствующей формулировкой)
- На всем промежутке времени моей деятельности в компании не было представителя бизнеса, который полностью владел логикой приложения (даже Продукт менеджер не мог знать до конца, как должен работать проект - но это не его вина, просто проект очень стар). На мои попытки явным образом получить описание бизнес-логики в виде вопросов "Как оно должно здесь работать?", я получал что-то вроде "Оно же как-то работает, а сейчас требуется внести небольшое изменение" (опять же, ничего страшного, просто наша команда попала в ловушку легаси без доки). Итак, **Документация - теперь она есть в виде конфига XState + интерактивной схемы!** Теперь любой разработчик не только будет знать *как оно работает*, но сможет это объяснить любому менеджеру и при необходимости быстро донастроить поведение интерфейса при появлении новых требований.

<ImagesGalleryBox2 itemsJson='[
  {
    "src": "https://pravosleva.pro/express-helper/chat/storage/uploads/sp.pravosleva/1734127033086.png",
    "original": "https://pravosleva.pro/express-helper/chat/storage/uploads/sp.pravosleva/1734127033086.png",
    "title": "Фрагмент схемы",
    "caption": " Внимание, прототип! Все персонажи и события вымышлены исключительно для визуального представления о разработке в духе Enterprise каким его видела наша команда =)"
  },
{
    "src": "https://pravosleva.pro/express-helper/chat/storage/uploads/sp.pravosleva/1733993517636.png",
    "original": "https://pravosleva.pro/express-helper/chat/storage/uploads/sp.pravosleva/1733993517636.png",
    "title": "Фрагмент схемы",
    "caption": " Внимание, прототип! Все персонажи и события вымышлены исключительно для визуального представления о разработке в духе Enterprise каким его видела наша команда =)"
  }
]' />

<Alert
type="success"
text="Теперь основная часть бизнес-логики (понятная и очевидная схема пользовательских сценариев) может быть быстро настроена на уровне конфига и визуально продемонстрирована в виде интерактивной блок-схемы **- что оказалось очень удобным при необходимости согласований**. Взаимодействие с менеджером Продукта стало эффективнее. DX стал более совершенным и декларативным"
/>

## 3. 📈 Повысилась эффективность отдела IT

Дебаг и отладка теперь не требуют лишних усилий, репорты по критическим ошибкам сами летят в "Телегу"...

- **BFF сервисы (немного фулл-стека):** Появилась возможность добавить автоматизированные оповещения об ошибках по socket.io (далее некоторые из них улетают в Google Sheets, Telegram и т.д.) **по Socket соединению в отдельном потоке Web Worker**. Анализ логов теперь также может быть автоматизирован для ретрансляции в чаты в виде задач (возможно даже с указанием исполнителя).
- Добавлена функция "Сообщить об ошибке", позволяющая отправить сообщение от Пользователя и историю его взаимодействия с приложением для анализа Разработчиком

<CollapsibleBox
header="Отправка лога и обратная связь от сервера"
text="➡️ Event from App to Worker
➡️ Socket event to your Service
⬅️ Incoming socket event to Worker
⬅️ Event from Worker to App 🏁
**Абстракция позволила реализовать чат в с клиентом на сайте и менеджером в Телеграм в реальном времени**"
/>

<Alert
type="success"
text="**Теперь информация по каждому прецеденту прилетает в Telegram группу!** Ранее были проблемы в скорости реагирования на ошибки на продакшене - их диагностика занимала много времени. Теперь анализ логов взаимодействия пользователя с интерфейсом (и не только) в рамках сессии занимает минуты"
/>

## 4. 🤝 Кастомизация UI для каждого из партнёров стала гибче

Решены проблемы вариативности дизайна, связанные с тем, что кодовая база собираемого приложения ранее НЕ была разделена на подпроекты - изменения интерфейса (как и бизнес-логики) затрагивали одну единственную сборку для всех пользователей. Не было unit & e2e тестов - теперь есть.

<Alert
type="success"
text="Ранее были проблемы реализации специфичного дизайна в зависимости от роли/типа пользователя. Теперь каждый из партнёров будет перенаправлен на конкретное SPA в соответствии с внешним роутом NGINX"
/>

# Резюме в сухом остатке
В 2024 году вышла в релиз новая версия Offline Trade-In, которая сильно превосходит легаси, реализованное на стеке 2017 года.

### Стек технологий легаси-кода (2017)
- SSR на стороне **Django** (Python v3.6) - по итогам рефакторинга, из этого репозитория "ушел" фронтенд (бэкенд переписывать не потребовалось);
- **jQuery** / **JS Vanilla** / **Web API**;

### Стек технологий после рефакторинга (2024)
- **Vite** / **React** / **Typescript** (принято в стек как современный стандарт, когда SSR не требуется);
- **XState v4.x** (отлично вписался под свои задачи, связанные с ветвлением пользовательских сценариев, 5-я версия на тот момент ещё была не готова к релизам в прод);
- **Valtio** (минималистичный и гибкий подход к управлению состоянием на базе нативных JS механизмов объекта Proxy);
- **Tailwind CSS** / **Headless UI** (ориентированная на утилиты CSS-инфраструктура для быстрого создания современных веб-сайтов, которая позволяет удобно и быстро создавать кастомные компоненты с заданными стандартными параметрами - настройки стилей типовых элеметнов и т.д.);
- **CSS modules** / SCSS (для компонентов с нестандартной версткой);
- Необычное решение: **Web Socket connection** in **Web Worker** (для отправки логов в отдельном потоке, не нагружая основной поток); Бонус - Одно сокет-соединение на все открытые вкладки для страниц, использующих SharedWorker в случае, если он поддерживается браузером;

### Немного деталей
В 2020 году код фронта (при моем первом знакомстве с ним) представлял собой спагетти-легаси и содержал в себе императивную логику преобразования DOM в зависимости от различных событий (понятие Бизнес Логика в приложении отсутствовало в декларативном виде).
Таким образом с 2017 по 2024 велась доработка фич (+ максимально возможный рефакторинг в пользу DX), но все это время требовался новый продукт с более удачным подходом в плане поддержки кода и управлению Бизнес Логикой на уровне менеджмента - именно это и будет составлять основную ценность в будущем. И в 2024, наконец, пришло время переписать старое легаси на современные рельсы **(ссылка на демо будет в конце)**. Чтоб эта информация не потерялась, решил задокументировать текущие подходы и достижения в области решения проблем отладки в числе прочего (это был основной момент, требующий решения, т.к. устранив это, мы стали работать намного эффективнее).

<CollapsibleBox
header="Сводка по проектам"
text="Всего было 4-5 проектов, каждый из которых является частью экосистемы и имеет свой стек технологий:
1️⃣ Сайт для сбыта б/у устройств;
2️⃣ Панель администратора;
3️⃣ Сайт для сдачи устройств в Trade-In для физ. лиц (2020);
4️⃣ Сайт для сдачи устройств в Trade-In для юр. лиц (2017) 👉 поддержка + рефакторинг + развитие Легаси с 2020 до 2023;
5️⃣ Сайт для сдачи устройств в Trade-In для юр. лиц (2024) 👉 На новом стеке технологий **(про достижения на этом проекте говорится в данной статье)**"
/>

<ControlsBox
  controlsJson='[
    {
      "title": "PREV",
      "label": "Наши стандарты DX (подробнейший разбор)",
      "type": "link",
      "link": "/blog/article/good-dx-exp-2024"
    },
    {
      "title": "START_NEW_TAB",
      "label": "XState interactive scheme",
      "type": "link",
      "link": "https://stately.ai/registry/editor/embed/4c16acf2-6d92-4602-849d-99e1b06f2f39?mode=Design&machineId=f4ab287d-d1a6-4a2f-b0b5-25f6a0d3f4af"
    },
    {
      "title": "NEXT",
      "label": "Life Demo",
      "type": "link",
      "link": "https://pravosleva.pro/subprojects/sp/tradein"
    }
  ]'
/>

История одного рефакторинга 💳 Offline Trade-In #smartpriceRINGEO #рабочие_моменты 2024.8 [3/3]

# Custom fetch-retry in legacy projects

`fetchRetry.js`
```js
function wait(delay) {
  return new Promise((resolve) => setTimeout(resolve, delay))
}

function fetchRetry({ url, delay = 1000, tries = 0, fetchOptions = {} }) {
  let __triesLeft = tries
  function onError(err) {
    __triesLeft = !!__triesLeft ? __triesLeft - 1 : 0

    if (!__triesLeft) throw err

    return wait(delay).then(() => fetchRetry({ url, delay, tries: __triesLeft, fetchOptions }))
  }
  return fetch(url, fetchOptions).catch(onError)
}
```

### Usage
```js
// --- NOTE: Target action
// 1. Try to use different IPs
const ips = ['178.248.232.203', '2.58.70.214', '159.65.25.117', getAPIBaseUrl()]
const getBaseUrl = ({ ip, url }) => (!validateAnything.hasProtocol(ip) ? `https://${ip}${url}` : `${ip}${url}`)
const getEndpoints = ({ url }) =>
  ips
    .map((ip) => getBaseUrl({ url, ip }))
    .filter((url) => validateAnything.isValidURL(url))
const endpoints = getEndpoints({ url: '/partner_api/tradein/accept' })
const abortController = new AbortController()
const tries = 20

Promise.first(
  endpoints.map((url) =>
    fetchRetry({
      url,
      delay: 30000,
      tries,
      fetchOptions: {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
        signal: abortController.signal,
      },
    })
  )
)
  .then(async (response) => {
    // QuicklyDone fulfils first

    const res = await response.json()
    if (res.ok) {
      abortController.abort()
      targetAction(res)
    } else throw new Error('/accept response is not ok!')
  })
  .catch((errs) => {
    // Arrary of rejections (if no one resolved)
    // Провалено (ips.length * tries) попыток

    // Or one main Error?
  })
// ---
```

`validateAnything.js`
```js
const validateAnything = {
  hasProtocol(str) {
    const pattern = new RegExp('https?:\\/\\/')
    return !!pattern.test(str)
  },
  hasWWW(str) {
    const pattern = new RegExp(/www./)
    return !!pattern.test(str)
  },
  isValidURL(str) {
    const pattern = new RegExp(/(?:https?):\/\/(\w+:?\w*)?(\S+)(:\d+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/)
    return !!pattern.test(str)
  },
}
```

### Polyfills
```js
if (!Promise.first)
  // https://github.com/huruji/p-first
  Promise.first = function (e) {
    return Promise.all(
      e.map(function (e) {
        return e.then(
          function (e) {
            return Promise.reject(e)
          },
          function (e) {
            return Promise.resolve(e)
          }
        )
      })
    ).then(
      function (e) {
        return Promise.reject(e)
      },
      function (e) {
        return Promise.resolve(e)
      }
    )
  }

if (!Promise.any)
  Promise.any = (o) =>
    new Promise((i, l) => {
      var n, t, v, d, e
      let u = !1,
        c = [],
        h = 0,
        f = []
      function a(o) {
        u || ((u = !0), i(o))
      }
      function r(o) {
        f.push(o), f.length >= h && l(f)
      }
      for (let i of o) h++, c.push(i)
      for (let o of c)
        void 0 !== (null === (n = o) || void 0 === n ? void 0 : n.then) ||
        void 0 !== (null === (t = o) || void 0 === t ? void 0 : t.catch)
          ? (null === (d = null === (v = o) || void 0 === v ? void 0 : v.then((o) => a(o))) ||
              void 0 === d ||
              d.catch((o) => {}),
            null === (e = o) || void 0 === e || e.catch((o) => r(o)))
          : a(o)
    })
```

*See also https://gitlab.com/smartprice/ringeo/-/merge_requests/1818*

#jsVanilla | fetchRetry #smartpriceRINGEO #promise #TCP/IP

## [DeepProxy](https://stackoverflow.com/a/61868531/8032900)

`front/static/js/common/utils/1-special-tools/deep-proxy.src.js`
```js
// --- NOTE: DeepProxy tool
class DeepProxy {
    constructor(target, handler) {
        this._preproxy = new WeakMap()
        this._handler = handler
        return this.proxify(target, [])
    }

    makeHandler(path) {
        const dp = this
        return {
            set(target, key, value, receiver) {
                if (typeof value === 'object') value = dp.proxify(value, [...path, key])
                target[key] = value

                if (dp._handler.set) dp._handler.set(target, [...path, key], value, receiver)
                return true
            },

            deleteProperty(target, key) {
                if (Reflect.has(target, key)) {
                    dp.unproxy(target, key)
                    const deleted = Reflect.deleteProperty(target, key)
                    if (deleted && dp._handler.deleteProperty) dp._handler.deleteProperty(target, [...path, key])
                    return deleted
                }
                return false
            },
        }
    }

    unproxy(obj, key) {
        if (this._preproxy.has(obj[key])) {
            // console.log('unproxy', key);
            obj[key] = this._preproxy.get(obj[key])
            this._preproxy.delete(obj[key])
        }

        for (const k of Object.keys(obj[key])) if (typeof obj[key][k] === 'object') this.unproxy(obj[key], k)
    }

    proxify(obj, path) {
        // NOTE: obj will be mutated anyway
        if (Array.isArray(obj)) {
            obj.forEach((item, i) => {
                if (typeof item === 'object') obj[i] = this.proxify(obj[i], [...path, key])
            })
        } else {
            for (const key of Object.keys(obj)) if (typeof obj[key] === 'object') obj[key] = this.proxify(obj[key], [...path, key])
        }
        const p = new Proxy(obj, this.makeHandler(path))
        this._preproxy.set(p, obj)
        return p
    }
}
// ---

const _state = {
    formForPersonal: {
        departmentCodelist: [],
    },
}

const proxiedState = new DeepProxy(_state, {
    set(target, path, value, receiver) {
        console.log('--- SERVICE (set method args): target, path, value, receiver')
        // console.log(target, path, value, receiver)
        console.log(`value (is Array = ${Array.isArray(value)}, typeof value is ${typeof value}):`)
        console.log(value)
        console.log(`Object.keys(value):`)
        console.log(Object.keys(value))
        // console.log('path.join(\'.\') is', path.join('.'))
        // console.log('path.join(\'.\') === \'formForPersonal.departmentCodelist\' is', path.join('.') === 'formForPersonal.departmentCodelist')
        // console.log('set', path.join('.'), '=', JSON.stringify(value))
        console.log('---')

        switch (path.join('.')) {
            case 'formForPersonal.departmentCodelist':
                // --- NOTE: Set datalist options as html
                const datalist = document.getElementById('FOR_PERSONAL@ID_ISSUER-DATALIST')
                if (!!datalist) {
                    console.log('--- datalist found')
                    console.log(datalist)
                    console.log('---')
                    let html = '';
                    console.log('html: before')
                    console.log(html)
                    if (Array.isArray(value)) for (const item of value) html += `<option value="${item}">`;
                    console.log('html: after')
                    console.log(html)
                    datalist.innerHTML = html;
                } else {
                    console.log('datalist not found')
                }
                // ---
                break;
            default: break;
        }
    },
    deleteProperty(_target, _path) {
        // console.log('delete', path.join('.'))
        throw new Error('Cant delete prop')
    },
});
window.proxiedState = proxiedState // NOTE: window.proxiedState could be mutated
```

https://github.com/justinjmoses/node-es6-proxy-benchmark

```js
window.DeepProxy = DeepProxy
window.createProxiedState = ({ initialState, opts }) => new DeepProxy(initialState, opts)
```

#smartpriceRINGEO Dom Magic | Part 1. DeepProxy #es6

## CMD sample
```bash
GIT_SHA1=$(git show --format=\"%h\" --no-patch) NODE_ENV=production rollup -c rollup.config.js

# Or branch name:
GIT_BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD)
```

`package.json`
```bash
{
  "scripts": {
    "dev": "yarn watch:spa",
    "build": "GIT_SHA1=$(git show --format=\"%h\" --no-patch) NODE_ENV=production rollup -c rollup.config.js",
    "watch": "GIT_SHA1=$(git show --format=\"%h\" --no-patch) NODE_ENV=development OPEN_SPA=0 rollup -c rollup.config.js --watch",
    "watch:spa": "GIT_SHA1=$(git show --format=\"%h\" --no-patch) NODE_ENV=development OPEN_SPA=1 rollup -c rollup.config.js --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
}
```

`./rollup.config.js`
```js
import { writeStaticFileAsync } from './scripts/write_static_file_async'

const gitSHA1 = process.env.GIT_SHA1 || 'No process.env.GIT_SHA1'
const buildInfoFilePath = path.join(__dirname, 'front/static/js/common/constants/build-info.js')
writeStaticFileAsync(buildInfoFilePath, `const gitSHA1 = '${gitSHA1}';`)
```

`./scripts/write_static_file_async.js`
```js
import fs from 'fs'

export const writeStaticFileAsync = (storageFilePath, text) => {
  fs.writeFile(storageFilePath, text, 'utf8', (err) => {
    if (!!err) console.log(err)
  })
}
```

Не забудьте добавить создаваемый файл в `.gitignore`

#git #bash | Get commit hash for build // GIT_SHA1 #smartpriceRINGEO

**multi-spa**
```bash
git diff 5fa4919167c5c3e49b74529cf9f4a7d81d63d5a7 d234158c43493c639c1c958daf0195faaff64c26
```

**spa-sample**
```git
+1
```

#smartpriceRINGEO | multi spa exp

*Сей треш был создан для сбера в рамках легаси проекта на jQuery:*
```js
$('.sp-form_for_personal .sp-field_for_sms-signing .sp-button_type_submit').on('click', function() {
    const countDownId = `sms-countdown-${Math.random()}`;

    Swal.fire({
        title: 'Введите код из СМС',
        input: 'text',
        inputAttributes: {
            autocapitalize: 'off',
            maxlength: 4,
        },
        showCancelButton: true,
        confirmButtonText: 'Ok',
        confirmButtonColor: '#168f48',
        cancelButtonColor: 'lightgray',
        showLoaderOnConfirm: true,
        html: `<b id="${countDownId}"></b>`,
        preConfirm: (text) => {
            // return fetch(`//api.github.com/users/${text}`)
            //     .then(response => {
            //         if (!response.ok) {
            //         throw new Error(response.statusText)
            //         }
            //         return response.json()
            //     })
            //     .catch(error => {
            //         Swal.showValidationMessage(
            //         `Request failed: ${error}`
            //         )
            //     })

            // TODO: SMS API + timer
            return { isOk: true, message: 'TESTED', text }
        },
        allowOutsideClick: false, // () => !Swal.isLoading()
    })
    .then((result) => {
        // result.value <- response
        console.log(result.value)
        if (result.isConfirmed) {
            // Swal.fire({ title: `${result.value.login}'s avatar`, imageUrl: result.value.avatar_url })
            Swal.fire({ icon: 'success', text: 'Ok, thanx', confirmButtonText: 'Ok', confirmButtonColor: '#168f48' })
            // TODO: API?
        }
    })
    .catch((err) => {
        console.log(err)
        Swal.fire({
            icon: 'error',
            text: err.message,
            showConfirmButton: false,
            timer: 800,
        })
    })

    const runCountDown = () => {
        const updateCouner = ({ counterText, failCb }) => {
            const countDown = document.getElementById(countDownId);
            if (!!countDown) {
                countDown.innerHTML = counterText;
            } else {
                // console.log(document.getElementById('sms-countdown'));
                failCb();
                console.log('failCb CALLED')
            }
        }
        const resetCounter = () => {
            updateCouner({ counterText: 'Wait...' });
        }
        
        const actions = document.getElementsByClassName('swal2-actions')[0];
        if (!!actions) {
            const disableConfirm = () => {
                try {
                    const confirmBtn = document.getElementsByClassName('swal2-confirm')[0];
                    confirmBtn.setAttribute("disabled", true);
                } catch (err) {
                    console.log(err)
                }
            }
            const enableConfirm = () => {
                try {
                    const confirmBtn = document.getElementsByClassName('swal2-confirm')[0];
                    confirmBtn.removeAttribute("disabled");
                } catch (err) {
                    console.log(err)
                }
            }

            const newBtn = document.createElement('button');
            newBtn.setAttribute('class', 'swal2-styled swal2-default-outline');
            newBtn.style.border = '0';
            newBtn.style.color = '#FFF';
            const disableTryAgain = () => {
                newBtn.setAttribute("disabled", true);
                enableConfirm();
            }
            disableTryAgain();
            const enableTryAgain = () => {
                newBtn.removeAttribute("disabled");
                // NOTE: Or this: newBtn.disabled = false;
                disableConfirm();
            }
            newBtn.style.borderRadius = '.25em';
            newBtn.style.backgroundColor = '#168f48';
            newBtn.innerHTML = 'Попробовать еще раз';

            const limitSec = 10;
            const delayTime = limitSec * 1000;
            resetCounter();

            const runCounter = (s) => {
                let left = s;

                const counter = MakeTimer(1000)();
                counter.startTimer(() => {
                    left -= 1;
                    if (left <= 0) {
                        counter.stopTimer();
                        updateCouner({ counterText: 'Время вышло', failCb: () => counter.stopTimer() });
                        enableTryAgain();
                    } else {
                        updateCouner({ counterText: `Осталось ${left} сек`, failCb: () => counter.stopTimer() });
                    }
                })
            }

            newBtn.onclick = function() {
                disableTryAgain();
                resetCounter();
                runCounter(limitSec);
            };
            actions.appendChild(newBtn);

            runCounter(limitSec);
            setTimeout(enableTryAgain, delayTime);
        }
    }
    setTimeout(runCountDown, 1000)
})
```

`MakeTimer.js`
```js
function MakeTimer (ms = 3000) {
  let timer;
  let wasStopped = false;

  return () => {
    const startTimer = (cb) => {
      // console.log("Run");
      if (!wasStopped) {
        timer = setTimeout(function () {
          // console.log("Timer done and will be restarted.");
          if (cb) cb();
          startTimer(cb);
        }, ms);
      }
    };
    const stopTimer = () => {
      // console.log("Timer stopped");
      wasStopped = true;
      clearTimeout(timer);
    };
    return { startTimer, stopTimer };
  };
}
```

smartpriceRINGEO