credit card modal window translated
This commit is contained in:
parent
7542d5a3d4
commit
ab3acb83d2
|
|
@ -1,5 +1,6 @@
|
|||
// IMPORT MODULES
|
||||
import React, { useState, useEffect } from "react";
|
||||
import React, { useState, useEffect, useContext } from "react";
|
||||
import { LanguageContext } from "../../backend/LanguageContext";
|
||||
|
||||
// IMPORT COMPONENTS
|
||||
import CustomSelect from "../global/CustomSelect";
|
||||
|
|
@ -9,6 +10,7 @@ import credit from "../../images/credit-card.jpg";
|
|||
import next from "../../icons/next.svg";
|
||||
|
||||
const CardStage1 = ({ setStage, data, setData, cardData }) => {
|
||||
const { locale } = useContext(LanguageContext);
|
||||
const [inputValid, setInputValid] = useState(
|
||||
data.selected_card ? data.selected_card : false
|
||||
);
|
||||
|
|
@ -17,7 +19,12 @@ const CardStage1 = ({ setStage, data, setData, cardData }) => {
|
|||
useEffect(() => {
|
||||
if (inputValid !== "" && cardData) {
|
||||
cardData.data.map((el) => {
|
||||
if (Object.values(el).includes(inputValid)) {
|
||||
if (
|
||||
Object.values(el).includes(inputValid) ||
|
||||
Object.values(JSON.parse(el.translations[0].attribute_data)).includes(
|
||||
inputValid
|
||||
)
|
||||
) {
|
||||
setId(el.id);
|
||||
}
|
||||
});
|
||||
|
|
@ -37,9 +44,21 @@ const CardStage1 = ({ setStage, data, setData, cardData }) => {
|
|||
<section className="card-stage-1">
|
||||
<form>
|
||||
<div className="input-block">
|
||||
<label htmlFor="card">Выберите вид карты</label>
|
||||
<label htmlFor="card">
|
||||
{locale === "TUK"
|
||||
? "Kartyň görnüşini saýlaň"
|
||||
: "Выберите вид карты"}
|
||||
</label>
|
||||
<CustomSelect
|
||||
items={cardData ? cardData.data.map((el) => el.name) : [""]}
|
||||
items={
|
||||
cardData
|
||||
? locale !== "TUK"
|
||||
? cardData.data.map(
|
||||
(el) => JSON.parse(el.translations[0].attribute_data).name
|
||||
)
|
||||
: cardData.data.map((el) => el.name)
|
||||
: [""]
|
||||
}
|
||||
customId={"card"}
|
||||
blockName={"card-1-select"}
|
||||
elName={"card-1-select-el"}
|
||||
|
|
@ -48,7 +67,7 @@ const CardStage1 = ({ setStage, data, setData, cardData }) => {
|
|||
setInputValid(e);
|
||||
}}
|
||||
eTarget={true}
|
||||
placeholder="Вид карты"
|
||||
placeholder={locale === "TUK" ? "Kartyň görnüşi" : "Вид карты"}
|
||||
defaultValue={inputValid}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -61,28 +80,46 @@ const CardStage1 = ({ setStage, data, setData, cardData }) => {
|
|||
<h2>
|
||||
HalkBank -{" "}
|
||||
{cardData
|
||||
? cardData.data.map((el) => (el.id === id ? el.name : ""))
|
||||
? locale !== "TUK"
|
||||
? cardData.data.map((el) =>
|
||||
el.id === id
|
||||
? JSON.parse(el.translations[0].attribute_data).name
|
||||
: ""
|
||||
)
|
||||
: cardData.data.map((el) => (el.id === id ? el.name : ""))
|
||||
: locale === "TUK"
|
||||
? "Aýlyk karty"
|
||||
: "Зарплатная карта"}
|
||||
</h2>
|
||||
<h3>
|
||||
{cardData
|
||||
? cardData.data.map((el) => (el.id === id ? el.text : ""))
|
||||
? locale !== "TUK"
|
||||
? cardData.data.map((el) =>
|
||||
el.id === id
|
||||
? JSON.parse(el.translations[0].attribute_data).text
|
||||
: ""
|
||||
)
|
||||
: cardData.data.map((el) => (el.id === id ? el.text : ""))
|
||||
: locale === "TUK"
|
||||
? "Müşderiniň bankymyzdan alan karz pul serişdeleri “Karz kartyna geçirilýär . Müşderi “Karz karty” bank karty üsti bilen ähli nagt däl hasaplaşyk töleglerini amala aşyrýar."
|
||||
: "Банковская карта, на которую зачисляется заработная плата клиента. Открывается на основании договора между банком и предприятием. Эта карта предоставляет полный перечень услуг по безналичному платежу в терминалах, перевод денежных средств с одной зарплатной карты на другую, а также получению наличных денежных средств в банкоматах на территории Туркменистана."}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="cd-bottom">
|
||||
<div className="cd-bottom-content">
|
||||
<h3>Срок действия карты</h3>
|
||||
<h3>
|
||||
{locale === "TUK" ? "Kartyň möhleti" : "Срок действия карты"}
|
||||
</h3>
|
||||
<h2>
|
||||
{cardData
|
||||
? cardData.data.map((el) => (el.id === id ? el.term : ""))
|
||||
: "30"}{" "}
|
||||
лет
|
||||
{locale === "TUK" ? "ýyl" : "лет"}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="cd-bottom-content">
|
||||
<h3>Процентная ставка</h3>
|
||||
<h3>{locale === "TUK" ? "Göterim" : "Процентная ставка"}</h3>
|
||||
<h2>
|
||||
{" "}
|
||||
{cardData
|
||||
|
|
@ -94,7 +131,7 @@ const CardStage1 = ({ setStage, data, setData, cardData }) => {
|
|||
</h2>
|
||||
</div>
|
||||
<div className="cd-bottom-content">
|
||||
<h3>Стоимость карты</h3>
|
||||
<h3>{locale === "TUK" ? "Kartyň bahasy" : "Стоимость карты"}</h3>
|
||||
<h2>
|
||||
{" "}
|
||||
{cardData
|
||||
|
|
@ -102,7 +139,7 @@ const CardStage1 = ({ setStage, data, setData, cardData }) => {
|
|||
el.id === id ? el.card_cost : ""
|
||||
)
|
||||
: "23"}{" "}
|
||||
маната
|
||||
{locale === "TUK" ? "manat" : "маната"}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -118,7 +155,7 @@ const CardStage1 = ({ setStage, data, setData, cardData }) => {
|
|||
}}
|
||||
>
|
||||
<div>
|
||||
<h3>Продолжить</h3>
|
||||
<h3>{locale === "TUK" ? "Dowam et" : "Продолжить"}</h3>
|
||||
<div className="btn-img">
|
||||
<img src={next} alt="logout" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
// IMPORT MODULES
|
||||
import React, { useState, useEffect, useContext } from "react";
|
||||
import { UserContext } from "../../backend/UserContext";
|
||||
import { LanguageContext } from "../../backend/LanguageContext";
|
||||
|
||||
// IMPORT VALIDATORS
|
||||
import { ValidateEmail } from "../../validators/ValidateEmail";
|
||||
|
|
@ -12,6 +13,7 @@ import next from "../../icons/next.svg";
|
|||
import next_reverse from "../../icons/next-reverse.svg";
|
||||
|
||||
const CardStage2 = ({ setStage, data, setData }) => {
|
||||
const { locale } = useContext(LanguageContext);
|
||||
const { user } = useContext(UserContext);
|
||||
const [inputValid, setInputValid] = useState({
|
||||
surname: data.surname ? data.surname : user ? user.surname : null,
|
||||
|
|
@ -54,7 +56,8 @@ const CardStage2 = ({ setStage, data, setData }) => {
|
|||
<div className="form-top">
|
||||
<div className="input-block">
|
||||
<label htmlFor="surname">
|
||||
Фамилия<span>*</span>
|
||||
{locale === "TUK" ? "Familiýasy" : "Фамилия"}
|
||||
<span>*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -71,7 +74,8 @@ const CardStage2 = ({ setStage, data, setData }) => {
|
|||
</div>
|
||||
<div className="input-block">
|
||||
<label htmlFor="name">
|
||||
Имя<span>*</span>
|
||||
{locale === "TUK" ? "Ady" : "Имя"}
|
||||
<span>*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -88,7 +92,8 @@ const CardStage2 = ({ setStage, data, setData }) => {
|
|||
</div>
|
||||
<div className="input-block">
|
||||
<label htmlFor="fathers">
|
||||
Отчество<span>*</span>
|
||||
{locale === "TUK" ? "Atasynyň ady" : "Отчество"}
|
||||
<span>*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -105,7 +110,8 @@ const CardStage2 = ({ setStage, data, setData }) => {
|
|||
</div>
|
||||
<div className="input-block">
|
||||
<label htmlFor="date">
|
||||
Дата рождения<span>*</span>
|
||||
{locale === "TUK" ? "Doglan senesi" : "Дата рождения"}
|
||||
<span>*</span>
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
|
|
@ -124,7 +130,8 @@ const CardStage2 = ({ setStage, data, setData }) => {
|
|||
</div>
|
||||
<div className="input-block">
|
||||
<label htmlFor="passport">
|
||||
Паспортные данные<span>*</span>
|
||||
{locale === "TUK" ? "Pasport maglumatlary" : "Паспортные данные"}
|
||||
<span>*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -141,7 +148,10 @@ const CardStage2 = ({ setStage, data, setData }) => {
|
|||
</div>
|
||||
<div className="input-block">
|
||||
<label htmlFor="p-address">
|
||||
Место выдачи паспорта<span>*</span>
|
||||
{locale === "TUK"
|
||||
? "Pasportyň berlen ýeri"
|
||||
: "Место выдачи паспорта"}
|
||||
<span>*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -158,7 +168,8 @@ const CardStage2 = ({ setStage, data, setData }) => {
|
|||
</div>
|
||||
<div className="input-block">
|
||||
<label htmlFor="address">
|
||||
Адрес проживания<span>*</span>
|
||||
{locale === "TUK" ? "Ýaşaýan salgysy" : "Адрес проживания"}
|
||||
<span>*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -175,7 +186,8 @@ const CardStage2 = ({ setStage, data, setData }) => {
|
|||
</div>
|
||||
<div className="input-block">
|
||||
<label htmlFor="mail">
|
||||
Электронная почта<span>*</span>
|
||||
{locale === "TUK" ? "Email" : "Электронная почта"}
|
||||
<span>*</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
|
|
@ -192,7 +204,8 @@ const CardStage2 = ({ setStage, data, setData }) => {
|
|||
</div>
|
||||
<div className="input-block">
|
||||
<label htmlFor="mobile">
|
||||
Мобильный телефон<span>*</span>
|
||||
{locale === "TUK" ? "Mobil telefon" : "Мобильный телефон"}
|
||||
<span>*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -208,7 +221,9 @@ const CardStage2 = ({ setStage, data, setData }) => {
|
|||
/>
|
||||
</div>
|
||||
<div className="input-block">
|
||||
<label htmlFor="homeTel">Домашний телефон</label>
|
||||
<label htmlFor="homeTel">
|
||||
{locale === "TUK" ? "Öý telefon" : "Домашний телефон"}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="homeTel"
|
||||
|
|
@ -241,7 +256,7 @@ const CardStage2 = ({ setStage, data, setData }) => {
|
|||
setStage(1);
|
||||
}}
|
||||
>
|
||||
Назад
|
||||
{locale === "TUK" ? "Yza" : "Назад"}
|
||||
</h3>
|
||||
</div>
|
||||
</button>
|
||||
|
|
@ -267,7 +282,7 @@ const CardStage2 = ({ setStage, data, setData }) => {
|
|||
}}
|
||||
>
|
||||
<div>
|
||||
<h3>Продолжить</h3>
|
||||
<h3>{locale === "TUK" ? "Dowam et" : "Продолжить"}</h3>
|
||||
<div className="btn-img">
|
||||
<img src={next} alt="logout" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
// IMPORT MODULES
|
||||
import React, { useState, useEffect } from "react";
|
||||
import React, { useState, useEffect, useContext } from "react";
|
||||
import { LanguageContext } from "../../backend/LanguageContext";
|
||||
import { branchData } from "../../localization/branchData";
|
||||
import { timeSheet } from "../../data/timeSheet";
|
||||
|
||||
// IMPORT VALIDATORS
|
||||
import { getDate } from "../../helpers/Date";
|
||||
|
|
@ -12,6 +15,8 @@ import next_reverse from "../../icons/next-reverse.svg";
|
|||
import CustomSelect from "../global/CustomSelect";
|
||||
|
||||
const CardStage3 = ({ setStage, data, setData }) => {
|
||||
const { locale } = useContext(LanguageContext);
|
||||
const branch = branchData();
|
||||
const [inputValid, setInputValid] = useState({
|
||||
region: data.region ? data.region : null,
|
||||
affiliate: data.branch ? data.branch : null,
|
||||
|
|
@ -42,33 +47,71 @@ const CardStage3 = ({ setStage, data, setData }) => {
|
|||
<div className="card-stage-3-top">
|
||||
<div className="input-block">
|
||||
<label htmlFor="region">
|
||||
Регион<span>*</span>
|
||||
{locale === "TUK" ? "Welaýat" : "Регион"}
|
||||
<span>*</span>
|
||||
</label>
|
||||
<CustomSelect
|
||||
items={["Ашхабад", "Мары"]}
|
||||
items={locale === "TUK" ? branch.regions.TUK : branch.regions.RUS}
|
||||
customId={"region"}
|
||||
blockName={"card-3-select"}
|
||||
elName={"card-3-select-el"}
|
||||
name={"region"}
|
||||
placeholder="Выберите регион"
|
||||
stateSetter={(state) =>
|
||||
setInputValid({ ...inputValid, region: state })
|
||||
placeholder={
|
||||
locale === "TUK" ? "Welaýaty saýlaň" : "Выберите регион"
|
||||
}
|
||||
stateSetter={(state) => {
|
||||
setInputValid({ ...inputValid, region: state });
|
||||
}}
|
||||
eTarget={true}
|
||||
defaultValue={inputValid.region}
|
||||
/>
|
||||
</div>
|
||||
<div className="input-block">
|
||||
<label htmlFor="affiliate">
|
||||
Филиал<span>*</span>
|
||||
{locale === "TUK" ? "Filial" : "Филиал"}
|
||||
<span>*</span>
|
||||
</label>
|
||||
<CustomSelect
|
||||
items={["1", "2"]}
|
||||
items={
|
||||
inputValid.region === "Город Ашхабад" ||
|
||||
inputValid.region === "Aşgabat şäheri"
|
||||
? locale === "TUK"
|
||||
? branch.Ashgabat.TUK
|
||||
: branch.Ashgabat.RUS
|
||||
: inputValid.region === "Ахалский регион" ||
|
||||
inputValid.region === "Ahal"
|
||||
? locale === "TUK"
|
||||
? branch.Ahal.TUK
|
||||
: branch.Ahal.RUS
|
||||
: inputValid.region === "Балканский регион" ||
|
||||
inputValid.region === "Balkan"
|
||||
? locale === "TUK"
|
||||
? branch.Balkan.TUK
|
||||
: branch.Balkan.RUS
|
||||
: inputValid.region === "Дашогузский регион" ||
|
||||
inputValid.region === "Daşoguz"
|
||||
? locale === "TUK"
|
||||
? branch.Dashoguz.TUK
|
||||
: branch.Dashoguz.RUS
|
||||
: inputValid.region === "Лебапский регион" ||
|
||||
inputValid.region === "Lebap"
|
||||
? locale === "TUK"
|
||||
? branch.Lebap.TUK
|
||||
: branch.Lebap.RUS
|
||||
: inputValid.region === "Марыйский регион" ||
|
||||
inputValid.region === "Mary"
|
||||
? locale === "TUK"
|
||||
? branch.Mary.TUK
|
||||
: branch.Mary.RUS
|
||||
: [""]
|
||||
}
|
||||
customId={"affiliate"}
|
||||
blockName={"card-3-select"}
|
||||
elName={"card-3-select-el"}
|
||||
name={"affiliate"}
|
||||
placeholder="Выберите филиал"
|
||||
placeholder={
|
||||
locale === "TUK" ? "Şahamçany saýlaň" : "Выберите филиал"
|
||||
}
|
||||
stateSetter={(state) =>
|
||||
setInputValid({ ...inputValid, affiliate: state })
|
||||
}
|
||||
|
|
@ -78,7 +121,10 @@ const CardStage3 = ({ setStage, data, setData }) => {
|
|||
</div>
|
||||
<div className="input-block">
|
||||
<label htmlFor="date">
|
||||
Выбрать дату прихода в банк<span>*</span>
|
||||
{locale === "TUK"
|
||||
? "Banka gelmek gününi saýlaň"
|
||||
: "Выбрать дату прихода в банк"}
|
||||
<span>*</span>
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
|
|
@ -97,15 +143,18 @@ const CardStage3 = ({ setStage, data, setData }) => {
|
|||
</div>
|
||||
<div className="input-block">
|
||||
<label htmlFor="time">
|
||||
Выбрать приемлемое время<span>*</span>
|
||||
{locale === "TUK"
|
||||
? "Banka gelmek gününi saýlaň"
|
||||
: "Выбрать приемлемое время"}
|
||||
<span>*</span>
|
||||
</label>
|
||||
<CustomSelect
|
||||
items={["1", "2"]}
|
||||
items={timeSheet}
|
||||
customId={"time"}
|
||||
blockName={"card-3-select"}
|
||||
elName={"card-3-select-el"}
|
||||
name={"time"}
|
||||
placeholder="Выберите время"
|
||||
placeholder={locale === "TUK" ? "Wagty saýlaň" : "Выберите время"}
|
||||
stateSetter={(state) =>
|
||||
setInputValid({ ...inputValid, time: state })
|
||||
}
|
||||
|
|
@ -115,7 +164,8 @@ const CardStage3 = ({ setStage, data, setData }) => {
|
|||
</div>
|
||||
<div className="input-block">
|
||||
<label htmlFor="code">
|
||||
Кодовое слово<span>*</span>
|
||||
{locale === "TUK" ? "Gizlin söz" : "Кодовое слово"}
|
||||
<span>*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -144,8 +194,23 @@ const CardStage3 = ({ setStage, data, setData }) => {
|
|||
setInputValid({ ...inputValid, sms: e.target.checked });
|
||||
}}
|
||||
/>
|
||||
<label htmlFor="sms">SMS - подключение</label>
|
||||
<label htmlFor="sms">
|
||||
{locale === "TUK" ? "SMS-birikdirme" : "SMS - подключение"}
|
||||
</label>
|
||||
</div>
|
||||
{locale === "TUK" ? (
|
||||
inputValid.sms ? (
|
||||
<h3 className="green">Nomeriňize SMS iberiler</h3>
|
||||
) : (
|
||||
""
|
||||
)
|
||||
) : inputValid.sms ? (
|
||||
<h3 className="green">
|
||||
На ваш номер будет отправлено СМС-уведомление
|
||||
</h3>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
<div className="cu-bottom card-stage-3-bottom">
|
||||
<button
|
||||
|
|
@ -164,7 +229,7 @@ const CardStage3 = ({ setStage, data, setData }) => {
|
|||
setStage(2);
|
||||
}}
|
||||
>
|
||||
Назад
|
||||
{locale === "TUK" ? "Yza" : "Назад"}
|
||||
</h3>
|
||||
</div>
|
||||
</button>
|
||||
|
|
@ -187,7 +252,7 @@ const CardStage3 = ({ setStage, data, setData }) => {
|
|||
}}
|
||||
>
|
||||
<div>
|
||||
<h3>Продолжить</h3>
|
||||
<h3>{locale === "TUK" ? "Dowam et" : "Продолжить"}</h3>
|
||||
<div className="btn-img">
|
||||
<img src={next} alt="logout" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// IMPORT MODULES
|
||||
import React, { useState, useEffect } from "react";
|
||||
import React, { useState, useEffect, useContext } from "react";
|
||||
import { LanguageContext } from "../../backend/LanguageContext";
|
||||
|
||||
// IMPORT IMAGES
|
||||
import remove from "../../icons/remove.svg";
|
||||
|
|
@ -8,6 +9,7 @@ import arrow from "../../icons/arrow.svg";
|
|||
import next_reverse from "../../icons/next-reverse.svg";
|
||||
|
||||
const CardStage4 = ({ setStage, data, setData }) => {
|
||||
const { locale } = useContext(LanguageContext);
|
||||
const [files, setFiles] = useState(data.file ? data.file : []);
|
||||
|
||||
const [btnEnabled, setBtnEnabled] = useState(false);
|
||||
|
|
@ -25,8 +27,9 @@ const CardStage4 = ({ setStage, data, setData }) => {
|
|||
<form>
|
||||
<div className="cd-top-4">
|
||||
<h2>
|
||||
Для оформления заявки на получения кредита загрузите требуемые
|
||||
документы.
|
||||
{locale === "TUK"
|
||||
? "Karz almak üçin ýüzlenmäni resmileşdirmek üçin talap edilýän resminamalary ýükläň"
|
||||
: "Для оформления заявки на получения кредита загрузите требуемые документы."}
|
||||
</h2>
|
||||
<div
|
||||
className="data-block docs"
|
||||
|
|
@ -35,7 +38,11 @@ const CardStage4 = ({ setStage, data, setData }) => {
|
|||
}}
|
||||
>
|
||||
<div className="data-title">
|
||||
<h4>Требования и документы</h4>
|
||||
<h4>
|
||||
{locale === "TUK"
|
||||
? "Talaplar we resminamalar"
|
||||
: "Требования и документы"}
|
||||
</h4>
|
||||
<div className="data-img">
|
||||
<img src={arrow} alt="arrow" />
|
||||
</div>
|
||||
|
|
@ -53,7 +60,9 @@ const CardStage4 = ({ setStage, data, setData }) => {
|
|||
</div>
|
||||
<div className="cd-bottom-4">
|
||||
<div>
|
||||
<label htmlFor="file">Загрузить файл</label>
|
||||
<label htmlFor="file">
|
||||
{locale === "TUK" ? "Faýl ýükläň" : "Загрузить файл"}
|
||||
</label>
|
||||
<input
|
||||
id="file"
|
||||
type="file"
|
||||
|
|
@ -106,7 +115,7 @@ const CardStage4 = ({ setStage, data, setData }) => {
|
|||
setStage(3);
|
||||
}}
|
||||
>
|
||||
Назад
|
||||
{locale === "TUK" ? "Yza" : "Назад"}
|
||||
</h3>
|
||||
</div>
|
||||
</button>
|
||||
|
|
@ -120,7 +129,7 @@ const CardStage4 = ({ setStage, data, setData }) => {
|
|||
}}
|
||||
>
|
||||
<div>
|
||||
<h3>Продолжить</h3>
|
||||
<h3>{locale === "TUK" ? "Dowam et" : "Продолжить"}</h3>
|
||||
<div className="btn-img">
|
||||
<img src={next} alt="logout" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
// IMPORT MODULES
|
||||
import React, { useContext } from "react";
|
||||
import { UserContext } from "../../backend/UserContext";
|
||||
import { LanguageContext } from "../../backend/LanguageContext";
|
||||
|
||||
// IMPORT IMAGES
|
||||
import next from "../../icons/next.svg";
|
||||
|
|
@ -22,6 +23,7 @@ const CardStage6 = ({
|
|||
setSuccess,
|
||||
setError,
|
||||
}) => {
|
||||
const { locale } = useContext(LanguageContext);
|
||||
const { setUser } = useContext(UserContext);
|
||||
const token = localStorage.getItem("userToken");
|
||||
const postUrl = destination + "/online_card";
|
||||
|
|
@ -32,65 +34,86 @@ const CardStage6 = ({
|
|||
<div className="cd-6-top">
|
||||
<ul className="cd-6-list">
|
||||
<li>
|
||||
<p>Фамилия:</p>
|
||||
<p>{locale === "TUK" ? "Familiýasy" : "Фамилия"}:</p>
|
||||
<h4>{data.surname ? data.surname : "-"}</h4>
|
||||
</li>
|
||||
<li>
|
||||
<p>Имя:</p>
|
||||
<p>{locale === "TUK" ? "Ady" : "Имя"}:</p>
|
||||
<h4>{data.name ? data.name : "-"}</h4>
|
||||
</li>
|
||||
<li>
|
||||
<p>Отчество:</p>
|
||||
<p>{locale === "TUK" ? "Atasynyň ady" : "Отчество"}:</p>
|
||||
<h4>{data.middlename ? data.middlename : "-"}</h4>
|
||||
</li>
|
||||
<li>
|
||||
<p>Дата рождения:</p>
|
||||
<p>{locale === "TUK" ? "Doglan senesi" : "Дата рождения"}:</p>
|
||||
<h4>{data.birthdate ? reformatDate(data.birthdate) : "-"}</h4>
|
||||
</li>
|
||||
<li>
|
||||
<p>Мобильный телефон:</p>
|
||||
<p>{locale === "TUK" ? "Mobil telefon" : "Мобильный телефон"}:</p>
|
||||
<h4>{data.phone_number ? data.phone_number : "-"}</h4>
|
||||
</li>
|
||||
<li>
|
||||
<p>Домашний телефон:</p>
|
||||
<p>{locale === "TUK" ? "Öý telefon" : "Домашний телефон"}:</p>
|
||||
<h4>{data.home_phone_number ? data.home_phone_number : "-"}</h4>
|
||||
</li>
|
||||
<li>
|
||||
<p>Эл. адрес:</p>
|
||||
<p>{locale === "TUK" ? "Email" : "Эл. адрес"}:</p>
|
||||
<h4>{data.email ? data.email : "-"}</h4>
|
||||
</li>
|
||||
<li>
|
||||
<p>SMS оповещение:</p>
|
||||
<p>{locale === "TUK" ? "SMS-birikdirme" : "SMS - подключение"}:</p>
|
||||
<h4>
|
||||
{data.sms_notification
|
||||
? data.sms_notification === true
|
||||
? "Да"
|
||||
: "Нет"
|
||||
: "-"}
|
||||
{locale === "TUK"
|
||||
? data.sms_notification
|
||||
? "Hawa"
|
||||
: "Ýok"
|
||||
: data.sms_notification
|
||||
? "Да"
|
||||
: "Нет"}
|
||||
{/* {data.sms_notification
|
||||
? locale === "RUS"
|
||||
? data.sms_notification === true
|
||||
? "Да"
|
||||
: "Нет"
|
||||
: data.sms_notification === true
|
||||
? "Hawa"
|
||||
: "Ýok"
|
||||
: "-"} */}
|
||||
</h4>
|
||||
</li>
|
||||
<li>
|
||||
<p>Серия паспорта:</p>
|
||||
<p>{locale === "TUK" ? "Pasportyň seriýasy" : "Серия паспорта"}:</p>
|
||||
<h4>{data.passport_series ? data.passport_series : "-"}</h4>
|
||||
</li>
|
||||
<li>
|
||||
<p>Кем выдан паспорт:</p>
|
||||
<p>
|
||||
{locale === "TUK"
|
||||
? "Pasport kim tarapyndan berildi"
|
||||
: "Кем выдан паспорт"}
|
||||
:
|
||||
</p>
|
||||
<h4>{data.passport_by ? data.passport_by : "-"}</h4>
|
||||
</li>
|
||||
<li>
|
||||
<p>Адрес прописки:</p>
|
||||
<p>{locale === "TUK" ? "Ýaşaýan salgysy" : "Адрес прописки"}:</p>
|
||||
<h4>{data.place_of_residence ? data.place_of_residence : "-"}</h4>
|
||||
</li>
|
||||
<li>
|
||||
<p>Регион:</p>
|
||||
<p>{locale === "TUK" ? "Welaýat" : "Регион"}:</p>
|
||||
<h4>{data.region ? data.region : "-"}</h4>
|
||||
</li>
|
||||
<li>
|
||||
<p>Филиал:</p>
|
||||
<p>{locale === "TUK" ? "Filial" : "Филиал"}:</p>
|
||||
<h4>{data.branch ? data.branch : "-"}</h4>
|
||||
</li>
|
||||
<li>
|
||||
<p>Дата прихода в банк:</p>
|
||||
<p>
|
||||
{locale === "TUK"
|
||||
? "Banka gelmek gününi saýlaň "
|
||||
: "Дата прихода в банк"}
|
||||
:
|
||||
</p>
|
||||
<h4>
|
||||
{data.date_arrival_bank
|
||||
? reformatDate(data.date_arrival_bank)
|
||||
|
|
@ -98,11 +121,11 @@ const CardStage6 = ({
|
|||
</h4>
|
||||
</li>
|
||||
<li>
|
||||
<p>Выбранное время:</p>
|
||||
<p>{locale === "TUK" ? "Saýlanan wagt" : "Выбранное время"}:</p>
|
||||
<h4>{data.selected_time ? data.selected_time : "-"}</h4>
|
||||
</li>
|
||||
<li>
|
||||
<p>Кодовое слово:</p>
|
||||
<p>{locale === "TUK" ? "Gizlin söz" : "Кодовое слово"}:</p>
|
||||
<h4>{data.the_codeword ? data.the_codeword : "-"}</h4>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -124,7 +147,7 @@ const CardStage6 = ({
|
|||
setStage(4);
|
||||
}}
|
||||
>
|
||||
Редактировать
|
||||
{locale === "TUK" ? "Redaktirlemek" : "Редактировать"}
|
||||
</h3>
|
||||
</div>
|
||||
</button>
|
||||
|
|
@ -151,7 +174,7 @@ const CardStage6 = ({
|
|||
}}
|
||||
>
|
||||
<div>
|
||||
<h3>Подтверждаю</h3>
|
||||
<h3>{locale === "TUK" ? "Tassyklaýaryn" : "Подтверждаю"}</h3>
|
||||
<div className="btn-img">
|
||||
<img src={next} alt="logout" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// IMPORT MODULES
|
||||
import React, { useState, useRef, useEffect } from "react";
|
||||
import React, { useState, useRef, useEffect, useContext } from "react";
|
||||
import { LanguageContext } from "../../backend/LanguageContext";
|
||||
import axios from "axios";
|
||||
|
||||
// IMPORT IMAGES
|
||||
|
|
@ -32,6 +33,7 @@ const ModalForm = ({
|
|||
setError,
|
||||
}) => {
|
||||
const window = useRef();
|
||||
const { locale } = useContext(LanguageContext);
|
||||
const [data, setData] = useState({});
|
||||
const [cardData, setCardData] = useState();
|
||||
|
||||
|
|
@ -42,6 +44,7 @@ const ModalForm = ({
|
|||
.then((res) => {
|
||||
if (isMounted) {
|
||||
setCardData(res.data);
|
||||
console.log(res.data);
|
||||
}
|
||||
})
|
||||
.catch();
|
||||
|
|
@ -57,7 +60,11 @@ const ModalForm = ({
|
|||
<div className="modal-inner" ref={window}>
|
||||
<div className="modal-window">
|
||||
<div className="modal-top">
|
||||
<h2>Онлайн заявка для получения карты</h2>
|
||||
<h2>
|
||||
{locale === "TUK"
|
||||
? "Kart almak üçin onlaýn-ýüzlenme"
|
||||
: "Онлайн-заявка для получения карты"}
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
className="exit-btn"
|
||||
|
|
@ -73,7 +80,11 @@ const ModalForm = ({
|
|||
<div className="modal-middle">
|
||||
<div className="icon-block active">
|
||||
<Card className="modal-icon" />
|
||||
<h3 className="icon-title">Выберите вид карты</h3>
|
||||
<h3 className="icon-title">
|
||||
{locale === "TUK"
|
||||
? "Kartyň görnüşini saýlaň"
|
||||
: "Выберите вид карты"}
|
||||
</h3>
|
||||
</div>
|
||||
<div className={stage > 1 ? "line-block active" : "line-block"}>
|
||||
<Lines className="lines" />
|
||||
|
|
@ -81,7 +92,9 @@ const ModalForm = ({
|
|||
</div>
|
||||
<div className={stage > 1 ? "icon-block active" : "icon-block"}>
|
||||
<Document className="modal-icon" />
|
||||
<h3 className="icon-title">Личные данные</h3>
|
||||
<h3 className="icon-title">
|
||||
{locale === "TUK" ? "Şahsy maglumatlar" : "Личные данные"}
|
||||
</h3>
|
||||
</div>
|
||||
<div className={stage > 2 ? "line-block active" : "line-block"}>
|
||||
<Lines className="lines" />
|
||||
|
|
@ -89,7 +102,11 @@ const ModalForm = ({
|
|||
</div>
|
||||
<div className={stage > 2 ? "icon-block active" : "icon-block"}>
|
||||
<Edit className="modal-icon" />
|
||||
<h3 className="icon-title">Данные для карты</h3>
|
||||
<h3 className="icon-title">
|
||||
{locale === "TUK"
|
||||
? "Kart üçin maglumatlar"
|
||||
: "Данные для карты"}
|
||||
</h3>
|
||||
</div>
|
||||
<div className={stage > 3 ? "line-block active" : "line-block"}>
|
||||
<Lines className="lines" />
|
||||
|
|
@ -97,7 +114,11 @@ const ModalForm = ({
|
|||
</div>
|
||||
<div className={stage > 3 ? "icon-block active" : "icon-block"}>
|
||||
<Note className="modal-icon" />
|
||||
<h3 className="icon-title">Требования и документы</h3>
|
||||
<h3 className="icon-title">
|
||||
{locale === "TUK"
|
||||
? "Talaplar we resminamalar"
|
||||
: "Требования и документы"}
|
||||
</h3>
|
||||
</div>
|
||||
<div className={stage > 4 ? "line-block active" : "line-block"}>
|
||||
<Lines className="lines" />
|
||||
|
|
@ -105,7 +126,9 @@ const ModalForm = ({
|
|||
</div>
|
||||
<div className={stage > 4 ? "icon-block active" : "icon-block"}>
|
||||
<Task className="modal-icon" />
|
||||
<h3 className="icon-title">Отправка</h3>
|
||||
<h3 className="icon-title">
|
||||
{locale === "TUK" ? "Ugratmak" : "Отправка"}
|
||||
</h3>
|
||||
</div>
|
||||
<div className={stage > 5 ? "line-block active" : "line-block"}>
|
||||
<Lines className="lines" />
|
||||
|
|
@ -113,39 +136,59 @@ const ModalForm = ({
|
|||
</div>
|
||||
<div className={stage > 5 ? "icon-block active" : "icon-block"}>
|
||||
<Receipt className="modal-icon" />
|
||||
<h3 className="icon-title">Оплата</h3>
|
||||
<h3 className="icon-title">
|
||||
{locale === "TUK" ? "Töleg" : "Оплата"}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-middle modal-middle-mobile">
|
||||
{stage === 1 ? (
|
||||
<div className="icon-block active">
|
||||
<Card className="modal-icon" />
|
||||
<h3 className="icon-title">Выберите вид карты</h3>
|
||||
<h3 className="icon-title">
|
||||
{locale === "TUK"
|
||||
? "Kartyň görnüşini saýlaň"
|
||||
: "Выберите вид карты"}
|
||||
</h3>
|
||||
</div>
|
||||
) : stage === 2 ? (
|
||||
<div className="icon-block active">
|
||||
<Document className="modal-icon" />
|
||||
<h3 className="icon-title">Личные данные</h3>
|
||||
<h3 className="icon-title">
|
||||
{locale === "TUK" ? "Şahsy maglumatlar" : "Личные данные"}
|
||||
</h3>
|
||||
</div>
|
||||
) : stage === 3 ? (
|
||||
<div className="icon-block active">
|
||||
<Edit className="modal-icon" />
|
||||
<h3 className="icon-title">Данные для карты</h3>
|
||||
<h3 className="icon-title">
|
||||
{locale === "TUK"
|
||||
? "Kart üçin maglumatlar"
|
||||
: "Данные для карты"}
|
||||
</h3>
|
||||
</div>
|
||||
) : stage === 4 ? (
|
||||
<div className="icon-block active">
|
||||
<Note className="modal-icon" />
|
||||
<h3 className="icon-title">Требования и документы</h3>
|
||||
<h3 className="icon-title">
|
||||
{locale === "TUK"
|
||||
? "Talaplar we resminamalar"
|
||||
: "Требования и документы"}
|
||||
</h3>
|
||||
</div>
|
||||
) : stage === 5 ? (
|
||||
<div className="icon-block active">
|
||||
<Task className="modal-icon" />
|
||||
<h3 className="icon-title">Отправка</h3>
|
||||
<h3 className="icon-title">
|
||||
{locale === "TUK" ? "Ugratmak" : "Отправка"}
|
||||
</h3>
|
||||
</div>
|
||||
) : stage === 6 ? (
|
||||
<div className="icon-block active">
|
||||
<Receipt className="modal-icon" />
|
||||
<h3 className="icon-title">Оплата</h3>
|
||||
<h3 className="icon-title">
|
||||
{locale === "TUK" ? "Töleg" : "Оплата"}
|
||||
</h3>
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
export const timeSheet = [
|
||||
"09:00",
|
||||
"10:00",
|
||||
"11:00",
|
||||
"12:00",
|
||||
"14:00",
|
||||
"15:00",
|
||||
"16:00",
|
||||
"17:00",
|
||||
"18:00",
|
||||
];
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
export const branchData = () => {
|
||||
return {
|
||||
regions: {
|
||||
TUK: ["Aşgabat şäheri", "Ahal", "Balkan", "Daşoguz", "Lebap", "Mary"],
|
||||
RUS: [
|
||||
"Город Ашхабад",
|
||||
"Ахалский регион",
|
||||
"Балканский регион",
|
||||
"Дашогузский регион",
|
||||
"Лебапский регион",
|
||||
"Марыйский регион",
|
||||
],
|
||||
},
|
||||
Ashgabat: {
|
||||
TUK: [
|
||||
"Merkezi diwan",
|
||||
"Bagtyýarlyk şahamça",
|
||||
"Berkararlyk şahamça",
|
||||
"Büzmeýin şahamça",
|
||||
"Köpetdag şahamça",
|
||||
"Çandybil şahamça",
|
||||
"Paýhas şahamça",
|
||||
],
|
||||
RUS: [
|
||||
"Центральный офис",
|
||||
"Филиал Багтыярлык",
|
||||
"Филиал Беркарарлык",
|
||||
"Филиал Бюзмейин",
|
||||
"Филиал Копетдаг",
|
||||
"Филиал Чандыбиль",
|
||||
"Филиал Пайхас",
|
||||
],
|
||||
},
|
||||
Ahal: {
|
||||
TUK: [
|
||||
"Ak bugdaý şahamça",
|
||||
"Bäherden şahamça",
|
||||
"Gökdepe şahamça",
|
||||
"Tejen şahamça",
|
||||
],
|
||||
RUS: [
|
||||
"Филиaл Ак бугдай",
|
||||
"Филиал Бахерден",
|
||||
"Филиал Гекдепе",
|
||||
"Филиал Теджен",
|
||||
],
|
||||
},
|
||||
Balkan: {
|
||||
TUK: ["Balkan şahamça", "Türkmenbaşy şahamça", "Esenguly şahamça"],
|
||||
RUS: ["Филиал Балкан", "Филиал Туркменбаши", "Филиал Эсенгулы"],
|
||||
},
|
||||
Dashoguz: {
|
||||
TUK: [
|
||||
"Daşoguz şahamça",
|
||||
"Köneurgenç şahamça",
|
||||
"Ruhubelent şahamça",
|
||||
"S. Türkmenbaşy şahamça",
|
||||
],
|
||||
RUS: [
|
||||
"Филиал Дашогуз",
|
||||
"Филиал Конеургенч",
|
||||
"Филиал Рухубелент",
|
||||
"Филиал С. Туркменбаши",
|
||||
],
|
||||
},
|
||||
Lebap: {
|
||||
TUK: [
|
||||
"Lebap şahamça",
|
||||
"Dostluk şahamça",
|
||||
"Galkynyş şahamça",
|
||||
"Kerki şahamça",
|
||||
"Saýat şahamça",
|
||||
"Seýdi şahamça",
|
||||
"Darganata şahamça",
|
||||
],
|
||||
RUS: [
|
||||
"Филиал Лебап",
|
||||
"Филиал Достлук",
|
||||
"Филиал Галкыныш",
|
||||
"Филиал Керки",
|
||||
"Филиал Саят",
|
||||
"Филиал Сейди",
|
||||
"Филиал Дарганата",
|
||||
],
|
||||
},
|
||||
Mary: {
|
||||
TUK: [
|
||||
"Mary şahamça",
|
||||
"Ýöleten şahamça",
|
||||
"Murgap şahamça",
|
||||
"Sakarçäge şahamça",
|
||||
"Tagtabazar şahamça",
|
||||
"Baýramaly şahamça",
|
||||
],
|
||||
RUS: [
|
||||
"Филиал Мары",
|
||||
"Филиал Ёлетен",
|
||||
"Филиал Мургап",
|
||||
"Филиал Сакарчяге",
|
||||
"Филиал Тагтабазар",
|
||||
"Филиал Байрамалы",
|
||||
],
|
||||
},
|
||||
};
|
||||
};
|
||||
Loading…
Reference in New Issue