@foxford/sdk 5.0.0

package/plugins/confirm-phone.js

@@ -0,0 +1,469 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/plugins/confirm-phone/index.ts
+import merge from "lodash/merge";
+var DEFAULT_OPTIONS = {
+  className: "foxford-phone-confirm",
+  confirmCodeInvalidText: "\u0414\u043E\u043B\u0436\u0435\u043D \u0441\u043E\u0441\u0442\u043E\u044F\u0442\u044C \u0438\u0437 4 \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432",
+  confirmCodePlaceholderText: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043A\u043E\u0434",
+  confirmedInputClassName: "is-confirmed",
+  disabledClassName: "is-disabled",
+  errorClassName: "is-error",
+  hiddenClassName: "is-hidden",
+  inputParentsToHide: [],
+  requestButtonText: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C",
+  retryButtonText: "\u0412\u044B\u0441\u043B\u0430\u0442\u044C \u043A\u043E\u0434 \u043F\u043E\u0432\u0442\u043E\u0440\u043D\u043E",
+  sendCodeButtonText: "\u041E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u0434",
+  unconfirmedHintText: "\u041D\u0435 \u043F\u043E\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043D",
+  untilRetryText: "\u0412\u044B\u0441\u043B\u0430\u0442\u044C \u043A\u043E\u0434 \u043F\u043E\u0432\u0442\u043E\u0440\u043D\u043E \u0447\u0435\u0440\u0435\u0437",
+  userData: {
+    phone: "",
+    phoneConfirmed: false
+  }
+};
+var INITIAL_STATE = {
+  confirmedData: "",
+  dataToConfirm: "",
+  isConfirmRequested: false,
+  isConfirmed: false
+};
+var INITIALIZATION_FAILED_ERROR = "Initialization failed";
+var FORM_NOT_FOUND_ERROR = "Form not found";
+var FIELD_WITHOUT_PARENT_ERROR = "Input without parent";
+var API_NOT_SPECIFIED_ERROR = "Api not specified";
+var _ConfirmPhone = class _ConfirmPhone {
+  constructor(node, options) {
+    this.fieldType = "phone";
+    this.formCheckAttrName = "data-fields-to-confirm";
+    this.formPreventSubmitAttr = "data-prevent-submit";
+    this.state = INITIAL_STATE;
+    this.bindListeners = () => {
+      this.formControls.input.addEventListener("keyup", this.inputListener);
+      if (this.confirmControls.input) this.confirmControls.input.addEventListener("input", this.confirmInputListener);
+      if (this.confirmControls.sendCodeButton) {
+        this.confirmControls.sendCodeButton.addEventListener("click", this.sendCodeListener);
+      }
+      if (this.confirmControls.retryButton) this.confirmControls.retryButton.addEventListener("click", this.retryListener);
+      if (this.confirmControls.requestConfirmButton) {
+        this.confirmControls.requestConfirmButton.addEventListener("click", this.requestConfirmListener);
+      }
+    };
+    this.inputListener = () => {
+      this.state.dataToConfirm = _ConfirmPhone.cleanPhoneFormatting(this.formControls.input.value);
+      this.state.isConfirmed = this.state.dataToConfirm === this.state.confirmedData;
+      if (!this.options.confirmedInputClassName) return;
+      _ConfirmPhone.hideElement(this.confirmControls.requestConfirmError);
+      if (this.state.dataToConfirm && !this.state.isConfirmed) {
+        this.formControls.input.classList.remove(this.options.confirmedInputClassName);
+        this.showConfirmButtonAndHint();
+        this.addFieldForCheck();
+        this.disableSubmit();
+      } else {
+        this.formControls.input.classList.add(this.options.confirmedInputClassName);
+        this.removeFieldFromCheck();
+        this.attemptToEnableSubmit();
+        if (this.confirmControls.input) _ConfirmPhone.hideElement(this.confirmControls.input);
+        this.hideConfirmButtonAndHint();
+      }
+    };
+    this.updateRetryHintText = (diff) => {
+      if (this.confirmControls.countDown) {
+        this.confirmControls.countDown.innerText = `${this.options.untilRetryText} ${diff}`;
+      }
+    };
+    this.requestConfirmListener = () => {
+      if (this.state.dataToConfirm && !this.state.isConfirmed && !this.state.isConfirmRequested) {
+        const requestData = this.requestData;
+        if (!requestData) return;
+        this.state.isConfirmRequested = true;
+        if (this.options.disabledClassName && this.confirmControls.requestConfirmButton) {
+          this.confirmControls.requestConfirmButton.classList.add(this.options.disabledClassName);
+        }
+        this.requestCode(requestData).then(({ nextDeliveryAt }) => {
+          if (nextDeliveryAt && typeof nextDeliveryAt !== "function") {
+            const diff = _ConfirmPhone.getDiffSeconds(nextDeliveryAt);
+            if (diff > 0 && !this.state.isConfirmed) {
+              this.toggleInputParents(false);
+              _ConfirmPhone.hideElement(this.formControls.input);
+              _ConfirmPhone.showElement(this.confirmControls.container);
+              _ConfirmPhone.showElement(this.confirmControls.input);
+              _ConfirmPhone.showElement(this.confirmControls.countDown);
+              _ConfirmPhone.showElement(this.confirmControls.sendCodeButton);
+              _ConfirmPhone.hideElement(this.confirmControls.retryButton);
+              _ConfirmPhone.hideElement(this.confirmControls.requestConfirmError);
+              this.updateRetryHintText(diff);
+            }
+            this.hideConfirmButtonAndHint();
+            this.retryCounter(nextDeliveryAt);
+          }
+        }).catch((e) => {
+          if (e.errors && e.errors[this.fieldType] && this.confirmControls.requestConfirmError) {
+            this.confirmControls.requestConfirmError.innerText = String(e.errors[this.fieldType]);
+            _ConfirmPhone.showElement(this.confirmControls.requestConfirmError);
+          }
+        }).finally(() => {
+          this.state.isConfirmRequested = false;
+          if (this.options.disabledClassName && this.confirmControls.requestConfirmButton) {
+            this.confirmControls.requestConfirmButton.classList.remove(this.options.disabledClassName);
+          }
+        });
+      }
+    };
+    this.validateConfirmInput = () => {
+      if (this.confirmControls.input && !this.confirmControls.input.value || !this.confirmControls.input) {
+        return false;
+      }
+      return this.confirmControls.input.value.length === 4;
+    };
+    this.confirmInputListener = () => {
+      if (!this.confirmControls.sendCodeButton || !this.options.disabledClassName || !this.confirmControls.input) {
+        return;
+      }
+      const confirmInput = this.confirmControls.input;
+      const confirmValue = confirmInput.value;
+      this.confirmControls.input.value = confirmValue.replace(/[^0-9]/g, "");
+      const isConfirmValid = this.validateConfirmInput();
+      if (this.options.errorClassName) confirmInput.classList.remove(this.options.errorClassName);
+      if (isConfirmValid) {
+        this.confirmControls.sendCodeButton.classList.remove(this.options.disabledClassName);
+      } else {
+        this.confirmControls.sendCodeButton.classList.add(this.options.disabledClassName);
+      }
+      this.sendCodeListener();
+    };
+    this.sendCodeListener = () => {
+      const isConfirmValid = this.validateConfirmInput();
+      if (!isConfirmValid) return;
+      const confirmData = this.confirmData;
+      if (!confirmData) return;
+      const confirmInput = this.confirmControls.input;
+      if (!confirmInput) return;
+      confirmInput.setAttribute("disabled", "disabled");
+      this.confirmCode(confirmData).then(({ verificationToken }) => {
+        this.state.isConfirmed = true;
+        this.state.confirmedData = this.state.dataToConfirm;
+        this.toggleInputParents(true);
+        _ConfirmPhone.showElement(this.formControls.input);
+        _ConfirmPhone.hideElement(this.confirmControls.input);
+        _ConfirmPhone.hideElement(this.confirmControls.sendCodeButton);
+        _ConfirmPhone.hideElement(this.confirmControls.container);
+        _ConfirmPhone.hideElement(this.confirmControls.countDown);
+        _ConfirmPhone.hideElement(this.confirmControls.requestConfirmError);
+        _ConfirmPhone.hideElement(this.confirmControls.requestConfirmContainer);
+        if (verificationToken) {
+          this.formControls.tokenInput.value = verificationToken;
+        }
+        if (this.options.confirmedInputClassName) {
+          this.formControls.input.classList.add(this.options.confirmedInputClassName);
+        }
+        confirmInput.value = "";
+        if (this.options.errorClassName) confirmInput.classList.remove(this.options.errorClassName);
+        this.removeFieldFromCheck();
+      }).catch((error) => {
+        if (this.options.errorClassName) confirmInput.classList.add(this.options.errorClassName);
+        if (error.messages && this.confirmControls.requestConfirmError) {
+          this.confirmControls.requestConfirmError.innerText = String(error.messages);
+          _ConfirmPhone.showElement(this.confirmControls.requestConfirmError);
+        }
+      }).finally(() => {
+        this.attemptToEnableSubmit();
+        confirmInput.removeAttribute("disabled");
+      });
+    };
+    this.addFieldForCheck = () => {
+      if (!this.formControls.form) return;
+      const fieldsToConfirm = this.formCheckState;
+      if (fieldsToConfirm && !fieldsToConfirm.includes(this.fieldType)) {
+        this.formControls.form.setAttribute(this.formCheckAttrName, [...fieldsToConfirm, this.fieldType].join(","));
+      }
+    };
+    this.removeFieldFromCheck = () => {
+      const fieldsToConfirm = this.formCheckState;
+      if (fieldsToConfirm.includes(this.fieldType)) {
+        const updatedFieldsToConfirm = fieldsToConfirm.filter((field) => field !== this.fieldType);
+        if (!this.formControls.form) return;
+        if (updatedFieldsToConfirm.length) {
+          this.formControls.form.setAttribute(this.formCheckAttrName, updatedFieldsToConfirm.join(","));
+        } else {
+          this.formControls.form.removeAttribute(this.formCheckAttrName);
+        }
+      }
+    };
+    this.toggleInputParents = (shouldBeShowed) => {
+      const { inputParentsToHide } = this.options;
+      if (!inputParentsToHide) return;
+      for (let i = 0; i <= inputParentsToHide.length; i++) {
+        const el = inputParentsToHide[i];
+        const inputParent = el ? this.formControls.input.closest(el) : null;
+        if (inputParent && this.options.hiddenClassName) {
+          if (shouldBeShowed) {
+            inputParent.classList.remove(this.options.hiddenClassName);
+          } else {
+            inputParent.classList.add(this.options.hiddenClassName);
+          }
+        }
+      }
+    };
+    this.disableSubmit = () => {
+      if (this.formControls.form) this.formControls.form.setAttribute(this.formPreventSubmitAttr, String(true));
+      if (this.formControls.submitButton) {
+        this.formControls.submitButton.setAttribute("disabled", "disabled");
+        if (this.options.disabledClassName) this.formControls.submitButton.classList.add(this.options.disabledClassName);
+      }
+    };
+    this.attemptToEnableSubmit = () => {
+      const fieldsToConfirm = this.formCheckState;
+      if (fieldsToConfirm.length === 0) {
+        if (this.formControls.form) this.formControls.form.removeAttribute(this.formPreventSubmitAttr);
+        if (this.formControls.submitButton) {
+          this.formControls.submitButton.removeAttribute("disabled");
+          if (this.options.disabledClassName) {
+            this.formControls.submitButton.classList.remove(this.options.disabledClassName);
+          }
+        }
+      }
+    };
+    this.retryListener = () => {
+      const requestData = this.requestData;
+      if (!requestData) return;
+      this.requestCode(requestData).then(({ nextDeliveryAt }) => {
+        this.retryCounter(nextDeliveryAt);
+      });
+    };
+    this.retryCounter = (nextDeliveryAt) => {
+      if (this.state.isConfirmed) {
+        return;
+      }
+      const interval = setInterval(() => {
+        const diff = _ConfirmPhone.getDiffSeconds(nextDeliveryAt);
+        if (diff > 0 && !this.state.isConfirmed) {
+          _ConfirmPhone.hideElement(this.confirmControls.retryButton);
+          _ConfirmPhone.showElement(this.confirmControls.countDown);
+          this.updateRetryHintText(diff);
+        } else {
+          if (!this.state.isConfirmed) {
+            _ConfirmPhone.showElement(this.confirmControls.retryButton);
+          }
+          _ConfirmPhone.hideElement(this.confirmControls.countDown);
+          clearInterval(interval);
+        }
+      }, 1e3);
+    };
+    this.destroy = () => {
+      if (this.formControls.input) this.formControls.input.removeEventListener("keyup", this.inputListener);
+      if (this.confirmControls.input) this.confirmControls.input.removeEventListener("input", this.confirmInputListener);
+      if (this.confirmControls.sendCodeButton) {
+        this.confirmControls.sendCodeButton.removeEventListener("click", this.sendCodeListener);
+      }
+      if (this.confirmControls.retryButton) {
+        this.confirmControls.retryButton.removeEventListener("click", this.retryListener);
+      }
+      if (this.confirmControls.requestConfirmButton) {
+        this.confirmControls.requestConfirmButton.removeEventListener("click", this.requestConfirmListener);
+      }
+      this.confirmControls.container = null;
+      this.confirmControls.input = null;
+      this.confirmControls.countDown = null;
+      this.confirmControls.retryButton = null;
+      this.confirmControls.requestConfirmContainer = null;
+      this.confirmControls.requestConfirmButton = null;
+      this.confirmControls.requestConfirmHint = null;
+      this.confirmControls.requestConfirmError = null;
+      this.confirmControls.sendCodeButton = null;
+    };
+    this.options = merge(DEFAULT_OPTIONS, options);
+    const form = node.closest("form");
+    this.formControls = {
+      form: node.closest("form"),
+      input: node,
+      submitButton: form ? form.querySelector('[type="submit"]') : null,
+      tokenInput: document.createElement("input")
+    };
+    this.formControls.tokenInput.type = "hidden";
+    this.formControls.tokenInput.name = "verification_token";
+    this.state.isConfirmed = this.isConfirmed;
+    this.state.dataToConfirm = this.userPhoneWithoutFormatting || "";
+    this.state.confirmedData = this.confirmedData;
+    this.confirmControls = {
+      container: document.createElement("div"),
+      countDown: document.createElement("div"),
+      input: document.createElement("input"),
+      requestConfirmButton: document.createElement("div"),
+      requestConfirmContainer: document.createElement("div"),
+      requestConfirmError: document.createElement("div"),
+      requestConfirmHint: document.createElement("div"),
+      retryButton: document.createElement("div"),
+      sendCodeButton: document.createElement("div")
+    };
+  }
+  // eslint-disable-next-line complexity
+  apply(sdk) {
+    var _a, _b, _c, _d, _e;
+    if (this.formControls.input.ffcc !== void 0 && this.formControls.input.ffcc !== null) {
+      return;
+    }
+    this.api = sdk.foxApi;
+    this.formControls.input.ffcc = this;
+    const { isConfirmRequested, isConfirmed, dataToConfirm } = this.state;
+    const { input: phoneInput } = this.formControls;
+    const {
+      container,
+      input: confirmInput,
+      countDown,
+      retryButton,
+      requestConfirmContainer,
+      requestConfirmButton,
+      requestConfirmHint,
+      requestConfirmError,
+      sendCodeButton
+    } = this.confirmControls;
+    if (!this.formControls.form) {
+      throw new Error(FORM_NOT_FOUND_ERROR);
+    } else if (!phoneInput.parentNode) {
+      throw new Error(FIELD_WITHOUT_PARENT_ERROR);
+    } else if (!confirmInput || !container || !countDown || !retryButton || !requestConfirmContainer || !requestConfirmButton || !requestConfirmHint || !requestConfirmError || !sendCodeButton) {
+      throw new Error(INITIALIZATION_FAILED_ERROR);
+    }
+    const inputClassNames = [`${this.options.className}__input`, ...Array.from(this.formControls.input.classList)];
+    confirmInput.maxLength = 4;
+    confirmInput.pattern = "[0-9]{4}";
+    confirmInput.classList.add(...inputClassNames);
+    confirmInput.placeholder = (_a = this.options.confirmCodePlaceholderText) != null ? _a : "";
+    this.formControls.form.prepend(this.formControls.tokenInput);
+    if (isConfirmed && this.options.confirmedInputClassName) {
+      phoneInput.classList.add(this.options.confirmedInputClassName);
+    }
+    if (!isConfirmed) {
+      this.addFieldForCheck();
+      this.disableSubmit();
+    }
+    if (!isConfirmRequested) {
+      _ConfirmPhone.hideElement(confirmInput);
+    }
+    container.classList.add(`${this.options.className}`);
+    countDown.classList.add(`${this.options.className}__countdown`);
+    retryButton.classList.add(`${this.options.className}__button`);
+    retryButton.innerText = (_b = this.options.retryButtonText) != null ? _b : "";
+    sendCodeButton.classList.add(`${this.options.className}__send-code-button`);
+    if (this.options.disabledClassName) sendCodeButton.classList.add(this.options.disabledClassName);
+    sendCodeButton.innerText = (_c = this.options.sendCodeButtonText) != null ? _c : "";
+    requestConfirmError.classList.add(`${this.options.className}__error`);
+    container.appendChild(confirmInput);
+    container.appendChild(requestConfirmError);
+    container.appendChild(countDown);
+    container.appendChild(sendCodeButton);
+    container.appendChild(retryButton);
+    phoneInput.parentNode.insertBefore(container, phoneInput.nextSibling);
+    requestConfirmContainer.classList.add(`${this.options.className}__button-container`);
+    requestConfirmButton.classList.add(`${this.options.className}__button`);
+    requestConfirmButton.innerText = (_d = this.options.requestButtonText) != null ? _d : "";
+    requestConfirmHint.innerText = (_e = this.options.unconfirmedHintText) != null ? _e : "";
+    requestConfirmHint.classList.add(`${this.options.className}__hint`);
+    if (!dataToConfirm || dataToConfirm && isConfirmed) {
+      this.hideConfirmButtonAndHint();
+    }
+    _ConfirmPhone.hideElement(countDown);
+    _ConfirmPhone.hideElement(requestConfirmError);
+    _ConfirmPhone.hideElement(retryButton);
+    _ConfirmPhone.hideElement(sendCodeButton);
+    requestConfirmContainer.appendChild(requestConfirmHint);
+    requestConfirmContainer.appendChild(requestConfirmButton);
+    container.appendChild(requestConfirmContainer);
+    this.bindListeners();
+  }
+  requestCode(payloadData) {
+    return __async(this, null, function* () {
+      if (!this.api) {
+        throw new Error(API_NOT_SPECIFIED_ERROR);
+      }
+      const { data } = yield this.api.post(_ConfirmPhone.requestUrl(), payloadData);
+      return data;
+    });
+  }
+  confirmCode(payloadData) {
+    return __async(this, null, function* () {
+      if (!this.api) {
+        throw new Error(API_NOT_SPECIFIED_ERROR);
+      }
+      const { data } = yield this.api.post(_ConfirmPhone.confirmUrl(), payloadData);
+      return data;
+    });
+  }
+  get isConfirmed() {
+    return this.options.userData.phoneConfirmed;
+  }
+  get confirmedData() {
+    return this.isConfirmed ? this.userPhoneWithoutFormatting : "";
+  }
+  get userPhoneWithoutFormatting() {
+    return _ConfirmPhone.cleanPhoneFormatting(this.options.userData.phone);
+  }
+  static requestUrl() {
+    return "/api/phone_confirmation_codes";
+  }
+  static confirmUrl() {
+    return "/api/phone_confirmations";
+  }
+  get requestData() {
+    return {
+      phone: this.state.dataToConfirm,
+      type: "sms"
+    };
+  }
+  get confirmData() {
+    return {
+      code: this.confirmControls.input ? this.confirmControls.input.value : "",
+      phone: this.state.dataToConfirm
+    };
+  }
+  get formCheckState() {
+    if (!this.formControls.form) return [];
+    const formConfirmState = this.formControls.form.getAttribute(this.formCheckAttrName) || "";
+    return formConfirmState === "" ? [] : formConfirmState.split(",");
+  }
+  static cleanPhoneFormatting(rawPhone) {
+    return rawPhone.replace(/[-+ ()]/g, "");
+  }
+  showConfirmButtonAndHint() {
+    _ConfirmPhone.showElement(this.confirmControls.container);
+    _ConfirmPhone.showElement(this.confirmControls.requestConfirmContainer);
+    _ConfirmPhone.showElement(this.confirmControls.requestConfirmButton);
+    _ConfirmPhone.showElement(this.confirmControls.requestConfirmHint);
+  }
+  hideConfirmButtonAndHint() {
+    _ConfirmPhone.hideElement(this.confirmControls.requestConfirmButton);
+    _ConfirmPhone.hideElement(this.confirmControls.requestConfirmHint);
+  }
+};
+_ConfirmPhone.showElement = (el) => {
+  if (el) el.style.removeProperty("display");
+};
+_ConfirmPhone.hideElement = (el) => {
+  if (el) el.style.display = "none";
+};
+_ConfirmPhone.getDiffSeconds = (date) => {
+  return Math.round((Date.parse(date) - Date.now()) / 1e3);
+};
+var ConfirmPhone = _ConfirmPhone;
+export {
+  ConfirmPhone
+};

