validation done

src/components/ImmediateCreditsStages/AcceptStage.js

@@ -16,6 +16,11 @@ const schema = z.object({
 
 const AcceptStage = ({ setStage, recepientAmount, creditDuration }) => {
   const { locale } = useContext(LanguageContext);
+  const [phoneNumber, setPhoneNumber] = useState('');
+
+  const handlePhoneNumber = (e) => {
+    setPhoneNumber(e.target.value);
+  };
 
   const {
     register,
@@ -82,7 +87,16 @@ const AcceptStage = ({ setStage, recepientAmount, creditDuration }) => {
                 ? 'Sign up'
                 : 'Hasaba almak'}
             </label>
-            <input {...register('phoneNumber')} type="text" id="phone-number" />
+            <div className="phone-starter">
+              <span>+993</span>
+              <input
+                type="number"
+                id="phone-number"
+                value={phoneNumber}
+                onChange={handlePhoneNumber}
+                placeholder="61324165"
+              />
+            </div>
             {/* {errors.phoneNumber && <span>{errors.phoneNumber.message}</span>} */}
           </div>
         </div>
@@ -103,7 +117,11 @@ const AcceptStage = ({ setStage, recepientAmount, creditDuration }) => {
               </h3>
             </div>
           </button>
-          <button type="button" className="sign-btn cu-btn" onClick={() => setStage(9)}>
+          <button
+            type="button"
+            className="sign-btn cu-btn"
+            disabled={phoneNumber.length !== 8 ? true : false}
+            onClick={() => setStage(9)}>
             <div>
               <h3>
                 {locale === 'TKM'

src/components/ImmediateCreditsStages/CardDetails.js

@@ -17,6 +17,12 @@ const schema = z.object({
 const CardDetails = ({ setStage }) => {
   const { locale } = useContext(LanguageContext);
 
+  const [cardDetails, setCardDetails] = useState('');
+
+  const handleCardDetails = (e) => {
+    setCardDetails(e.target.value);
+  };
+
   const {
     register,
     handleSubmit,
@@ -36,7 +42,7 @@ const CardDetails = ({ setStage }) => {
           {locale === 'TKM'
             ? 'Karzyň kalkulýatory'
             : locale === 'РУС'
-            ? 'Введите реквизиты карты'
+            ? 'Введите номер карты'
             : locale === 'ENG'
             ? 'Loan calculator'
             : 'Karzyň kalkulýatory'}
@@ -47,12 +53,18 @@ const CardDetails = ({ setStage }) => {
               {locale === 'TKM'
                 ? 'At'
                 : locale === 'РУС'
-                ? 'Реквизиты карты'
+                ? 'Номер карты'
                 : locale === 'ENG'
                 ? 'amount'
                 : 'At'}
             </label>
-            <input {...register('code')} type="text" id="code" />
+            <input
+              value={cardDetails}
+              onChange={handleCardDetails}
+              type="text"
+              id="code"
+              placeholder="6435980023168745"
+            />
             <span className="another-option">Оформить карту</span>
             {/* {errors.code && <span>{errors.code.message}</span>} */}
           </div>
@@ -74,7 +86,11 @@ const CardDetails = ({ setStage }) => {
               </h3>
             </div>
           </button>
-          <button type="button" className="sign-btn cu-btn" onClick={() => setStage(10)}>
+          <button
+            disabled={cardDetails.length !== 16 ? true : false}
+            type="button"
+            className="sign-btn cu-btn"
+            onClick={() => setStage(10)}>
             <div>
               <h3>
                 {locale === 'TKM'

src/components/ImmediateCreditsStages/PhoneAccept.js

@@ -17,11 +17,13 @@ const schema = z.object({
 const PhoneAccept = ({ setStage }) => {
   const { locale } = useContext(LanguageContext);
 
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm({
+  const [codeValue, setPhoneValue] = useState('');
+
+  const handleCodeChange = (e) => {
+    setPhoneValue(e.target.value);
+  };
+
+  const { register, handleSubmit } = useForm({
     resolver: zodResolver(schema),
   });
 
@@ -52,7 +54,7 @@ const PhoneAccept = ({ setStage }) => {
                 ? 'amount'
                 : 'At'}
             </label>
-            <input {...register('code')} type="text" id="code" />
+            <input value={codeValue} onChange={handleCodeChange} type="text" id="code" />
             <span className="another-option">Отправить код снова</span>
             {/* {errors.code && <span>{errors.code.message}</span>} */}
           </div>
@@ -74,7 +76,11 @@ const PhoneAccept = ({ setStage }) => {
               </h3>
             </div>
           </button>
-          <button type="button" className="sign-btn cu-btn" onClick={() => setStage(10)}>
+          <button
+            disabled={codeValue.length !== 6 ? true : false}
+            type="button"
+            className="sign-btn cu-btn"
+            onClick={() => setStage(10)}>
             <div>
               <h3>
                 {locale === 'TKM'

src/scss/_immediate-credits.scss

@@ -46,6 +46,37 @@
   }
 }
 
+.phone-starter {
+  position: relative;
+  width: 100%;
+  display: flex;
+
+  span {
+    // position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    padding: 0 1.4rem;
+    background: #e6e6e6;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.8rem;
+    color: black;
+    border-top-left-radius: 0.4rem;
+    border-bottom-left-radius: 0.4rem;
+    // border-radius: 0.4rem;
+  }
+
+  input {
+    width: 100%;
+    border-top-right-radius: 0.4rem;
+    border-bottom-right-radius: 0.4rem;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
 .radio-button {
   width: 1.6rem;
   height: 1.6rem;