@uzum-tech/account-form

v1.4.10

Published

2 months ago

Uzum account form

Downloads

643

0High
0Medium
0Low

jbalancer

account form typescript uzum

Installing

Package manager

Using npm:

npm i @uzum-tech/account-form

Using yarn:

yarn add @uzum-tech/account-form

CDN

Using jsDelivr

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@uzum-tech/account-form/lib/style.css">
<script src="https://cdn.jsdelivr.net/npm/@uzum-tech/account-form/lib/main.iife.js"></script>

Using unpkg

<link rel="stylesheet" href="https://unpkg.com/@uzum-tech/account-form/lib/style.css">
<script src="https://unpkg.com/@uzum-tech/account-form/lib/main.iife.js"></script>

Usage

Initialization

Default value source: 1

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div data-account-form data-source="-1" style="width: 530px"></div>
  </body>
</html>

Script

import '@uzum-tech/account-form/lib/style.css';
import AccountForm from '@uzum-tech/account-form';

new AccountForm('[data-account-form]');

Add/Remove listeners

import AccountForm, { AccountFormEvent, AccountApplication } from '@uzum-tech/account-form';

const accountForm = new AccountForm();

const handleAccountFormSubmit = (payload: AccountApplication) => console.log(payload);

// Add listener
accountForm.addListener(
  AccountFormEvent.SUBMIT,
  handleAccountFormSubmit
);

// Remove listener
accountForm.removeListener(
  AccountFormEvent.SUBMIT,
  handleAccountFormSubmit
);

// Remove all listener
accountForm.removeAllListeners(
  AccountFormEvent.SUBMIT,
  handleAccountFormSubmit
);

Events from AccountFormEvent:

| Value | Payload | Description | |--|----------------------------------------|---------------------------------------------------------------------------------------------------------------------------| | SUBMIT | AccountApplication | Will fire after successful validation, before sending the request | | ERROR_RESPONSE | AccountApplication | Will fire after an unsuccessful response | | SUCCESS_RESPONSE | AccountApplication | Will fire after a successful response | | FINALLY_RESPONSE | AccountApplication | It will always work after the response | | VALIDATE | AccountApplicationFormValidationResult | It will work after the form is validated, before sending the request. Validation status is available in the event payload | | BLUR | AccountApplicationFieldBlurResult | Will fire after removing focus from any field inside the form | | TOGGLE_TIN_OR_PINFL | boolean | Will fire after toggle 'Не помню ИНН или ПИНФЛ' checkbox | | TOGGLE_ACCEPT_CHECKBOX | boolean | Will fire after toggle 'Я соглашаюсь на обработку персональных данных' checkbox |

Fields visibility

import AccountForm from '@uzum-tech/account-form';

const accountForm = new AccountForm();

// Show/hide single field
accountForm.showFields('name');
accountForm.hideFields('name');

// Show/hide multiple fields
accountForm.showFields('name', 'phone');
accountForm.hideFields('name', 'phone');

Default values

import AccountForm, { AccountProduct } from '@uzum-tech/account-form';

const accountForm = new AccountForm();

accountForm.setDefaultFields({
  product: AccountProduct.ACCOUNT_IN_SOUMS
});

Custom request sending

If you return a non-empty string, it will be displayed as error text.
If nothing is returned, the response will be considered successful

import AccountForm, { AccountApplication } from '@uzum-tech/account-form';

const accountForm = new AccountForm();

accountForm.onRequest = (payload: AccountApplication) => {
  // Logic for sending the request
};

Toggle pinfl

updates the mask
updates localization
if necessary, trims the original field value
emits the event TOGGLE_ACCEPT_CHECKBOX

import AccountForm from '@uzum-tech/account-form';

const accountForm = new AccountForm();

// To support both INN and PINFL
accountForm.withPinfl();

// To leave only the INN
accountForm.withoutPinfl();

API Version

by default version is 2.0
version will send in header X-Api-Version

import { ApiVersion } from '@uzum-tech/account-form';

const accountForm = new AccountForm();

// Change version
accountForm.apiVersion = ApiVersion.v3; // Available keys - v1-v4

// Clear version in order to remove X-Api-Version header
accountForm.apiVersion = undefined;

Custom response callback

If you want to handle the response you can pass the function

import AccountForm from '@uzum-tech/account-form';

const accountForm = new AccountForm();

accountForm.onResponse = (response: ApiResponse<ELMAResponse>): void => {
  // Logic for handling the response
};

Update text for send button

If you want to update text of send button, you can use method setSendButtonLocale
The method accepts text as a text, that should be replaced
BE CAREFULL: After changing text, there will be no 'reactive' locale on button. That means that changing language will not force any changing in text.

import AccountForm from '@uzum-tech/account-form';

const accountForm = new AccountForm();

accountForm.setSendButtonLocale('Book a call');

Computed values

Status alerts

import AccountForm from '@uzum-tech/account-form';

const accountForm = new AccountForm();

// If you don't need to show alert then change the value to false
accountForm.autoShowAlert = false;

Manual submitting

import AccountForm from '@uzum-tech/account-form';

const accountForm = new AccountForm();

// If you need submit with validations and all other handlers
accountForm.submit();

// If you need request only without handlers
accountForm.requestOnly();

Reset

import AccountForm from '@uzum-tech/account-form';

const accountForm = new AccountForm();

// If you need disable auto reset after submit
accountForm.autoReset = false;

// If you need reset manually
accountForm.resetForm();

License

MIT license