package/plugins/confirm-phone.js.flow

@@ -0,0 +1,69 @@
+// @flow
+import type { SdkPlugin } from "../index";
+
+declare interface IUserData {
+  phone: string;
+  phoneConfirmed: boolean;
+}
+declare interface IConfirmPhoneOptions {
+  className?: string;
+  errorClassName?: string;
+  disabledClassName?: string;
+  hiddenClassName?: string;
+  confirmedInputClassName?: string;
+  confirmCodePlaceholderText?: string;
+  confirmCodeInvalidText?: string;
+  inputParentsToHide?: string[];
+  requestButtonText?: string;
+  retryButtonText?: string;
+  sendCodeButtonText?: string;
+  unconfirmedHintText?: string;
+  untilRetryText?: string;
+  userData: IUserData;
+}
+declare interface IRequestPhoneData {
+  phone: string;
+  type: string;
+}
+declare interface IRequestEmailData {
+  email: string;
+  type: string;
+}
+declare interface TRequestResponse {
+  nextDeliveryAt: string;
+  retryTime?: number;
+}
+declare type TRequestData = IRequestPhoneData | IRequestEmailData | void;
+declare interface IConfirmPhoneData {
+  code: string;
+  phone: string;
+}
+declare interface IConfirmEmailData {
+  code: string;
+  email: string;
+}
+declare type TConfirmData = IConfirmPhoneData | IConfirmEmailData | void;
+declare type TConfirmResponse = {
+  verificationToken?: string,
+  ...
+};
+declare class ConfirmPhone implements SdkPlugin {
+  constructor(node: HTMLInputElement, options?: IConfirmPhoneOptions): this;
+  apply(
+    sdk: $Call<<A, R>((A, ...any[]) => R) => A, $PropertyType<SdkPlugin, "apply">>
+  ): void;
+  requestCode(payloadData: TRequestData): Promise<TRequestResponse>;
+  confirmCode(payloadData: TConfirmData): Promise<TConfirmResponse>;
+  isConfirmed: boolean;
+  confirmedData: string;
+  userPhoneWithoutFormatting: string;
+  static requestUrl(): string;
+  static confirmUrl(): string;
+  requestData: TRequestData;
+  confirmData: TConfirmData;
+  formCheckState: string[];
+  static cleanPhoneFormatting(rawPhone: string): string;
+  addFieldForCheck: () => void;
+  destroy: () => void;
+}
+declare export { ConfirmPhone };